Building

<

Complex Systems

>

1// src/components/analytics/revenue-chart.tsx
2import { useQuery } from '@tanstack/react-query';
3import { BarChart, Card } from '@ui/kits';
4 
5export function RevenueChart() {
6  const { data, isLoading } = useQuery({
7    queryKey: ['revenue_metrics'],
8    queryFn: fetchRevenueData,
9    refetchInterval: 5000 // Real-time
10  });
11 
12  if (isLoading) return <Skeleton className="h-64" />;
13 
14  return (
15    <Card className="p-6 bg-card/50 backdrop-blur">
16      <div className="flex justify-between mb-6">
17        <h3 className="font-bold text-white">Revenue Trend</h3>
18        <Badge variant="success">+{data.growth}%</Badge>
19      </div>
20      
21      <BarChart 
22        data={data.history}
23        color="primary"
24        animate={true}
25        height={300}
26      />
27    </Card>
28  );
29}