Software Development

import { Layout, Grid, Card, Metric, Chart } from '@illegend/ui';
import { useLiveData } from './hooks/useLiveData';

export default function Dashboard() {
  const { revenue, users, orders } = useLiveData('/api/metrics');

  return (
    <Layout title="Overview" theme="light">
      <Grid columns={4} gap={16}>
        <Metric label="Revenue" value={revenue.total} trend={+12.4} />
        <Metric label="Active users" value={users.active} trend={+8.1} />
        <Metric label="Orders" value={orders.count} trend={+5.6} />
        <Metric label="Conversion" value="4.8%" trend={+1.2} />
      </Grid>
      <Card title="Revenue" span={3}>
        <Chart type="area" data={revenue.series} accent="#1F8DA1" />
      </Card>
      <Card title="Channels">
        <Chart type="donut" data={orders.byChannel} />
      </Card>
    </Layout>
  );
}