How to Build Admin panel with V0

1// Paste this prompt into V0's AI chat:
2// Build an admin panel with Clerk authentication and Supabase backend.
3// Create a Supabase schema with these tables:
4// 1. profiles: id (uuid PK), email (text), role (text CHECK in 'admin','editor','viewer'), full_name (text), avatar_url (text), created_at (timestamptz)
5// 2. audit_logs: id (uuid PK), user_id (uuid FK), action (text), entity_type (text), entity_id (uuid), metadata (jsonb), created_at (timestamptz)
6// 3. settings: id (uuid PK), key (text unique), value (jsonb), updated_by (uuid FK), updated_at (timestamptz)
7// Add RLS policies that restrict access based on the role column in profiles.
8// Generate the SQL migration.

1import { auth, currentUser } from '@clerk/nextjs/server'
2import { createClient } from '@supabase/supabase-js'
3import { redirect } from 'next/navigation'
4import { AdminSidebar } from '@/components/admin-sidebar'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export default async function AdminLayout({
12  children,
13}: {
14  children: React.ReactNode
15}) {
16  const { userId } = await auth()
17  if (!userId) redirect('/sign-in')
18
19  const { data: profile } = await supabase
20    .from('profiles')
21    .select('role, full_name, avatar_url')
22    .eq('id', userId)
23    .single()
24
25  if (!profile || profile.role === 'viewer') {
26    redirect('/unauthorized')
27  }
28
29  return (
30    <div className="flex h-screen">
31      <AdminSidebar
32        role={profile.role}
33        name={profile.full_name}
34        avatar={profile.avatar_url}
35      />
36      <main className="flex-1 overflow-y-auto p-6">{children}</main>
37    </div>
38  )
39}

1import { createClient } from '@supabase/supabase-js'
2import { UserTable } from '@/components/user-table'
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export default async function UsersPage() {
11  const { data: users } = await supabase
12    .from('profiles')
13    .select('*')
14    .order('created_at', { ascending: false })
15
16  const totalUsers = users?.length ?? 0
17  const admins = users?.filter((u) => u.role === 'admin').length ?? 0
18
19  return (
20    <div className="space-y-6">
21      <h1 className="text-3xl font-bold">User Management</h1>
22      <div className="grid gap-4 md:grid-cols-3">
23        <Card>
24          <CardHeader><CardTitle>Total Users</CardTitle></CardHeader>
25          <CardContent className="text-3xl font-bold">{totalUsers}</CardContent>
26        </Card>
27        <Card>
28          <CardHeader><CardTitle>Admins</CardTitle></CardHeader>
29          <CardContent className="text-3xl font-bold">{admins}</CardContent>
30        </Card>
31      </div>
32      <UserTable users={users ?? []} />
33    </div>
34  )
35}

1// Paste this prompt into V0's AI chat:
2// Build an audit log page at app/admin/audit/page.tsx.
3// Requirements:
4// - Fetch all audit_logs from Supabase joined with profiles for the user name
5// - Display in a shadcn/ui Table with columns: Date, User, Action, Entity Type, Entity ID
6// - Add Badge for action types (color-coded: create=green, update=blue, delete=red)
7// - Add a Select filter for action type and a DatePicker for date range
8// - Show the metadata jsonb in an expandable row detail using Collapsible
9// - Paginate with 25 items per page using cursor-based pagination on created_at
10// - Use Server Components for data fetching, no 'use client' unless needed for filters

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { auth } from '@clerk/nextjs/server'
5import { revalidatePath } from 'next/cache'
6
7const supabase = createClient(
8  process.env.SUPABASE_URL!,
9  process.env.SUPABASE_SERVICE_ROLE_KEY!
10)
11
12export async function updateSetting(key: string, value: unknown) {
13  const { userId } = await auth()
14  if (!userId) throw new Error('Unauthorized')
15
16  const { data: profile } = await supabase
17    .from('profiles')
18    .select('role')
19    .eq('id', userId)
20    .single()
21
22  if (profile?.role !== 'admin') throw new Error('Forbidden')
23
24  const { error } = await supabase
25    .from('settings')
26    .upsert({ key, value, updated_by: userId, updated_at: new Date().toISOString() })
27
28  if (error) throw new Error(error.message)
29
30  await supabase.from('audit_logs').insert({
31    user_id: userId,
32    action: 'update',
33    entity_type: 'setting',
34    metadata: { key, value },
35  })
36
37  revalidatePath('/admin/settings')
38}