L
📈Analytics & Reporting Dashboard

Analytics Dashboard

Build a clean analytics dashboard with KPI cards, charts, date filters, and CSV export for any business metric.

KPI cards with deltaRecharts line/bar/donutDate range pickerCSV exportSupabase RLSLoading skeletons

The Prompt

✨ Ready-to-use Lovable Prompt

Open Lovable
Build an analytics dashboard with the following features:

**Layout:**
- Left sidebar with navigation: Overview, Revenue, Users, Events, Settings
- Top bar: date range picker (Last 7 days / 30 days / 90 days / Custom), export CSV button, user avatar
- Responsive: sidebar collapses to hamburger on mobile

**Overview Page:**
- 4 KPI cards at the top: Total Revenue, Active Users, Signups This Period, Conversion Rate — each with the current number, delta vs previous period (green/red), and a sparkline
- Large line chart showing revenue over time (toggle daily/weekly/monthly)
- Two side-by-side charts: bar chart of top referral sources, donut chart of user plan mix (Free/Pro/Team)
- Recent activity table: last 20 events with user, event type, timestamp

**Filters:**
- Every chart respects the global date range picker
- Optional segment filter: plan, country, device

**Data:**
- Pull from Supabase tables: users, events, subscriptions, revenue_daily
- All queries use a date range parameter
- Empty states: "No data for this range — try a wider date window"

**Design:**
- Clean light theme with neutral greys and a single accent colour
- Use Recharts for all charts
- Card-based layout with subtle borders
- Loading skeletons for every card/chart
- Responsive on mobile

Store everything in Supabase. Use Row Level Security so each user only sees their own data.

How to Use This Prompt

  1. 1

    Copy the prompt

    Click the 'Copy Prompt' button above to copy the full prompt to your clipboard.

  2. 2

    Open Lovable

    Go to lovable.dev and create a new project. If you're on the free plan, you get 5 credits/day.

  3. 3

    Paste and send

    Paste the prompt into the Lovable chat input and press enter. Lovable will start building your app immediately.

  4. 4

    Iterate and refine

    Review what Lovable builds. Use follow-up prompts to refine the design, add features, or fix anything that's off.

Pro Tips

  • Specify the chart library (Recharts) so Lovable doesn't pick something heavyweight
  • Include 'loading skeletons' and 'empty states' in the prompt — dashboards look unfinished without them
  • Ask for 'CSV export' from day one — stakeholders always ask for it later

Prompt Variations

Different versions of this prompt for specific use cases.

Marketing analytics

Build a marketing analytics dashboard. KPI cards: Visitors, Leads, MQLs, CAC. Funnel chart showing conversion from Visitor → Signup → Activated → Paid. Channel breakdown table with columns: Source, Sessions, Signups, Signup Rate, CAC. Support UTM parameter filtering.

Product analytics

Build a product analytics dashboard. KPI cards: DAU, WAU, MAU, Retention (D1/D7/D30). Feature adoption grid showing % of users who used each feature this week. Cohort retention table for the last 8 weeks with colour-graded cells. Event timeline filterable by user.

Frequently Asked Questions

Can Lovable connect a dashboard to my real database?
Yes. Lovable connects to Supabase out of the box. If your data lives elsewhere (Postgres, BigQuery, Stripe), ask Lovable to 'pull data via a Supabase Edge Function that queries [your source] and caches results in Supabase.'
How do I add authentication so only my team sees the dashboard?
Ask Lovable to add Supabase Auth with email/password or Google OAuth, plus Row Level Security policies that restrict access to specific user IDs or team membership rows.

Ready to build?

Copy the prompt above, then paste it into Lovable. Your app starts building instantly.

Try Lovable Free