update

frontend/package.json

@@ -16,7 +16,8 @@
     "lucide-react": "^0.344.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^2.2.0",
+    "recharts": "^2.15.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
 import Contacts from "./pages/Contacts";
 import Leads from "./pages/Leads";
 import Deals from "./pages/Deals";
+import SalesDashboard from "./pages/SalesDashboard";
 import Settings from "./pages/Settings";
 import "./index.css";
 
@@ -15,6 +16,7 @@ export default function App() {
         <Route path="/contacts" element={<Contacts />} />
         <Route path="/leads" element={<Leads />} />
         <Route path="/deals" element={<Deals />} />
+        <Route path="/dashboard" element={<SalesDashboard />} />
         <Route path="/settings" element={<Settings />} />
         <Route path="/history" element={<Navigate to="/leads" replace />} />
       </Routes>

frontend/src/components/layout/AppShell.jsx

@@ -6,6 +6,7 @@ import {
     Users,
     Inbox,
     Handshake,
+    PieChart,
     ChevronLeft,
     ChevronRight,
 } from 'lucide-react';
@@ -18,6 +19,7 @@ const NAV_ITEMS = [
     { label: 'Contacts', href: '/contacts', icon: Users },
     { label: 'Leads', href: '/leads', icon: Inbox },
     { label: 'Deals', href: '/deals', icon: Handshake },
+    { label: 'Dashboard', href: '/dashboard', icon: PieChart },
 ];
 
 const SIDEBAR_COLLAPSED_KEY = 'sequenceai-sidebar-collapsed';

frontend/src/lib/ownerAvatar.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+/** Stable accent per user id for owner avatars (table, pipeline, charts). */
+const OWNER_AVATAR_PALETTES = [
+    { ring: 'border-rose-200', bg: 'bg-rose-100', text: 'text-rose-800' },
+    { ring: 'border-amber-200', bg: 'bg-amber-100', text: 'text-amber-900' },
+    { ring: 'border-emerald-200', bg: 'bg-emerald-100', text: 'text-emerald-900' },
+    { ring: 'border-sky-200', bg: 'bg-sky-100', text: 'text-sky-900' },
+    { ring: 'border-violet-200', bg: 'bg-violet-100', text: 'text-violet-800' },
+    { ring: 'border-fuchsia-200', bg: 'bg-fuchsia-100', text: 'text-fuchsia-900' },
+    { ring: 'border-cyan-200', bg: 'bg-cyan-100', text: 'text-cyan-900' },
+    { ring: 'border-orange-200', bg: 'bg-orange-100', text: 'text-orange-900' },
+    { ring: 'border-lime-200', bg: 'bg-lime-100', text: 'text-lime-900' },
+    { ring: 'border-indigo-200', bg: 'bg-indigo-100', text: 'text-indigo-900' },
+    { ring: 'border-teal-200', bg: 'bg-teal-100', text: 'text-teal-900' },
+];
+
+const UNASSIGNED_AVATAR_PALETTE = {
+    ring: 'border-slate-200',
+    bg: 'bg-slate-100',
+    text: 'text-slate-500',
+};
+
+function hashStringToUint(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+    return Math.abs(h);
+}
+
+export function ownerAvatarPalette(userId) {
+    if (userId == null || userId === '') return UNASSIGNED_AVATAR_PALETTE;
+    const idx = hashStringToUint(String(userId)) % OWNER_AVATAR_PALETTES.length;
+    return OWNER_AVATAR_PALETTES[idx];
+}
+
+export function ownerDisplayLabel(deal) {
+    if (deal.owner_user_id == null || deal.owner_user_id === '') return 'Unassigned';
+    return (
+        deal.owner_display_name ||
+        deal.owner_initials ||
+        `User ${deal.owner_user_id}`
+    );
+}
+
+export function OwnerAvatarCircle({ userId, initials, className }) {
+    const pal = ownerAvatarPalette(userId);
+    const unassigned = userId == null || userId === '';
+    const label = unassigned ? '?' : (initials || '?').toString().slice(0, 2).toUpperCase();
+    return (
+        <span
+            className={cn(
+                'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold leading-none',
+                pal.ring,
+                pal.bg,
+                pal.text,
+                className
+            )}
+            aria-hidden
+        >
+            {label}
+        </span>
+    );
+}

frontend/src/pages/Deals.jsx

@@ -14,6 +14,7 @@ import { DealContactSearch, DealCompanySearch } from '@/components/workspace/Dea
 import { EditableCell, EditableDateCell } from '@/components/workspace/EditableCell';
 import { SearchableCountryPicker } from '@/components/workspace/SearchableCountryPicker';
 import { cn } from '@/lib/utils';
+import { OwnerAvatarCircle, ownerDisplayLabel } from '@/lib/ownerAvatar';
 import { flagEmojiFromCode, getAllCountries, matchCountry } from '@/lib/countries';
 
 const STAGES = [
@@ -29,68 +30,6 @@ const EMPTY_COUNTRY_KEY = '__country_none__';
 const EMPTY_OWNER_KEY = '__owner_none__';
 const MEMBER_TAKE_OWNERSHIP_VALUE = '__member_take_ownership__';
 
-/** Stable accent per user id for owner avatars (table, pipeline, grouped headers). */
-const OWNER_AVATAR_PALETTES = [
-    { ring: 'border-rose-200', bg: 'bg-rose-100', text: 'text-rose-800' },
-    { ring: 'border-amber-200', bg: 'bg-amber-100', text: 'text-amber-900' },
-    { ring: 'border-emerald-200', bg: 'bg-emerald-100', text: 'text-emerald-900' },
-    { ring: 'border-sky-200', bg: 'bg-sky-100', text: 'text-sky-900' },
-    { ring: 'border-violet-200', bg: 'bg-violet-100', text: 'text-violet-800' },
-    { ring: 'border-fuchsia-200', bg: 'bg-fuchsia-100', text: 'text-fuchsia-900' },
-    { ring: 'border-cyan-200', bg: 'bg-cyan-100', text: 'text-cyan-900' },
-    { ring: 'border-orange-200', bg: 'bg-orange-100', text: 'text-orange-900' },
-    { ring: 'border-lime-200', bg: 'bg-lime-100', text: 'text-lime-900' },
-    { ring: 'border-indigo-200', bg: 'bg-indigo-100', text: 'text-indigo-900' },
-    { ring: 'border-teal-200', bg: 'bg-teal-100', text: 'text-teal-900' },
-];
-
-const UNASSIGNED_AVATAR_PALETTE = {
-    ring: 'border-slate-200',
-    bg: 'bg-slate-100',
-    text: 'text-slate-500',
-};
-
-function hashStringToUint(s) {
-    let h = 0;
-    for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
-    return Math.abs(h);
-}
-
-function ownerAvatarPalette(userId) {
-    if (userId == null || userId === '') return UNASSIGNED_AVATAR_PALETTE;
-    const idx = hashStringToUint(String(userId)) % OWNER_AVATAR_PALETTES.length;
-    return OWNER_AVATAR_PALETTES[idx];
-}
-
-function ownerDisplayLabel(deal) {
-    if (deal.owner_user_id == null || deal.owner_user_id === '') return 'Unassigned';
-    return (
-        deal.owner_display_name ||
-        deal.owner_initials ||
-        `User ${deal.owner_user_id}`
-    );
-}
-
-function OwnerAvatarCircle({ userId, initials, className }) {
-    const pal = ownerAvatarPalette(userId);
-    const unassigned = userId == null || userId === '';
-    const label = unassigned ? '?' : (initials || '?').toString().slice(0, 2).toUpperCase();
-    return (
-        <span
-            className={cn(
-                'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold leading-none',
-                pal.ring,
-                pal.bg,
-                pal.text,
-                className
-            )}
-            aria-hidden
-        >
-            {label}
-        </span>
-    );
-}
-
 /** Accent bars for By Country / By Owner groups (rotate). */
 const GROUP_BAR_ROTATING = [
     'border-l-[6px] border-l-indigo-500 bg-indigo-50/75',

frontend/src/pages/SalesDashboard.jsx

@@ -0,0 +1,676 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Cell,
+    Legend,
+    Pie,
+    PieChart,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from 'recharts';
+import { Info, Loader2 } from 'lucide-react';
+import AppShell from '@/components/layout/AppShell';
+import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
+import { apiFetch } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { OwnerAvatarCircle } from '@/lib/ownerAvatar';
+
+const STAGE_ORDER = ['new', 'discovery', 'proposal', 'negotiation', 'won', 'lost'];
+const FUNNEL_STAGES = ['new', 'discovery', 'proposal', 'negotiation', 'won'];
+
+const STAGE_META = {
+    new: { label: 'New', fill: '#7c3aed' },
+    discovery: { label: 'Discovery', fill: '#06b6d4' },
+    proposal: { label: 'Proposal', fill: '#0ea5e9' },
+    negotiation: { label: 'Negotiation', fill: '#0d9488' },
+    won: { label: 'Won', fill: '#059669' },
+    lost: { label: 'Lost', fill: '#ef4444' },
+};
+
+function normalizeStage(s) {
+    const v = (s || 'new').toLowerCase();
+    return STAGE_ORDER.includes(v) ? v : 'new';
+}
+
+function isOpenStage(stage) {
+    const s = normalizeStage(stage);
+    return s !== 'won' && s !== 'lost';
+}
+
+function fmtMoney(n) {
+    if (n == null || n === '' || Number.isNaN(n)) return '—';
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+    }).format(n);
+}
+
+function fmtMoneyCompact(n) {
+    if (n == null || n === '' || Number.isNaN(n)) return '—';
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        notation: 'compact',
+        maximumFractionDigits: 1,
+    }).format(n);
+}
+
+function monthKeyFromDealDate(iso) {
+    if (!iso || typeof iso !== 'string') return null;
+    const m = iso.slice(0, 7);
+    return /^\d{4}-\d{2}$/.test(m) ? m : null;
+}
+
+function forecastOnDeal(d) {
+    const v = d.forecast_value;
+    if (v == null || v === '') return 0;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : 0;
+}
+
+function dealValueNum(d) {
+    const v = d.deal_value;
+    if (v == null || v === '') return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+}
+
+function CardShell({ title, hint, children, className }) {
+    return (
+        <section
+            className={cn(
+                'flex flex-col rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden',
+                className
+            )}
+        >
+            <div className="border-b border-slate-100 px-4 py-3">
+                <div className="flex items-start justify-between gap-2">
+                    <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
+                    {hint ? (
+                        <span className="group relative shrink-0 text-slate-400 hover:text-slate-600">
+                            <Info className="h-4 w-4" aria-hidden />
+                            <span className="pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-64 rounded-lg border border-slate-200 bg-white p-2 text-xs font-normal leading-snug text-slate-600 shadow-md group-hover:block">
+                                {hint}
+                            </span>
+                        </span>
+                    ) : null}
+                </div>
+            </div>
+            <div className="min-h-[220px] flex-1 p-3">{children}</div>
+        </section>
+    );
+}
+
+function KpiCard({ title, hint, value, sub }) {
+    return (
+        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
+            <div className="flex items-start justify-between gap-2">
+                <h3 className="text-sm font-medium text-slate-600">{title}</h3>
+                {hint ? (
+                    <span className="group relative shrink-0 text-slate-400 hover:text-slate-600">
+                        <Info className="h-4 w-4" aria-hidden />
+                        <span className="pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-64 rounded-lg border border-slate-200 bg-white p-2 text-xs font-normal leading-snug text-slate-600 shadow-md group-hover:block">
+                            {hint}
+                        </span>
+                    </span>
+                ) : null}
+            </div>
+            <p className="mt-3 text-2xl font-bold tabular-nums tracking-tight text-slate-900 sm:text-3xl">
+                {value}
+            </p>
+            {sub ? <p className="mt-1 text-xs text-slate-500">{sub}</p> : null}
+        </div>
+    );
+}
+
+const TOOLTIP_STYLE = {
+    borderRadius: '8px',
+    border: '1px solid #e2e8f0',
+    fontSize: '12px',
+};
+
+export default function SalesDashboard() {
+    const [deals, setDeals] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [me, setMe] = useState(null);
+    const [tenantMembers, setTenantMembers] = useState([]);
+    const [ownerFilter, setOwnerFilter] = useState('all');
+
+    const isAdmin = me?.current_role === 'admin';
+
+    useEffect(() => {
+        apiFetch('/api/auth/me')
+            .then((r) => (r.ok ? r.json() : null))
+            .then(setMe)
+            .catch(() => setMe(null));
+    }, []);
+
+    useEffect(() => {
+        if (!me || !isAdmin) {
+            setTenantMembers([]);
+            return;
+        }
+        apiFetch('/api/tenants/members')
+            .then((r) => (r.ok ? r.json() : null))
+            .then((d) => setTenantMembers(d?.members || []))
+            .catch(() => setTenantMembers([]));
+    }, [me, isAdmin]);
+
+    const fetchDeals = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            params.set('limit', '500');
+            params.set('offset', '0');
+            params.set('sort_by', 'created_at');
+            params.set('sort_dir', 'desc');
+            const res = await apiFetch(`/api/deals?${params.toString()}`);
+            if (res.ok) {
+                const data = await res.json();
+                setDeals(data.deals || []);
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchDeals();
+    }, [fetchDeals]);
+
+    useEffect(() => {
+        if (!isAdmin) setOwnerFilter('all');
+    }, [isAdmin]);
+
+    const visibleDeals = useMemo(() => {
+        if (!isAdmin || ownerFilter === 'all') return deals;
+        const id = Number(ownerFilter);
+        if (!Number.isFinite(id)) return deals;
+        return deals.filter((d) => d.owner_user_id != null && Number(d.owner_user_id) === id);
+    }, [deals, isAdmin, ownerFilter]);
+
+    const metrics = useMemo(() => {
+        const open = visibleDeals.filter((d) => isOpenStage(d.stage));
+        const won = visibleDeals.filter((d) => normalizeStage(d.stage) === 'won');
+
+        const forecastBoardTotal = visibleDeals.reduce((a, d) => a + forecastOnDeal(d), 0);
+        const actualRevenueTotal = won.reduce((a, d) => {
+            const v = dealValueNum(d);
+            return v != null ? a + v : a;
+        }, 0);
+        const wonValues = won.map(dealValueNum).filter((v) => v != null);
+        const avgWon =
+            wonValues.length > 0 ? wonValues.reduce((a, b) => a + b, 0) / wonValues.length : null;
+
+        const stageCounts = {};
+        STAGE_ORDER.forEach((s) => {
+            stageCounts[s] = 0;
+        });
+        for (const d of visibleDeals) {
+            const s = normalizeStage(d.stage);
+            stageCounts[s] = (stageCounts[s] || 0) + 1;
+        }
+        const pieData = STAGE_ORDER.filter((s) => stageCounts[s] > 0).map((s) => ({
+            name: STAGE_META[s].label,
+            value: stageCounts[s],
+            fill: STAGE_META[s].fill,
+        }));
+
+        const forecastByStage = STAGE_ORDER.filter((s) => s !== 'won' && s !== 'lost').map((s) => ({
+            stage: STAGE_META[s].label,
+            forecast: open
+                .filter((d) => normalizeStage(d.stage) === s)
+                .reduce((a, d) => a + forecastOnDeal(d), 0),
+        }));
+
+        const forecastMonthMap = new Map();
+        let undatedForecast = 0;
+        for (const d of open) {
+            const mk = monthKeyFromDealDate(d.expected_close_date);
+            const fv = forecastOnDeal(d);
+            if (!mk) {
+                undatedForecast += fv;
+                continue;
+            }
+            forecastMonthMap.set(mk, (forecastMonthMap.get(mk) || 0) + fv);
+        }
+        const forecastByMonth = [...forecastMonthMap.entries()]
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([month, forecast]) => ({ month, forecast }));
+        if (undatedForecast > 0) {
+            forecastByMonth.push({ month: 'Undated', forecast: undatedForecast });
+        }
+
+        const actualMonthMap = new Map();
+        for (const d of won) {
+            const mk =
+                monthKeyFromDealDate(d.expected_close_date) ||
+                monthKeyFromDealDate(d.created_at);
+            if (!mk) continue;
+            const v = dealValueNum(d);
+            if (v == null) continue;
+            actualMonthMap.set(mk, (actualMonthMap.get(mk) || 0) + v);
+        }
+        const actualByMonth = [...actualMonthMap.entries()]
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([month, actual]) => ({ month, actual }));
+
+        const cohortMap = new Map();
+        for (const d of visibleDeals) {
+            const mk = monthKeyFromDealDate(d.created_at);
+            if (!mk) continue;
+            if (!cohortMap.has(mk)) {
+                const row = { month: mk };
+                STAGE_ORDER.forEach((s) => {
+                    row[s] = 0;
+                });
+                cohortMap.set(mk, row);
+            }
+            const row = cohortMap.get(mk);
+            const s = normalizeStage(d.stage);
+            row[s] = (row[s] || 0) + 1;
+        }
+        const dealProgressByMonth = [...cohortMap.values()].sort((a, b) =>
+            a.month.localeCompare(b.month)
+        );
+
+        const repMap = new Map();
+        for (const d of visibleDeals) {
+            const key = d.owner_user_id == null || d.owner_user_id === '' ? 'none' : String(d.owner_user_id);
+            if (!repMap.has(key)) {
+                repMap.set(key, {
+                    repKey: key,
+                    ownerUserId: d.owner_user_id == null || d.owner_user_id === '' ? null : d.owner_user_id,
+                    owner_initials: d.owner_initials,
+                    owner_display_name: d.owner_display_name,
+                    sortLabel: (
+                        d.owner_display_name ||
+                        d.owner_initials ||
+                        (key === 'none' ? 'Unassigned' : `User ${d.owner_user_id}`)
+                    ).trim(),
+                });
+                STAGE_ORDER.forEach((s) => {
+                    repMap.get(key)[s] = 0;
+                });
+            }
+            const row = repMap.get(key);
+            const s = normalizeStage(d.stage);
+            row[s] = (row[s] || 0) + 1;
+        }
+        const dealsByRep = [...repMap.values()].sort((a, b) => {
+            if (a.repKey === 'none') return 1;
+            if (b.repKey === 'none') return -1;
+            return a.sortLabel.localeCompare(b.sortLabel, undefined, { sensitivity: 'base' });
+        });
+
+        const funnelCounts = FUNNEL_STAGES.map((s) => ({
+            stage: s,
+            label: STAGE_META[s].label,
+            count: visibleDeals.filter((d) => normalizeStage(d.stage) === s).length,
+        }));
+        const maxFunnel = Math.max(1, ...funnelCounts.map((f) => f.count));
+
+        return {
+            forecastBoardTotal,
+            actualRevenueTotal,
+            avgWon,
+            pieData,
+            forecastByStage,
+            forecastByMonth,
+            actualByMonth,
+            dealProgressByMonth,
+            dealsByRep,
+            funnelCounts,
+            maxFunnel,
+        };
+    }, [visibleDeals]);
+
+    const repRowByKey = useMemo(
+        () => new Map(metrics.dealsByRep.map((r) => [r.repKey, r])),
+        [metrics.dealsByRep]
+    );
+
+    const ownerFilterLabel = useMemo(() => {
+        if (ownerFilter === 'all') return 'All team';
+        const m = tenantMembers.find((x) => String(x.user_id) === ownerFilter);
+        return (m?.name || m?.email || `User ${ownerFilter}`).trim();
+    }, [ownerFilter, tenantMembers]);
+
+    const conversionToWon =
+        visibleDeals.length > 0
+            ? (
+                  (visibleDeals.filter((d) => normalizeStage(d.stage) === 'won').length /
+                      visibleDeals.length) *
+                  100
+              ).toFixed(1)
+            : '0.0';
+
+    const subtitle = isAdmin
+        ? ownerFilter === 'all'
+            ? 'Workspace totals. Use the people filter to focus on one rep.'
+            : 'Filtered to the selected team member.'
+        : 'Your deals and unassigned deals in this workspace.';
+
+    return (
+        <AppShell
+            title="Sales Dashboard"
+            subtitle={subtitle}
+            rightContent={
+                isAdmin ? (
+                    <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                        <span className="hidden text-xs text-slate-500 sm:inline">View</span>
+                        <Select value={ownerFilter} onValueChange={setOwnerFilter}>
+                            <SelectTrigger className="h-9 w-[min(100%,14rem)] border-slate-200 bg-white text-sm shadow-sm">
+                                <span className="truncate">{ownerFilterLabel}</span>
+                            </SelectTrigger>
+                            <SelectContent className="min-w-[12rem]">
+                                <SelectItem value="all">All team</SelectItem>
+                                {tenantMembers.map((m) => (
+                                    <SelectItem key={m.user_id} value={String(m.user_id)}>
+                                        {(m.name || m.email || `User ${m.user_id}`).trim()}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                ) : null
+            }
+        >
+            {loading ? (
+                <div className="flex items-center justify-center gap-2 py-24 text-slate-600">
+                    <Loader2 className="h-6 w-6 animate-spin" aria-hidden />
+                    Loading dashboard…
+                </div>
+            ) : (
+                <div className="space-y-6">
+                    <div className="flex flex-wrap items-center justify-between gap-3">
+                        <p className="text-sm text-slate-600 max-w-3xl">
+                            Charts use the same deal fields as the pipeline board. Actual revenue uses deal
+                            value on <strong className="font-medium text-slate-800">won</strong> deals (there is
+                            no separate &quot;actual value&quot; column yet). Revenue-by-month uses{' '}
+                            <strong className="font-medium text-slate-800">expected close</strong> when set,
+                            otherwise <strong className="font-medium text-slate-800">created date</strong>.
+                        </p>
+                        <Link
+                            to="/deals"
+                            className="text-sm font-medium text-violet-700 hover:text-violet-900 underline-offset-2 hover:underline"
+                        >
+                            Open Deals board
+                        </Link>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+                        <KpiCard
+                            title="Forecasted revenue"
+                            hint="Sum of the Forecast value column for every deal currently shown — same totals as on the Sales Pipeline board."
+                            value={fmtMoney(metrics.forecastBoardTotal)}
+                            sub="All deals in view"
+                        />
+                        <KpiCard
+                            title="Actual revenue"
+                            hint="Sum of deal value for deals marked won — your closed-won total on the board."
+                            value={fmtMoney(metrics.actualRevenueTotal)}
+                            sub="Won deals"
+                        />
+                        <KpiCard
+                            title="Avg. value of won deals"
+                            hint="Average deal value among won deals that have an amount set."
+                            value={metrics.avgWon != null ? fmtMoney(metrics.avgWon) : '—'}
+                            sub={metrics.avgWon != null ? 'Won deals with value' : 'No amounts yet'}
+                        />
+                    </div>
+
+                    <CardShell
+                        title="Pipeline conversion"
+                        hint="Deal counts at each stage from New through Won. Percentages show step-to-step retention; overall conversion to won compares won deals to all deals shown."
+                    >
+                        <div className="space-y-3">
+                            <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
+                                <span>
+                                    Conversion to won (all deals in view):{' '}
+                                    <strong className="text-slate-900">{conversionToWon}%</strong>
+                                </span>
+                            </div>
+                            <div className="flex flex-col gap-2">
+                                {metrics.funnelCounts.map((step, i) => {
+                                    const pct = Math.round((step.count / metrics.maxFunnel) * 100);
+                                    const next = metrics.funnelCounts[i + 1];
+                                    const stepRate =
+                                        next && step.count > 0
+                                            ? ((next.count / step.count) * 100).toFixed(1)
+                                            : null;
+                                    return (
+                                        <div key={step.stage} className="flex flex-col gap-1">
+                                            <div className="flex items-center justify-between text-xs text-slate-600">
+                                                <span className="font-medium text-slate-800">
+                                                    {step.label}
+                                                </span>
+                                                <span className="tabular-nums">{step.count}</span>
+                                            </div>
+                                            <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-100">
+                                                <div
+                                                    className="h-full rounded-full transition-all"
+                                                    style={{
+                                                        width: `${pct}%`,
+                                                        backgroundColor: STAGE_META[step.stage].fill,
+                                                    }}
+                                                />
+                                            </div>
+                                            {stepRate != null ? (
+                                                <div className="text-[11px] text-slate-500">
+                                                    → {next.label}: {stepRate}%
+                                                </div>
+                                            ) : null}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </CardShell>
+
+                    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                        <CardShell
+                            title="Sales pipeline"
+                            hint="How many deals sit in each stage right now — use it to see where work piles up."
+                        >
+                            {metrics.pieData.length === 0 ? (
+                                <p className="py-12 text-center text-sm text-slate-500">No deals to chart.</p>
+                            ) : (
+                                <ResponsiveContainer width="100%" height={280}>
+                                    <PieChart>
+                                        <Pie
+                                            data={metrics.pieData}
+                                            dataKey="value"
+                                            nameKey="name"
+                                            innerRadius={48}
+                                            outerRadius={100}
+                                            paddingAngle={1}
+                                            label={({ name, percent }) =>
+                                                `${name} ${(percent * 100).toFixed(0)}%`
+                                            }
+                                        >
+                                            {metrics.pieData.map((entry, i) => (
+                                                <Cell key={i} fill={entry.fill} />
+                                            ))}
+                                        </Pie>
+                                        <Tooltip contentStyle={TOOLTIP_STYLE} />
+                                    </PieChart>
+                                </ResponsiveContainer>
+                            )}
+                        </CardShell>
+
+                        <CardShell
+                            title="Actual revenue by month (won)"
+                            hint="Closed-won deal value grouped by month. Month is expected close when set, otherwise the deal created date."
+                        >
+                            {metrics.actualByMonth.length === 0 ? (
+                                <p className="py-12 text-center text-sm text-slate-500">
+                                    No won deals with dates yet.
+                                </p>
+                            ) : (
+                                <ResponsiveContainer width="100%" height={280}>
+                                    <BarChart data={metrics.actualByMonth} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                                        <XAxis dataKey="month" tick={{ fontSize: 11 }} stroke="#64748b" />
+                                        <YAxis
+                                            tick={{ fontSize: 11 }}
+                                            stroke="#64748b"
+                                            tickFormatter={(v) => fmtMoneyCompact(v)}
+                                        />
+                                        <Tooltip
+                                            formatter={(v) => fmtMoney(v)}
+                                            contentStyle={TOOLTIP_STYLE}
+                                        />
+                                        <Bar dataKey="actual" name="Actual" fill="#059669" radius={[4, 4, 0, 0]} />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            )}
+                        </CardShell>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                        <CardShell
+                            title="Forecasted revenue by month"
+                            hint="Open pipeline forecast totals by expected close month (plus Undated when no close date)."
+                        >
+                            {metrics.forecastByMonth.length === 0 ? (
+                                <p className="py-12 text-center text-sm text-slate-500">
+                                    No forecast in view.
+                                </p>
+                            ) : (
+                                <ResponsiveContainer width="100%" height={280}>
+                                    <BarChart data={metrics.forecastByMonth} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                                        <XAxis dataKey="month" tick={{ fontSize: 11 }} stroke="#64748b" />
+                                        <YAxis
+                                            tick={{ fontSize: 11 }}
+                                            stroke="#64748b"
+                                            tickFormatter={(v) => fmtMoneyCompact(v)}
+                                        />
+                                        <Tooltip
+                                            formatter={(v) => fmtMoney(v)}
+                                            contentStyle={TOOLTIP_STYLE}
+                                        />
+                                        <Bar dataKey="forecast" name="Forecast" fill="#6366f1" radius={[4, 4, 0, 0]} />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            )}
+                        </CardShell>
+
+                        <CardShell
+                            title="Forecasted revenue by stage"
+                            hint="Sum of forecast value on open deals, split by current stage."
+                        >
+                            <ResponsiveContainer width="100%" height={280}>
+                                <BarChart data={metrics.forecastByStage} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                                    <XAxis dataKey="stage" tick={{ fontSize: 11 }} stroke="#64748b" />
+                                    <YAxis
+                                        tick={{ fontSize: 11 }}
+                                        stroke="#64748b"
+                                        tickFormatter={(v) => fmtMoneyCompact(v)}
+                                    />
+                                    <Tooltip formatter={(v) => fmtMoney(v)} contentStyle={TOOLTIP_STYLE} />
+                                    <Bar dataKey="forecast" name="Forecast" fill="#7c3aed" radius={[4, 4, 0, 0]} />
+                                </BarChart>
+                            </ResponsiveContainer>
+                        </CardShell>
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                        <CardShell
+                            title="Deal progress by month added"
+                            hint="Each bar is deals created in that month, stacked by where they sit today — cohort view of the pipeline."
+                        >
+                            {metrics.dealProgressByMonth.length === 0 ? (
+                                <p className="py-12 text-center text-sm text-slate-500">No deals with dates.</p>
+                            ) : (
+                                <ResponsiveContainer width="100%" height={300}>
+                                    <BarChart data={metrics.dealProgressByMonth} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                                        <XAxis dataKey="month" tick={{ fontSize: 11 }} stroke="#64748b" />
+                                        <YAxis allowDecimals={false} tick={{ fontSize: 11 }} stroke="#64748b" />
+                                        <Tooltip contentStyle={TOOLTIP_STYLE} />
+                                        <Legend wrapperStyle={{ fontSize: 12 }} />
+                                        {STAGE_ORDER.map((s) => (
+                                            <Bar
+                                                key={s}
+                                                dataKey={s}
+                                                name={STAGE_META[s].label}
+                                                stackId="cohort"
+                                                fill={STAGE_META[s].fill}
+                                            />
+                                        ))}
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            )}
+                        </CardShell>
+
+                        <CardShell
+                            title="Deal stages by rep"
+                            hint="Stacked deal counts by owner. Assign owners on the Deals board to split work here. Avatars use the same colors as elsewhere in the app."
+                        >
+                            {metrics.dealsByRep.length === 0 ? (
+                                <p className="py-12 text-center text-sm text-slate-500">No deals.</p>
+                            ) : (
+                                <ResponsiveContainer width="100%" height={300}>
+                                    <BarChart data={metrics.dealsByRep} margin={{ top: 8, right: 8, left: 0, bottom: 12 }}>
+                                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                                        <XAxis
+                                            dataKey="repKey"
+                                            type="category"
+                                            interval={0}
+                                            height={56}
+                                            tick={({ x, y, payload }) => {
+                                                const row = repRowByKey.get(payload.value);
+                                                return (
+                                                    <g transform={`translate(${x},${y})`}>
+                                                        <foreignObject x={-18} y={4} width={36} height={36}>
+                                                            <div className="flex justify-center">
+                                                                <OwnerAvatarCircle
+                                                                    userId={row?.ownerUserId}
+                                                                    initials={row?.owner_initials}
+                                                                    className="h-8 w-8"
+                                                                />
+                                                            </div>
+                                                        </foreignObject>
+                                                    </g>
+                                                );
+                                            }}
+                                        />
+                                        <YAxis allowDecimals={false} tick={{ fontSize: 11 }} stroke="#64748b" />
+                                        <Tooltip
+                                            contentStyle={TOOLTIP_STYLE}
+                                            labelFormatter={(k) => {
+                                                const row = repRowByKey.get(k);
+                                                return row?.sortLabel || k;
+                                            }}
+                                        />
+                                        <Legend wrapperStyle={{ fontSize: 12 }} />
+                                        {STAGE_ORDER.map((s) => (
+                                            <Bar
+                                                key={s}
+                                                dataKey={s}
+                                                name={STAGE_META[s].label}
+                                                stackId="rep"
+                                                fill={STAGE_META[s].fill}
+                                            />
+                                        ))}
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            )}
+                        </CardShell>
+                    </div>
+                </div>
+            )}
+        </AppShell>
+    );
+}