User Management
Total Users
{totalUsers}
Admins
{admins}
)
}
```
> Pro tip: Use Design Mode (Option+D) to visually adjust the stat Card spacing, table column widths, and role Badge colors without spending any credits.
### 4. Add the audit log page for tracking admin actions
Create the audit log page that shows every admin action — who did what, when, and to which entity. This is critical for compliance and debugging. The Server Action that updates roles automatically inserts an audit log entry.
```
// Paste this prompt into V0's AI chat:
// Build an audit log page at app/admin/audit/page.tsx.
// Requirements:
// - Fetch all audit_logs from Supabase joined with profiles for the user name
// - Display in a shadcn/ui Table with columns: Date, User, Action, Entity Type, Entity ID
// - Add Badge for action types (color-coded: create=green, update=blue, delete=red)
// - Add a Select filter for action type and a DatePicker for date range
// - Show the metadata jsonb in an expandable row detail using Collapsible
// - Paginate with 25 items per page using cursor-based pagination on created_at
// - Use Server Components for data fetching, no 'use client' unless needed for filters
```
**Expected result:** The audit log page shows a chronological list of admin actions with filters for action type and date range. Each row is expandable to show metadata details.
### 5. Build the settings page with Server Actions for safe updates
Create a settings page where admins can update application configuration like site name, maintenance mode, and feature flags. Use Server Actions for mutations so settings changes are validated server-side and logged to the audit trail.
```
'use server'
import { createClient } from '@supabase/supabase-js'
import { auth } from '@clerk/nextjs/server'
import { revalidatePath } from 'next/cache'
const supabase = createClient(
process.env.SUPABASE_URL!,
process.env.SUPABASE_SERVICE_ROLE_KEY!
)
export async function updateSetting(key: string, value: unknown) {
const { userId } = await auth()
if (!userId) throw new Error('Unauthorized')
const { data: profile } = await supabase
.from('profiles')
.select('role')
.eq('id', userId)
.single()
if (profile?.role !== 'admin') throw new Error('Forbidden')
const { error } = await supabase
.from('settings')
.upsert({ key, value, updated_by: userId, updated_at: new Date().toISOString() })
if (error) throw new Error(error.message)
await supabase.from('audit_logs').insert({
user_id: userId,
action: 'update',
entity_type: 'setting',
metadata: { key, value },
})
revalidatePath('/admin/settings')
}
```
> Pro tip: Every Server Action that modifies data should insert an audit_logs row. This creates a full paper trail of who changed what and when — essential for any serious admin panel.
**Expected result:** The settings page displays current configuration values. Admins can edit values inline, and every change is saved to Supabase and recorded in the audit log.
## Complete code example
File: `app/admin/layout.tsx`
```typescript
import { auth } from '@clerk/nextjs/server'
import { createClient } from '@supabase/supabase-js'
import { redirect } from 'next/navigation'
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from '@/components/ui/sidebar'
import { Users, Shield, Settings, FileText } from 'lucide-react'
const supabase = createClient(
process.env.SUPABASE_URL!,
process.env.SUPABASE_SERVICE_ROLE_KEY!
)
const navItems = [
{ title: 'Users', href: '/admin/users', icon: Users },
{ title: 'Audit Log', href: '/admin/audit', icon: FileText },
{ title: 'Settings', href: '/admin/settings', icon: Settings },
]
export default async function AdminLayout({
children,
}: {
children: React.ReactNode
}) {
const { userId } = await auth()
if (!userId) redirect('/sign-in')
const { data: profile } = await supabase
.from('profiles')
.select('role, full_name')
.eq('id', userId)
.single()
if (!profile || profile.role === 'viewer') {
redirect('/unauthorized')
}
return (