How to Build a SaaS Dashboard with Lovable

1// Lovable prompt:
2// "Create a SaaS dashboard layout with:
3// - Collapsible sidebar (icons when collapsed) with:
4//   Dashboard, Analytics, Users, Settings, Billing nav items
5// - Top header bar with user avatar dropdown and
6//   notification bell
7// - Main content area with padding
8// - Use shadcn/ui components and Tailwind
9// - Support dark mode"

1-- Tables Lovable will create:
2
3-- profiles (extends auth.users)
4create table profiles (
5  id uuid references auth.users primary key,
6  full_name text,
7  avatar_url text,
8  role text default 'member' check (role in ('admin', 'member', 'viewer')),
9  created_at timestamptz default now()
10);
11
12-- analytics_events
13create table analytics_events (
14  id uuid default gen_random_uuid() primary key,
15  event_type text not null,
16  value numeric,
17  metadata jsonb default '{}',
18  created_at timestamptz default now()
19);
20
21alter table profiles enable row level security;
22alter table analytics_events enable row level security;

1// Lovable prompt:
2// "On the Dashboard page, add:
3// - 4 KPI cards at the top (Total Users, Revenue,
4//   Active Sessions, Churn Rate) with trend arrows
5// - A line chart showing revenue over the last 30 days
6//   using Recharts
7// - A bar chart showing signups by day
8// - A recent activity feed showing the last 10 events
9// - Fetch all data from Supabase analytics_events table
10// - Add loading skeletons while data loads"

1// Lovable prompt:
2// "Create a Users page with a data table that:
3// - Shows columns: Name, Email, Role, Status, Joined Date
4// - Has search by name or email
5// - Has filter dropdown for Role (admin, member, viewer)
6// - Has pagination (10 per page)
7// - Each row has actions: Edit Role, Deactivate, Delete
8// - Edit Role opens an inline dropdown
9// - Delete shows a confirmation dialog
10// - Fetch data from Supabase profiles table
11// - Only admins can see this page (redirect others)"

1// 1. Add Stripe keys in Lovable:
2//    Cloud tab → Secrets → Add:
3//    STRIPE_SECRET_KEY = sk_test_...
4//    STRIPE_PUBLISHABLE_KEY = pk_test_...
5//    STRIPE_WEBHOOK_SECRET = whsec_...
6
7// 2. Lovable prompt:
8// "Create a Billing page with:
9// - 3 pricing cards (Free, Pro $25/mo, Team $49/mo)
10// - Current plan highlighted with 'Current Plan' badge
11// - Upgrade/downgrade buttons that create Stripe
12//   Checkout sessions via Edge Function
13// - 'Manage Billing' button that opens Stripe
14//   Customer Portal
15// - Create the Edge Function for Stripe checkout
16// - Use constructEventAsync for webhook verification"

1// Lovable prompt:
2// "Add role-based access control:
3// - Read the user's role from the profiles table
4// - Admin: full access to all pages
5// - Member: Dashboard, Analytics (read-only),
6//   own Settings
7// - Viewer: Dashboard only (read-only)
8// - If a user navigates to a page they can't access,
9//   redirect to Dashboard with a toast notification
10// - Add a RoleGuard wrapper component
11// - Show/hide sidebar items based on role"