feat(admin): add document table enhancements with sparklines

Documents Page:
- Add 'Visitors (7d)' column showing unique users per document
- Add 'Trend' column with 7-day view sparkline chart
- Update CSV export to include visitor counts

Backend:
- Enhance listDocuments to include views7d and uniqueUsers7d
- Add GET /api/admin/stats/views/batch-trends endpoint
- Batch fetch from document_view_stats and document_views_daily

Components:
- Create Sparkline component (minimal 60x20px SVG chart)
- Memoized path calculation, handles edge cases

Types:
- Add PushSubscriptionAnalytics, PlatformTrendPoint interfaces
- Add UserNotificationSubscriptions for user badges
- Extend Document with uniqueUsers7d and viewsTrend

Author: HMarzban

packages/admin-dashboard/src/components/charts/Sparkline.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+
+interface SparklineProps {
+  data: number[]
+  width?: number
+  height?: number
+  className?: string
+  strokeColor?: string
+  fillColor?: string
+}
+
+/**
+ * Minimal sparkline chart for inline display
+ * Shows trend without axes or labels
+ */
+export function Sparkline({
+  data,
+  width = 60,
+  height = 20,
+  className = '',
+  strokeColor = 'currentColor',
+  fillColor
+}: SparklineProps) {
+  // Calculate points once, derive both paths
+  const { linePath, areaPath } = useMemo(() => {
+    if (!data.length) return { linePath: '', areaPath: '' }
+
+    const max = Math.max(...data, 1)
+    const min = Math.min(...data, 0)
+    const range = max - min || 1
+
+    const points = data.map((value, i) => {
+      const x = (i / Math.max(data.length - 1, 1)) * width
+      const y = height - ((value - min) / range) * height
+      return `${x},${y}`
+    })
+
+    const pointsStr = points.join(' L ')
+    return {
+      linePath: `M ${pointsStr}`,
+      areaPath: fillColor ? `M 0,${height} L ${pointsStr} L ${width},${height} Z` : ''
+    }
+  }, [data, width, height, fillColor])
+
+  if (!data.length) {
+    return (
+      <div
+        className={`text-base-content/30 flex items-center justify-center text-xs ${className}`}
+        style={{ width, height }}>
+        —
+      </div>
+    )
+  }
+
+  return (
+    <svg width={width} height={height} className={className}>
+      {areaPath && <path d={areaPath} fill={fillColor} fillOpacity={0.2} />}
+      <path d={linePath} fill="none" stroke={strokeColor} strokeWidth={1.5} strokeLinecap="round" />
+    </svg>
+  )
+}

packages/admin-dashboard/src/components/charts/index.ts

@@ -1,5 +1,7 @@
 export { DauTrendChart } from './DauTrendChart'
+export { PushSubscriptionStats } from './PushSubscriptionStats'
 export { RetentionCards } from './RetentionCards'
+export { Sparkline } from './Sparkline'
 export { TopViewedDocuments } from './TopViewedDocuments'
 export { UserLifecycleChart } from './UserLifecycleChart'
 export { DeviceBreakdown, UserTypeBreakdown, ViewsSummaryCards } from './ViewsSummaryCards'

packages/admin-dashboard/src/pages/documents.tsx

@@ -1,16 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import type { GetServerSideProps } from 'next'
 import Head from 'next/head'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 // Disable static generation - pages require auth which needs client-side router
 export const getServerSideProps: GetServerSideProps = async () => {
   return { props: {} }
 }
 import toast from 'react-hot-toast'
-import { LuChartBar, LuEye, LuFileText, LuLock, LuUsers } from 'react-icons/lu'
+import { LuChartBar, LuEye, LuFileText, LuLock, LuUser, LuUsers } from 'react-icons/lu'
 
 import { StatCard } from '@/components/cards/StatCard'
+import { Sparkline } from '@/components/charts'
 import { ActionsDropdown, DeleteModal } from '@/components/documents'
 import { AdminLayout } from '@/components/layout/AdminLayout'
 import { Header } from '@/components/layout/Header'
@@ -20,6 +21,7 @@ import { SearchInput } from '@/components/ui/SearchInput'
 import { useTableParams } from '@/hooks/useTableParams'
 import {
   deleteDocument,
+  fetchBatchDocumentTrends,
   fetchDocuments,
   fetchDocumentStats,
   updateDocumentFlags
@@ -54,6 +56,16 @@ export default function DocumentsPage() {
     queryFn: fetchDocumentStats
   })
 
+  // Get document slugs for batch trend fetch
+  const docSlugs = useMemo(() => data?.data?.map((d) => d.docId) || [], [data?.data])
+
+  // Fetch sparkline trends for current page
+  const { data: trends } = useQuery({
+    queryKey: ['admin', 'documents', 'trends', docSlugs],
+    queryFn: () => fetchBatchDocumentTrends(docSlugs, 7),
+    enabled: docSlugs.length > 0
+  })
+
   // Mutation for updating document flags
   const updateMutation = useMutation({
     mutationFn: ({
@@ -131,6 +143,7 @@ export default function DocumentsPage() {
       { key: 'owner', header: 'Owner' },
       { key: 'memberCount', header: 'Members' },
       { key: 'views7d', header: 'Views (7d)' },
+      { key: 'uniqueUsers7d', header: 'Visitors (7d)' },
       { key: 'isPrivate', header: 'Private' },
       { key: 'readOnly', header: 'Read Only' },
       { key: 'versionCount', header: 'Versions' },
@@ -221,6 +234,32 @@ export default function DocumentsPage() {
         </div>
       )
     },
+    {
+      key: 'uniqueUsers7d',
+      header: 'Visitors (7d)',
+      sortable: true,
+      render: (doc: Document) => (
+        <div className="flex items-center gap-1.5">
+          <LuUser className="text-base-content/40 h-4 w-4" />
+          <span className="text-sm font-medium">
+            {doc.uniqueUsers7d !== undefined ? doc.uniqueUsers7d.toLocaleString() : '—'}
+          </span>
+        </div>
+      )
+    },
+    {
+      key: 'trend',
+      header: 'Trend',
+      render: (doc: Document) => (
+        <Sparkline
+          data={trends?.[doc.docId] || []}
+          width={60}
+          height={20}
+          strokeColor="oklch(var(--p))"
+          fillColor="oklch(var(--p))"
+        />
+      )
+    },
     {
       key: 'versionCount',
       header: 'Versions',

packages/admin-dashboard/src/services/api.ts

@@ -217,6 +217,21 @@ export async function fetchDocumentViewStats(slug: string): Promise<DocumentView
   return fetchApi(`/api/admin/documents/${slug}/views`)
 }
 
+/**
+ * Fetch batch document trends for sparklines
+ */
+export async function fetchBatchDocumentTrends(
+  slugs: string[],
+  days = 7
+): Promise<Record<string, number[]>> {
+  if (slugs.length === 0) return {}
+  const params = new URLSearchParams({
+    slugs: slugs.join(','),
+    days: String(days)
+  })
+  return fetchApi(`/api/admin/stats/views/batch-trends?${params.toString()}`)
+}
+
 // =============================================================================
 // User Retention Analytics API (Phase 8)
 // =============================================================================