feat: add Team Analytics page with charts and leaderboards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/layout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { CategoryList } from '@/components/sidebar/CategoryList'
@@ -123,6 +123,7 @@ export function Sidebar() {
             <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
             <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
             <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
+            <NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
           </div>
         </>
       ) : (
@@ -150,6 +151,7 @@ export function Sidebar() {
             <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
             <NavItem href="/shares" icon={FileText} label="Exports" />
             <NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
+            <NavItem href="/analytics" icon={BarChart3} label="Analytics" />
           </div>
 
           <div className="border-b border-[hsl(var(--border-subtle))]" />

frontend/src/pages/MyAnalyticsPage.tsx

@@ -0,0 +1,3 @@
+export default function MyAnalyticsPage() {
+  return <div className="p-6 text-foreground">My Analytics — coming soon</div>
+}

frontend/src/pages/TeamAnalyticsPage.tsx

@@ -0,0 +1,366 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { BarChart3, Loader2, Users, Target, Clock, TrendingUp, ShieldX } from 'lucide-react'
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import { analyticsApi } from '@/api'
+import { usePermissions } from '@/hooks/usePermissions'
+import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'
+
+const CHART_COLORS = {
+  resolved: '#34d399',
+  escalated: '#f87171',
+  workaround: '#fbbf24',
+  unresolved: '#94a3b8',
+}
+
+const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
+  { value: '7d', label: 'Last 7 days' },
+  { value: '30d', label: 'Last 30 days' },
+  { value: '90d', label: 'Last 90 days' },
+]
+
+export default function TeamAnalyticsPage() {
+  const { isAccountOwner, isSuperAdmin } = usePermissions()
+  const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
+  const [data, setData] = useState<TeamAnalyticsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!isAccountOwner && !isSuperAdmin) return
+
+    setLoading(true)
+    analyticsApi
+      .getTeamAnalytics(period)
+      .then(setData)
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [period, isAccountOwner, isSuperAdmin])
+
+  // Permission guard
+  if (!isAccountOwner && !isSuperAdmin) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4 p-6">
+        <ShieldX size={48} className="text-muted-foreground" />
+        <h2 className="text-xl font-semibold text-foreground">Access Denied</h2>
+        <p className="text-muted-foreground text-center max-w-md">
+          Team Analytics is only available to account owners and administrators.
+          You can view your personal stats instead.
+        </p>
+        <Link
+          to="/analytics/me"
+          className="mt-2 inline-flex items-center gap-2 rounded-lg bg-white text-black px-4 py-2 text-sm font-medium hover:bg-white/90 transition-colors"
+        >
+          <TrendingUp size={16} />
+          View My Stats
+        </Link>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <Loader2 size={32} className="animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <p className="text-muted-foreground">Failed to load analytics data.</p>
+      </div>
+    )
+  }
+
+  const { summary, time_series, top_flows, top_engineers } = data
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span title="Team Analytics">
+            <BarChart3 size={24} className="text-foreground" />
+          </span>
+          <h1 className="text-2xl font-bold text-foreground">Team Analytics</h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <Link
+            to="/analytics/me"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            My Stats
+          </Link>
+          <select
+            value={period}
+            onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            {PERIOD_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Stat Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={TrendingUp}
+          label="Total Sessions"
+          value={summary.total_sessions.toLocaleString()}
+        />
+        <StatCard
+          icon={Target}
+          label="Completion Rate"
+          value={`${(summary.completion_rate * 100).toFixed(1)}%`}
+        />
+        <StatCard
+          icon={Clock}
+          label="Median Duration"
+          value={`${summary.median_duration_minutes} min`}
+        />
+        <StatCard
+          icon={Users}
+          label="Active Engineers"
+          value={summary.active_engineers.toLocaleString()}
+        />
+      </div>
+
+      {/* Area Chart — Sessions over Time */}
+      <div className="bg-card border border-border rounded-xl p-6">
+        <h2 className="text-sm font-semibold text-foreground mb-4">
+          Sessions Over Time
+        </h2>
+        <ResponsiveContainer width="100%" height={300}>
+          <AreaChart data={time_series}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="hsl(var(--border))"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="date"
+              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tickLine={false}
+              axisLine={{ stroke: 'hsl(var(--border))' }}
+              tickFormatter={(value: string) => {
+                const d = new Date(value)
+                return `${d.getMonth() + 1}/${d.getDate()}`
+              }}
+            />
+            <YAxis
+              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tickLine={false}
+              axisLine={false}
+              allowDecimals={false}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+                color: 'hsl(var(--foreground))',
+                fontSize: '13px',
+              }}
+              labelFormatter={(value) => {
+                const d = new Date(String(value))
+                return d.toLocaleDateString(undefined, {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="resolved"
+              stackId="1"
+              stroke={CHART_COLORS.resolved}
+              fill={CHART_COLORS.resolved}
+              fillOpacity={0.3}
+            />
+            <Area
+              type="monotone"
+              dataKey="escalated"
+              stackId="1"
+              stroke={CHART_COLORS.escalated}
+              fill={CHART_COLORS.escalated}
+              fillOpacity={0.3}
+            />
+            <Area
+              type="monotone"
+              dataKey="workaround"
+              stackId="1"
+              stroke={CHART_COLORS.workaround}
+              fill={CHART_COLORS.workaround}
+              fillOpacity={0.3}
+            />
+            <Area
+              type="monotone"
+              dataKey="unresolved"
+              stackId="1"
+              stroke={CHART_COLORS.unresolved}
+              fill={CHART_COLORS.unresolved}
+              fillOpacity={0.3}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+
+        {/* Chart legend */}
+        <div className="flex items-center gap-6 mt-3 justify-center">
+          {Object.entries(CHART_COLORS).map(([key, color]) => (
+            <div key={key} className="flex items-center gap-1.5">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: color }}
+              />
+              <span className="text-xs text-muted-foreground capitalize">
+                {key}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Two-Column: Top Flows & Top Engineers */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Top Flows */}
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
+            Top Flows
+          </h2>
+          {top_flows.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No flow data for this period.</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-2 text-foreground font-medium">
+                      Name
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Sessions
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Completion
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Median
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {top_flows.map((flow) => (
+                    <tr
+                      key={flow.tree_id}
+                      className="border-b border-border last:border-0"
+                    >
+                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
+                        {flow.name}
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {flow.sessions}
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {(flow.completion_rate * 100).toFixed(1)}%
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {flow.median_duration_minutes} min
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+
+        {/* Top Engineers */}
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
+            Top Engineers
+          </h2>
+          {top_engineers.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No engineer data for this period.</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-2 text-foreground font-medium">
+                      Name
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Sessions
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Completion
+                    </th>
+                    <th className="text-right py-2 text-foreground font-medium">
+                      Median
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {top_engineers.map((eng) => (
+                    <tr
+                      key={eng.user_id}
+                      className="border-b border-border last:border-0"
+                    >
+                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
+                        {eng.name}
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {eng.sessions}
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {(eng.completion_rate * 100).toFixed(1)}%
+                      </td>
+                      <td className="py-2 text-right text-muted-foreground">
+                        {eng.median_duration_minutes} min
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  label: string
+  value: string
+}) {
+  return (
+    <div className="bg-card border border-border rounded-xl p-6">
+      <div className="flex items-center gap-2 mb-2">
+        <Icon size={16} className="text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">{label}</span>
+      </div>
+      <p className="text-3xl font-bold text-foreground">{value}</p>
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -27,6 +27,8 @@ const ProceduralNavigationPage = lazy(() => import('@/pages/ProceduralNavigation
 const SessionHistoryPage = lazy(() => import('@/pages/SessionHistoryPage'))
 const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
 const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
+const TeamAnalyticsPage = lazy(() => import('@/pages/TeamAnalyticsPage'))
+const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
 const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
 // Admin pages
 const AdminLayout = lazy(() => import('@/components/admin/AdminLayout'))
@@ -198,6 +200,22 @@ export const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'analytics',
+        element: (
+          <Suspense fallback={<PageLoader />}>
+            <TeamAnalyticsPage />
+          </Suspense>
+        ),
+      },
+      {
+        path: 'analytics/me',
+        element: (
+          <Suspense fallback={<PageLoader />}>
+            <MyAnalyticsPage />
+          </Suspense>
+        ),
+      },
       // Admin routes
       {
         path: 'admin',