Lovablefeatureintermediate

Add Analytics Dashboard to Lovable App

Add an analytics page with Recharts for KPI cards, trend charts, and date range filtering.

What you'll get

An analytics dashboard with KPI cards, trend charts, date filtering, and auto-refresh using Recharts.

The Prompt

Add an analytics dashboard to my Lovable app.

REQUIREMENTS:
1. Create an /analytics page (protected, admin-only or available to all authenticated users).
2. Add a date range picker at the top (Last 7 days, Last 30 days, Last 90 days, Custom range).
3. Display 4 KPI cards at the top: primary metric value, percentage change vs previous period, and trend arrow (up green, down red).
4. Add a line chart showing the primary metric over time using Recharts. Include a tooltip on hover showing exact values.
5. Add a bar chart comparing categories or segments.
6. Add a data table below the charts showing detailed records with pagination.
7. All data fetched from Supabase with the date range applied as a filter.
8. Add a refresh button and auto-refresh every 5 minutes.
9. Loading skeletons while data is being fetched.

DATABASE:
- No new tables. Aggregates data from existing tables.
- Consider creating a Supabase View or RPC function for complex aggregations.

SECURITY:
- Protect the analytics page behind authentication.
- Aggregate data appropriately — don't expose individual user data in shared dashboards.

Replace these variables

VariableReplace with
[KPI_METRICS]Four key metrics to display (e.g., revenue, users, orders, conversion rate)
[DATA_SOURCE]Supabase table(s) to query for analytics data

Tips for best results

Use Supabase RPC functions for complex aggregations instead of fetching raw data and processing client-side.

Add loading skeletons that match the chart dimensions to prevent layout shift.

Follow-up prompts

Add CSV export

Add an 'Export CSV' button to the analytics dashboard that downloads the currently filtered data as a CSV file.

Add comparison mode

Add a comparison toggle that overlays the previous period's data on the charts so users can see trends.

Related prompts