How to Build Internal dashboard with V0

1// Paste this prompt into V0's AI chat:
2// Build an internal metrics dashboard. Create a Supabase schema with:
3// 1. metrics: id (uuid PK), metric_name (text), metric_value (numeric), recorded_at (timestamptz default now()), source (text)
4// 2. activity_log: id (uuid PK), user_id (uuid FK to auth.users), action (text), entity_type (text), entity_id (text), metadata (jsonb), created_at (timestamptz default now())
5// 3. dashboard_widgets: id (uuid PK), widget_type (text check in 'number','sparkline','bar_chart','activity_feed','table'), title (text), query_config (jsonb), position (int), size (text check in 'small','medium','large')
6// Enable Realtime on the metrics table via Supabase Dashboard → Database → Realtime
7// Seed dashboard_widgets with 5 default widgets: Total Users (number), Revenue Today (number), Signups Trend (sparkline), Activity Feed (activity_feed), Top Pages (table)
8// Seed some sample metrics data for testing
9// Add RLS: authenticated users can read all metrics and activity, only service role can insert metrics

1// Paste this prompt into V0's AI chat:
2// Build the dashboard at app/dashboard/page.tsx.
3// Requirements:
4// - Server Component that fetches dashboard_widgets and initial metric values
5// - Responsive CSS grid: 3 columns desktop, 2 tablet, 1 mobile
6// - Widget types:
7//   1. 'number' Card: large metric_value, metric_name label, percentage change from previous period
8//   2. 'sparkline' Card: small Recharts LineChart showing last 30 data points (wrap in 'use client')
9//   3. 'bar_chart' Card: Recharts BarChart for categorical data (wrap in 'use client')
10//   4. 'activity_feed': last 10 activity_log entries as a compact list
11//   5. 'table': Table widget showing tabular metric data
12// - Tabs for time range: Today, This Week, This Month
13// - Each metric Card uses Supabase Realtime subscription to update live:
14//   Create a 'use client' wrapper component that subscribes to metrics table
15//   .on('postgres_changes', { event: 'INSERT', filter: 'metric_name=eq.{name}' })
16//   Unsubscribe on cleanup in useEffect return
17// - Use Card for all widgets, Badge for entity types in activity feed

1// Paste this prompt into V0's AI chat:
2// Build a RealtimeMetric client component at components/realtime-metric.tsx.
3// Requirements:
4// - 'use client' component that accepts metricName (string) and initialValue (number)
5// - useEffect that subscribes to Supabase Realtime:
6//   const channel = supabase
7//     .channel(`metric-${metricName}`)
8//     .on('postgres_changes', {
9//       event: 'INSERT',
10//       schema: 'public',
11//       table: 'metrics',
12//       filter: `metric_name=eq.${metricName}`
13//     }, (payload) => setValue(payload.new.metric_value))
14//     .subscribe()
15// - Cleanup: return () => { supabase.removeChannel(channel) }
16// - Animate value changes with a brief pulse animation (scale then back)
17// - Show a green dot indicator when connected, red when disconnected
18// - Display the value with appropriate formatting (number, currency, percentage)
19// - Also build RealtimeSparkline: same pattern but appends new values to a data array for the Recharts LineChart
20// - Use Card wrapper with the metric title and a Badge showing 'Live' in green

1// Paste this prompt into V0's AI chat:
2// Build a metric ingestion API at app/api/metrics/route.ts.
3// Requirements:
4// - POST handler that accepts JSON body: { metric_name: string, metric_value: number, source?: string }
5// - API key authentication: check x-api-key header against DASHBOARD_API_KEY env var
6// - Validate input with Zod: metric_name non-empty, metric_value is number, source optional string
7// - Insert into metrics table using Supabase service role client
8// - Return 201 with the inserted metric
9// - GET handler for batch retrieval: accepts ?metric_name and ?from query params
10// - Return 401 for invalid API key, 400 for invalid payload
11// - Support batch inserts: accept array of metrics in a single POST
12// - Rate limit: simple in-memory counter (100 requests per minute per API key)
13// - Also build app/api/activity/route.ts for logging activity events with same auth pattern

1// Paste this prompt into V0's AI chat:
2// Build settings and activity feed:
3// 1. app/dashboard/settings/page.tsx — widget configuration:
4//    - List of current widgets as Card components with title Input, widget_type Select, size Select
5//    - Reorder widgets by dragging (update position field)
6//    - Sheet sidebar for advanced query_config editing (which metric_name to display, chart colors)
7//    - "Add Widget" Button with Dialog for new widget creation
8//    - "Delete Widget" Button with AlertDialog confirmation
9//    - Server Actions for widget CRUD and reordering
10//
11// 2. Activity feed component:
12//    - Real-time activity feed using Supabase Realtime on activity_log table
13//    - Each entry: timestamp, user avatar, action description, entity_type Badge, entity_id link
14//    - New entries slide in from the top with animation
15//    - Select filter for entity_type (user, order, payment, system)
16//    - "View All" link to a full activity log page
17//    - Compact mode (for dashboard widget) and expanded mode (for dedicated page)