ANALYTICS
Comprehensive sales dashboard showing revenue, orders, top products, and payouts.
FULL DASHBOARD
CODE
analytics-example.tsxtsx
1import { Analytics } from '@/components/fanbace/platform-user';2import { useAnalytics } from '@/lib/sdk';3 4export default function DashboardPage() {5 const { timeRange, setTimeRange } = useState('month');6 7 return (8 <div>9 <TimeRangeSelector value={timeRange} onChange={setTimeRange} />10 11 <Analytics12 timeRange={timeRange}13 showTrends={true}14 />15 </div>16 );17}PROPS
| Prop | Type | Default | Description |
|---|---|---|---|
| timeRange | 'today' | 'week' | 'month' | 'total' | 'month' | Time period to show data for |
| showTrends | boolean | true | Show percentage change indicators |
| compact | boolean | false | Show only summary stats |
VARIANTS
Compact Mode
Today's Stats
Weekly Overview
USAGE EXAMPLES
WITH TIME RANGE SELECTOR
Let users switch between time periods
1function AnalyticsDashboard() {2 const [timeRange, setTimeRange] = useState('month');3 4 return (5 <div>6 <Tabs value={timeRange} onValueChange={setTimeRange}>7 <TabsList>8 <TabsTrigger value="today">Today</TabsTrigger>9 <TabsTrigger value="week">Week</TabsTrigger>10 <TabsTrigger value="month">Month</TabsTrigger>11 <TabsTrigger value="total">All Time</TabsTrigger>12 </TabsList>13 </Tabs>14 15 <Analytics timeRange={timeRange} />16 </div>17 );18}WITH REAL-TIME UPDATES
Auto-refresh data every 30 seconds
1function LiveAnalytics() {2 const { data, refetch } = useAnalytics();3 4 useEffect(() => {5 const interval = setInterval(refetch, 30000); // 30 seconds6 return () => clearInterval(interval);7 }, [refetch]);8 9 return <CreatorAnalytics {...data} />;10}IN SELLER PORTAL
Embed in main dashboard layout
1function SellerDashboard() {2 const { creator, analytics } = useCreatorData();3 4 return (5 <div className="space-y-8">6 <div className="flex items-center justify-between">7 <h1>Welcome back, {creator.name}!</h1>8 <Button>Create Product</Button>9 </div>10 11 <Analytics12 timeRange="month"13 showTrends={true}14 />15 16 <ProductsGrid products={creator.products} />17 </div>18 );19}