Build an Admin Panel in Lovable

TL;DR

The one-paragraph version before you dive in.

Paste the starter prompt below into Lovable Agent Mode and you get a working admin panel scaffold (sidebar layout, users/products/orders CRUD, search, pagination, role-gated routes) on Supabase Cloud. Total build time: ~2 hours with five follow-up prompts. Expected credit burn: 500-800 on a Pro $25/mo plan.

Setup checklist

Complete these steps in Lovable before pasting the starter prompt — takes about 5 minutes.

Cloud tab settings

Database

Stores users, products, orders, and an audit_log for admin actions.

1Click the + button next to Preview in the top toolbar to open the Cloud tab
2Click Database — you'll see an empty Table Editor
3Leave it empty for now — the starter prompt will create the schema and migrations for you

Auth

Email+password sign-in for admins. Role is stored in app_metadata so it's signed into the JWT and cannot be tampered with from the client.

1Cloud tab → Users & Auth
2Under Sign-in methods, enable Email (the default — already on)
3Disable any other provider you don't need (Google, GitHub) so the surface area is small
4Confirm 'Allow new users to sign up' is OFF — you'll invite admins manually from the Users page

Storage

Holds product images uploaded from the Products module. One private bucket with admin-only read/write.

1Cloud tab → Storage
2Click Create bucket, name it 'product-images', leave Public OFF
3Note the bucket name — the starter prompt will reference it

Preflight checklist

You're in a fresh Lovable project (Vite + React + TypeScript + Tailwind + shadcn/ui already scaffolded — that's the default)
You're on Pro $25/mo plan or willing to upgrade mid-build — full build runs ~500-800 credits and Free plan caps at 30/mo
You've created the first admin user manually via Cloud tab → Users & Auth → Add user, and set their app_metadata to {"role": "admin"} from the user's row

The starter prompt — paste this first

Copy this. Paste it into Lovable Agent Mode (the default chat at the bottom-left of the editor). Hit send.

lovable-agent-mode.txt

~120-180 credits

Build an admin panel for an internal tool. Stack assumptions: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded by Lovable), React Router for routes, Supabase JS client for data access against Lovable Cloud.

## Database schema (create a migration)
Create four tables in the public schema:

1. `profiles` — one row per auth.users row, linked by id (uuid, FK to auth.users.id, cascade delete). Columns: full_name (text), email (text not null), role (text not null default 'member', check role in ('admin','member')), created_at (timestamptz default now()).

2. `products` — id (uuid pk default gen_random_uuid()), name (text not null), sku (text unique not null), price_cents (int not null), stock (int not null default 0), image_path (text — Storage path), archived (bool default false), created_at (timestamptz default now()).

3. `orders` — id (uuid pk default gen_random_uuid()), order_number (text unique not null default 'ORD-' || nextval('orders_seq')), customer_email (text not null), status (text not null default 'pending', check status in ('pending','paid','shipped','refunded','cancelled')), total_cents (int not null), placed_at (timestamptz default now()), notes (text). Also create sequence orders_seq.

4. `audit_log` — id (uuid pk default gen_random_uuid()), actor_id (uuid references auth.users.id), action (text not null), entity_type (text not null), entity_id (text), payload (jsonb), created_at (timestamptz default now()).

Enable RLS on all four. Add policies: only users where `(auth.jwt() ->> 'app_metadata')::jsonb ->> 'role' = 'admin'` can select/insert/update/delete profiles, products, orders, audit_log. Add a `before insert` trigger on profiles that copies auth.users.email into profiles.email.

## Layout
Create `src/layouts/AdminLayout.tsx` — a two-column shell with a fixed left sidebar (240px) and a scrollable main area. Sidebar contains: logo at top, nav links (Dashboard, Users, Products, Orders, Settings), bottom-pinned user menu (avatar initials + signed-in email + Sign out button). Use shadcn/ui components throughout (Button, Avatar, DropdownMenu, ScrollArea). Top of main area: breadcrumbs (Home / [Section] / [Detail]).

Wrap the layout in an AdminGuard that calls `supabase.auth.getUser()` and reads app_metadata.role. If not admin → redirect to /unauthorized (create that page too, with a one-line 'You don't have access' message and Sign out button).

## Pages
Create these routes in src/App.tsx and corresponding page components in src/pages/admin/:
- /admin (Dashboard.tsx) — 4 metric cards (Users count, Products count, Orders this month, Revenue this month) + recent orders table (last 10).
- /admin/users (Users.tsx) — table of profiles, search by email/name, role filter, paginated 25/page. Row click opens a Sheet (right drawer) with edit form (full_name, role) and Save.
- /admin/products (Products.tsx) — same pattern. Edit Sheet has name, sku, price (dollars input → cents conversion), stock, image upload (Storage bucket 'product-images'), archived toggle.
- /admin/orders (Orders.tsx) — table with status filter chips (pending/paid/shipped/refunded/cancelled), date range filter, search by order_number or customer_email. Row click opens a Dialog with order detail + status change dropdown.
- /admin/settings (Settings.tsx) — placeholder card with 'Account' section showing current admin profile + 'Sign out' button.

All three list pages share an `<AdminTable>` wrapper component that handles search debounce (300ms), pagination, empty state, and loading skeletons.

Every mutation (update profile, update product, update order status) writes one row to audit_log via a `useAuditLog()` hook.

## Styling cues
Light mode only for v1. Use the default shadcn theme but set the primary color to slate-900 in tailwind.config.ts. Tables use shadcn Table with zebra striping on hover. Use lucide-react icons in sidebar nav.

Generate the schema migration first, then the layout, then the four pages in the order above. After each major piece, stop and let me confirm before continuing.

What this prompt generates

Creates a SQL migration with 4 tables (profiles, products, orders, audit_log), RLS policies, and one trigger
Scaffolds AdminLayout.tsx with sidebar nav, user menu, breadcrumbs, and admin-only AdminGuard wrapper
Generates 5 page components (Dashboard, Users, Products, Orders, Settings) wired to React Router
Builds a reusable <AdminTable> wrapper with search debounce, pagination, empty/loading states
Adds useAuditLog() hook that records every mutation to the audit_log table

Paste into: Lovable Agent Mode (the default chat at the bottom-left of the editor)

Expected output

What Lovable will generate after the starter prompt runs successfully.

Files

supabase/migrations/0001_admin_panel_schema.sql

All four tables + RLS policies + profiles trigger

src/layouts/AdminLayout.tsx

Sidebar + breadcrumbs + user menu shell, wrapped in AdminGuard

src/components/AdminGuard.tsx

Reads JWT app_metadata.role, redirects to /unauthorized if not admin

src/components/AdminTable.tsx

Reusable list-view wrapper with search, pagination, states

src/hooks/useAuditLog.ts

writeAudit({action, entity_type, entity_id, payload}) helper

src/pages/admin/Dashboard.tsx

Metric cards + recent orders table

src/pages/admin/Users.tsx

Profiles list + edit Sheet

src/pages/admin/Products.tsx

Products list + edit Sheet with image upload

src/pages/admin/Orders.tsx

Orders list + status change Dialog

src/pages/admin/Settings.tsx

Current admin profile + sign out

src/pages/Unauthorized.tsx

Fallback for non-admin users

Routes

/admin

Dashboard with KPI cards and recent orders

/admin/users

Profiles list, role filter, edit drawer

/admin/products

Products list with image upload

/admin/orders

Orders list with status filter and detail dialog

/admin/settings

Account settings (placeholder for v1)

/unauthorized

Shown when a non-admin lands on /admin/*

DB Tables

profiles

Column	Type	Notes
id	uuid primary key	FK to auth.users.id, cascade delete
full_name	text	—
email	text not null	auto-copied from auth.users.email via trigger
role	text not null default 'member'	check (role in ('admin','member'))
created_at	timestamptz default now()	—

RLS: Admin-only via JWT app_metadata.role check

products

Column	Type	Notes
id	uuid primary key default gen_random_uuid()	—
name	text not null	—
sku	text unique not null	—
price_cents	int not null	—
stock	int not null default 0	—
image_path	text	Storage path inside 'product-images' bucket
archived	bool default false	—
created_at	timestamptz default now()	—

RLS: Admin-only read+write; consider a 'storefront' policy later if you expose products publicly

orders

Column	Type	Notes
id	uuid primary key default gen_random_uuid()	—
order_number	text unique not null	'ORD-' \|\| sequence
customer_email	text not null	—
status	text not null default 'pending'	check constraint enforces enum
total_cents	int not null	—
placed_at	timestamptz default now()	—
notes	text	—

RLS: Admin-only for v1; if you connect a customer-facing storefront later, add a per-customer select policy

audit_log

Column	Type	Notes
id	uuid primary key default gen_random_uuid()	—
actor_id	uuid references auth.users.id	—
action	text not null	'profile.update' / 'product.archive' / 'order.status_change'
entity_type	text not null	—
entity_id	text	—
payload	jsonb	before/after snapshot
created_at	timestamptz default now()	—

RLS: Admin-only; you'll read this from /admin/settings later

Components

AdminLayout

Two-column shell with sidebar + main scroll area

AdminGuard

Role check wrapper, redirects unauthorized users

AdminTable

Generic list view with search, pagination, empty/loading states

EntityDrawer (Sheet)

Right-side drawer for edit forms

StatusFilterChips

Order status quick filter row

Follow-up prompts

Paste these into Agent Mode one by one, in order, after the starter prompt finishes.

Lock down RLS for production

Defense-in-depth on RLS so a leaked anon key cannot read or escalate admin data.

~30 credits

prompt

Audit the RLS policies you just created. For each table (profiles, products, orders, audit_log), confirm there is no policy that allows anon role access. Make sure every policy uses `(auth.jwt() ->> 'app_metadata')::jsonb ->> 'role' = 'admin'` and not `auth.uid()` alone. Also add a `WITH CHECK` clause to every INSERT/UPDATE policy so admins can't escalate someone else's role. Run a test query as the anon role at the end and confirm it returns 0 rows for every table.

When to use: Right after the starter prompt — before you put real data in

Add CSV export to every list view

One-click data export from any filtered view, with audit trail.

~40 credits

prompt

Add an Export CSV button to the top-right of the Users, Products, and Orders pages. Clicking it should download the currently filtered+sorted view as a CSV (respecting search query, filters, and date range — not the whole table). Use the 'papaparse' library if not already installed. File names: 'users-YYYY-MM-DD.csv', 'products-YYYY-MM-DD.csv', 'orders-YYYY-MM-DD.csv'. Log every export to audit_log with action 'export.csv' and payload {row_count, filters}.

When to use: Once the three list pages render correctly

Add an admin invite flow

Self-serve admin onboarding — no more manual app_metadata edits in the Cloud tab.

~80 credits

prompt

On /admin/users add an 'Invite admin' button (top-right). It opens a Dialog with an email field. On Submit, call a Supabase Edge Function `invite-admin` that does: (1) creates a user via supabase.auth.admin.inviteUserByEmail(email), (2) sets app_metadata.role='admin' on the new user, (3) writes an audit_log row with action='admin.invite'. Show toast success/error. The Edge Function should reject the call if the caller is not already an admin (check JWT inside the function). Use the Cloud tab → Edge Functions to deploy.

When to use: When you've onboarded yourself and want to add a second admin

Add a Stripe billing module

Live Stripe customer/subscription view inside the admin panel.

~100 credits

prompt

Add a new page /admin/billing that lists Stripe subscriptions for all profiles. Pre-reqs: I'll add STRIPE_SECRET_KEY to Cloud tab → Secrets. Create an Edge Function `stripe-subscriptions-list` that calls Stripe's customer.list with limit=100 + auto-pagination and returns name, email, status, current_period_end, amount. Render the result in an AdminTable. Add a row action 'Open in Stripe' that links to dashboard.stripe.com/customers/{id}. Status filter chips: active, past_due, canceled. Don't store anything in our DB — Stripe is the source of truth.

When to use: Once Stripe is your billing system and you want a single pane of glass

Wire up the dashboard metric cards with real data

The Dashboard becomes a real at-a-glance health view instead of a placeholder.

~50 credits

prompt

Replace the placeholder numbers on /admin Dashboard with live data. Create a Supabase RPC function `admin_metrics()` that returns: total_users (count of profiles), total_products (count where archived=false), orders_this_month (count where placed_at >= date_trunc('month', now())), revenue_this_month_cents (sum of total_cents where status in ('paid','shipped') and placed_at >= date_trunc('month', now())). The hook useAdminMetrics() should call it on mount and refresh every 60 seconds. Format revenue in dollars with thousands separators in the card.

When to use: After you have at least 5-10 real orders in the database

Add an audit log viewer

Full visibility into what every admin did and when.

~40 credits

prompt

On /admin/settings add a 'Recent admin activity' section below the account card. Show the last 50 audit_log entries, newest first, in a compact list: <actor_email> · <action> · <entity_type>:<entity_id> · <relative time>. Each row is clickable to expand the payload JSON in a Dialog. Add a 'Load more' button at the bottom that paginates 50 at a time.

When to use: Once you have 2+ admins

Common errors

Real error strings you'll see. Find yours, paste the fix prompt.

new row violates row-level security policy for table "profiles"

You're signed in but your JWT doesn't have app_metadata.role='admin'. Lovable's Cloud tab created your user without it.