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
| Variable | Replace 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.