Build an Internal Dashboard in Lovable

Build a staff-only internal KPI dashboard. Stack: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router, Supabase JS client against Lovable Cloud.

## Database schema (create one migration)

Create these tables in the public schema and enable RLS on all of them:

1. `profiles` — id (uuid, FK to auth.users.id, cascade delete, primary key), full_name (text), email (text not null), role (text not null default 'staff', check role in ('admin','staff','viewer')), created_at (timestamptz default now()).

2. `metrics_snapshots` — id (uuid pk default gen_random_uuid()), metric (text not null, e.g. 'mrr_cents', 'active_users', 'orders_count', 'new_signups_7d'), value_numeric (numeric), value_jsonb (jsonb — for breakdowns), captured_at (timestamptz default now()), period (text check in ('day','week','month')). Add an index on (metric, captured_at).

3. `dashboard_filters` — id (uuid pk default gen_random_uuid()), user_id (uuid references auth.users.id), name (text), filter_jsonb (jsonb). RLS: own-row read/write only.

Create a SECURITY DEFINER plpgsql function `has_role(check_role text) RETURNS boolean LANGUAGE plpgsql SECURITY DEFINER STABLE` that reads `(auth.jwt() -> 'app_metadata' ->> 'role')` and returns whether it matches check_role. NEVER use a SQL-language function — they get inlined by the optimizer and lose the security definer boundary.

Create a SECURITY DEFINER plpgsql function `dashboard_overview() RETURNS TABLE(total_users bigint, mrr_cents bigint, orders_today bigint, new_signups_7d bigint)` that queries your existing domain tables (or returns 0 if they don't exist yet). This gives the dashboard 4 KPI numbers in one round-trip.

RLS policies:
- profiles: SELECT by own row OR (has_role('admin') OR has_role('staff'))
- metrics_snapshots: SELECT by authenticated USING (has_role('staff') OR has_role('admin') OR has_role('viewer')); no INSERT/UPDATE/DELETE by authenticated users (writes only from service role or Edge Function)
- dashboard_filters: SELECT/INSERT/UPDATE/DELETE WHERE user_id = auth.uid()

Seed 7 days of fake metrics_snapshots rows (one row per metric per day for mrr_cents, active_users, orders_count, new_signups_7d) so charts render immediately.

## Layout

Create `src/layouts/DashboardLayout.tsx` — a two-column shell with a fixed left sidebar (220px) containing: logo at top, nav links (Overview, Revenue, Users, Activity, Settings), and a bottom-pinned user menu (email + Sign out). Main area scrolls with a DateRangeFilter pill (last 7d / 30d / 90d / custom) pinned at top-right. Apply a light mode default with shadcn ThemeProvider.

Create `src/components/StaffGuard.tsx` — calls supabase.auth.getUser(), reads app_metadata.role, shows a centered loading spinner while the session resolves, and redirects to /unauthorized if role is NOT in ('admin','staff','viewer'). Never read the role before the user object resolves.

## Pages and routes

Create these routes in src/App.tsx and page components:

- `/dashboard` — Overview: 4 StatCard components (Total Users, MRR, Orders Today, New Signups 7d) fetched from dashboard_overview() RPC, plus a revenue trend LineChart and a signups-by-day LineChart fetched from metrics_snapshots.
- `/dashboard/revenue` — MRR trend (line) + revenue by plan (stacked area), both from metrics_snapshots WHERE metric IN ('mrr_cents', ...) filtered by date range.
- `/dashboard/users` — Signups-by-day (bar) + active users by week (line).
- `/dashboard/activity` — Last 50 recent actions table (read from your existing domain tables, or show an empty state if not present).
- `/dashboard/settings` — DateRangeFilter defaults + saved filter view manager (reads/writes dashboard_filters).
- `/unauthorized` — one-line message with Sign out button.

## Components

Create these reusable components:
- `src/components/StatCard.tsx` — label, value, delta (with emerald-500 for positive / rose-500 for negative), sparkline (inline Recharts LineChart, no axes).
- `src/components/TimeSeriesChart.tsx` — Recharts ResponsiveContainer + LineChart/AreaChart wrapper. Accepts data, metric key, date range. Shows a shadcn Skeleton while loading. Shows an empty-state illustration when data is an empty array. Uses shadcn chart palette tokens.
- `src/components/DateRangeFilter.tsx` — Pill buttons for last 7d / 30d / 90d plus a calendar popover for custom range. On change, calls an onRangeChange callback that triggers query refetch.
- `src/components/SavedFilterChips.tsx` — reads dashboard_filters for current user, renders named chips, click to restore the saved range.

## Styling

Light mode default. Primary color: slate-900. Positive deltas: emerald-500. Negative deltas: rose-500. Four stat cards on desktop (2-up tablet, 1-up mobile). Chart lines use shadcn chart palette tokens. Table rows zebra-striped on hover.

Generate the migration first, confirm it looks correct, then generate the layout + StaffGuard, then the pages in order.