How to Build Privacy tools with V0

1// Paste this prompt into V0's AI chat:
2// Build a GDPR/CCPA privacy compliance toolkit. Create a Supabase schema with:
3// 1. consent_records: id (uuid PK), user_id (uuid FK), consent_type (text check analytics/marketing/functional/essential), granted (boolean), ip_address (text), granted_at (timestamptz), revoked_at (timestamptz)
4// 2. data_requests: id (uuid PK), user_id (uuid FK), request_type (text check export/deletion/access), status (text check pending/processing/completed/denied), completed_at (timestamptz), download_url (text), created_at (timestamptz)
5// 3. audit_log: id (uuid PK), actor_id (uuid), action (text), entity_type (text), entity_id (uuid), details (jsonb), created_at (timestamptz)
6// Add RLS: users can only read/write their own consent_records and data_requests. Audit log is insert-only for all, select for admins.
7// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a privacy center at app/privacy/page.tsx.
3// Requirements:
4// - Show a heading "Your Privacy Settings" with description about data control
5// - Display consent categories in shadcn/ui Cards: Essential (always on, disabled Switch), Analytics, Marketing, Functional
6// - Each Card has: category name, description of what data is collected, Switch toggle for granted/revoked
7// - Switch toggles call a Server Action updateConsent() that updates consent_records and logs to audit_log
8// - Below consent, show a "Your Data" section with two Cards:
9//   - "Export My Data" Card with Button that creates a data_request with type=export
10//   - "Delete My Data" Card with Button that opens AlertDialog ("This action cannot be undone") then creates a data_request with type=deletion
11// - Show a Table of existing data_requests with Badge for status (pending=yellow, completed=green)
12// - Add an Accordion at the bottom for privacy policy sections
13// - Use Toast for confirmation feedback after each action
14// - Server Components for data fetching, 'use client' for Switch toggles and AlertDialog

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import { auth } from '@clerk/nextjs/server'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function POST(req: NextRequest) {
11  const { userId } = await auth()
12  if (!userId) {
13    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
14  }
15
16  const { data: request } = await supabase
17    .from('data_requests')
18    .insert({ user_id: userId, request_type: 'export', status: 'processing' })
19    .select()
20    .single()
21
22  const { data: profile } = await supabase
23    .from('profiles')
24    .select('*')
25    .eq('user_id', userId)
26    .single()
27
28  const { data: consents } = await supabase
29    .from('consent_records')
30    .select('*')
31    .eq('user_id', userId)
32
33  const { data: activities } = await supabase
34    .from('audit_log')
35    .select('*')
36    .eq('actor_id', userId)
37
38  const exportData = {
39    exported_at: new Date().toISOString(),
40    profile,
41    consent_records: consents,
42    activity_log: activities,
43  }
44
45  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
46    type: 'application/json',
47  })
48
49  const filePath = `exports/${userId}/${request!.id}.json`
50  await supabase.storage.from('data-exports').upload(filePath, blob)
51
52  const { data: signedUrl } = await supabase.storage
53    .from('data-exports')
54    .createSignedUrl(filePath, 3600)
55
56  await supabase
57    .from('data_requests')
58    .update({
59      status: 'completed',
60      completed_at: new Date().toISOString(),
61      download_url: signedUrl?.signedUrl,
62    })
63    .eq('id', request!.id)
64
65  await supabase.from('audit_log').insert({
66    actor_id: userId,
67    action: 'data_export_completed',
68    entity_type: 'data_request',
69    entity_id: request!.id,
70    details: { file_path: filePath },
71  })
72
73  return NextResponse.json({ download_url: signedUrl?.signedUrl })
74}

1import { NextRequest, NextResponse } from 'next/server'
2
3export function middleware(request: NextRequest) {
4  const response = NextResponse.next()
5  const consent = request.cookies.get('privacy-consent')?.value
6
7  if (!consent) {
8    response.headers.set('x-consent-status', 'none')
9  } else {
10    try {
11      const parsed = JSON.parse(consent)
12      response.headers.set(
13        'x-consent-analytics',
14        parsed.analytics ? 'granted' : 'denied'
15      )
16      response.headers.set(
17        'x-consent-marketing',
18        parsed.marketing ? 'granted' : 'denied'
19      )
20    } catch {
21      response.headers.set('x-consent-status', 'invalid')
22    }
23  }
24
25  return response
26}
27
28export const config = {
29  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
30}

1// Paste this prompt into V0's AI chat:
2// Build an admin audit log page at app/admin/audit/page.tsx.
3// Requirements:
4// - Only accessible to admin users (check Clerk user role)
5// - Fetch all audit_log entries ordered by created_at descending
6// - Display in a shadcn/ui Table with columns: timestamp, actor_id, action, entity_type, entity_id
7// - Action column uses Badge with color coding: data_export=blue, consent_update=green, deletion_request=red
8// - Add date range filter using Calendar + Popover (DatePicker pattern)
9// - Add Select filter for action type
10// - Add pagination with 50 entries per page
11// - Use Server Components for data fetching
12// - Add a "Download Audit Log" Button that exports filtered results as CSV