How to Build Reporting tool with V0

1// Paste this prompt into V0's AI chat:
2// Build a reporting tool. Create a Supabase schema with:
3// 1. reports: id (uuid PK), owner_id (uuid FK), name (text), description (text), query_config (jsonb), chart_type (text check bar/line/pie/table/area), filters (jsonb), is_scheduled (boolean default false), schedule_cron (text nullable), created_at (timestamptz), updated_at (timestamptz)
4// 2. report_snapshots: id (uuid PK), report_id (uuid FK), data (jsonb), generated_at (timestamptz), file_url (text nullable)
5// 3. data_sources: id (uuid PK), owner_id (uuid FK), name (text), type (text check supabase/api/csv), connection_config (jsonb), created_at (timestamptz)
6// 4. shared_reports: id (uuid PK), report_id (uuid FK), shared_with (uuid FK), permission (text check view/edit), created_at (timestamptz)
7// RLS: owners can CRUD their own reports. Shared users can read or edit based on permission.
8// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a report builder at app/reports/[id]/edit/page.tsx.
3// Requirements:
4// - Left panel: configuration controls
5//   - Input for report name
6//   - Select for chart type (bar/line/pie/table/area)
7//   - Select for data source table (populated from Supabase information_schema)
8//   - Select for dimension field (group by)
9//   - Select for metric field (count/sum/avg)
10//   - DatePicker (Calendar + Popover) for start and end date range
11//   - Additional filter rows: Select for field, Select for operator (equals/greater/less/contains), Input for value. Add/Remove Buttons.
12// - Right panel: live chart preview using Recharts
13//   - Updates as config changes
14//   - Renders the selected chart type with real data from Supabase
15// - Top bar: Save Button (Server Action), Export DropdownMenu (CSV/PDF/PNG)
16// - Use shadcn/ui Card, Select, Input, Calendar, Popover, Tabs, DropdownMenu
17// - 'use client' for the interactive builder, Server Action saveReport()

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { report_id } = await req.json()
11
12  const { data: report } = await supabase
13    .from('reports')
14    .select('query_config, chart_type')
15    .eq('id', report_id)
16    .single()
17
18  if (!report) {
19    return NextResponse.json({ error: 'Report not found' }, { status: 404 })
20  }
21
22  const config = report.query_config as {
23    table: string
24    dimension: string
25    metric: string
26    metric_type: string
27    date_field?: string
28    start_date?: string
29    end_date?: string
30    filters?: Array<{ field: string; operator: string; value: string }>
31  }
32
33  let query = supabase.from(config.table).select('*')
34
35  if (config.start_date && config.date_field) {
36    query = query.gte(config.date_field, config.start_date)
37  }
38  if (config.end_date && config.date_field) {
39    query = query.lte(config.date_field, config.end_date)
40  }
41
42  config.filters?.forEach((f) => {
43    switch (f.operator) {
44      case 'equals': query = query.eq(f.field, f.value); break
45      case 'greater': query = query.gt(f.field, f.value); break
46      case 'less': query = query.lt(f.field, f.value); break
47      case 'contains': query = query.ilike(f.field, `%${f.value}%`); break
48    }
49  })
50
51  const { data, error } = await query
52
53  if (error) {
54    return NextResponse.json({ error: error.message }, { status: 500 })
55  }
56
57  // Aggregate client-side for flexibility
58  const grouped = new Map<string, number>()
59  data?.forEach((row: Record<string, unknown>) => {
60    const key = String(row[config.dimension] ?? 'Unknown')
61    const val = Number(row[config.metric] ?? 0)
62    const current = grouped.get(key) ?? 0
63    grouped.set(key, config.metric_type === 'count' ? current + 1 : current + val)
64  })
65
66  const chartData = Array.from(grouped.entries()).map(([name, value]) => ({
67    name,
68    value,
69  }))
70
71  // Save snapshot
72  await supabase.from('report_snapshots').insert({
73    report_id,
74    data: chartData,
75  })
76
77  return NextResponse.json({ data: chartData, chart_type: report.chart_type })
78}

1// Paste this prompt into V0's AI chat:
2// Build a report export API at app/api/reports/export/route.ts.
3// Requirements:
4// - Accepts POST with { report_id, format: 'csv' | 'pdf' }
5// - For CSV: generate comma-separated text from the latest report_snapshot data, return as downloadable file with Content-Disposition header
6// - For PDF: use @react-pdf/renderer to create a PDF document with:
7//   - Report title and date range header
8//   - Table of the data with styled headers and alternating row colors
9//   - Summary statistics (total, average)
10//   - Footer with generation timestamp
11//   - Return as downloadable PDF with Content-Disposition header
12// - Set maxDuration = 30 in the route config for large reports
13// - Store the generated file URL in report_snapshots.file_url
14// Also add export buttons to the report viewer:
15// - DropdownMenu with CSV, PDF, PNG options
16// - PNG export uses canvas-to-image on the Recharts chart (client-side)

1// Paste this prompt into V0's AI chat:
2// Build a report library and sharing:
3// 1. Report list at app/reports/page.tsx:
4//    - Command search bar for quick report finding
5//    - Grid of report Cards showing: name, chart type icon, last generated timestamp, shared count Badge
6//    - Each Card links to the report viewer
7//    - "New Report" Button to create blank report → redirect to builder
8// 2. Report viewer at app/reports/[id]/page.tsx:
9//    - Full-width Recharts chart rendering the latest snapshot data
10//    - Tabs to switch between Chart view and Table view
11//    - DatePicker to re-run the report for a different date range
12//    - Export DropdownMenu (CSV/PDF)
13//    - Share Button opens Dialog with:
14//      - Input for team member email
15//      - Select for permission (view/edit)
16//      - Table of existing shares with role Badge and remove Button
17//      - Server Action shareReport()
18// 3. Server Components for data fetching, 'use client' for interactive chart and sharing dialog