1  import { useState } from 'react'
 2  import type { Chain } from '../types/vote'
 3  import type { TimeRange } from '../types/analytics'
 4  import AnalyticsDashboard from '../components/analytics/AnalyticsDashboard'
 5  
 6  const TIME_RANGES: { value: TimeRange; label: string }[] = [
 7    { value: '24h', label: '24 Hours' },
 8    { value: '7d', label: '7 Days' },
 9    { value: '30d', label: '30 Days' },
10    { value: '90d', label: '90 Days' },
11  ]
12  
13  export default function AnalyticsPage() {
14    const [selectedChain, setSelectedChain] = useState<Chain | 'all'>('all')
15    const [timeRange, setTimeRange] = useState<TimeRange>('30d')
16  
17    return (
18      <div>
19        {/* Header */}
20        <div className="flex items-center justify-between mb-6">
21          <div>
22            <h1 className="text-2xl font-bold">Analytics</h1>
23            <p className="text-gray-600 text-sm mt-1">
24              Monitor governance activity, votes, and system health
25            </p>
26          </div>
27  
28          <div className="flex items-center gap-4">
29            {/* Time Range Selector */}
30            <div className="flex bg-gray-100 rounded-lg p-1">
31              {TIME_RANGES.map(({ value, label }) => (
32                <button
33                  key={value}
34                  onClick={() => setTimeRange(value)}
35                  className={`px-3 py-1.5 rounded-md text-sm ${
36                    timeRange === value
37                      ? 'bg-white shadow text-gray-900 font-medium'
38                      : 'text-gray-600 hover:text-gray-900'
39                  }`}
40                >
41                  {label}
42                </button>
43              ))}
44            </div>
45  
46            {/* Chain Selector */}
47            <select
48              value={selectedChain}
49              onChange={(e) => setSelectedChain(e.target.value as Chain | 'all')}
50              className="px-3 py-2 border rounded-lg text-sm"
51            >
52              <option value="all">Both Chains</option>
53              <option value="alpha">Alpha Chain</option>
54              <option value="delta">Delta Chain</option>
55            </select>
56          </div>
57        </div>
58  
59        {/* Dashboard */}
60        {selectedChain === 'all' ? (
61          <div className="space-y-8">
62            <div>
63              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
64                <div className="w-3 h-3 rounded-full bg-purple-500" />
65                Alpha Chain
66              </h2>
67              <AnalyticsDashboard chain="alpha" timeRange={timeRange} />
68            </div>
69  
70            <div className="border-t pt-8">
71              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
72                <div className="w-3 h-3 rounded-full bg-green-500" />
73                Delta Chain
74              </h2>
75              <AnalyticsDashboard chain="delta" timeRange={timeRange} />
76            </div>
77          </div>
78        ) : (
79          <AnalyticsDashboard chain={selectedChain} timeRange={timeRange} />
80        )}
81  
82        {/* Export Options */}
83        <div className="mt-8 flex items-center justify-between border-t pt-6">
84          <p className="text-sm text-gray-500">
85            Data is aggregated from on-chain events and cached for performance.
86          </p>
87          <div className="flex items-center gap-2">
88            <button className="px-3 py-1.5 border rounded text-sm hover:bg-gray-50">
89              Export CSV
90            </button>
91            <button className="px-3 py-1.5 border rounded text-sm hover:bg-gray-50">
92              Export JSON
93            </button>
94          </div>
95        </div>
96      </div>
97    )
98  }