import * as stylex from "@stylexjs/stylex";
import { Badge, type BadgeVariant } from "@/components/ui/badge";
import * as Card from "@/components/ui/card";
import * as Chart from "@/components/ui/chart";
import { Area, AreaChart } from "@/components/ui/chart-area";
import { Progress } from "@/components/ui/progress";
import * as Table from "@/components/ui/table";
import { colors, spacing, typography } from "@/styles/shelf/tokens.stylex";

const STATS = [
  { label: "Revenue", value: "$48,120.00", change: "+12.4%", up: true },
  { label: "Outstanding", value: "$12,480.00", change: "+3.1%", up: false },
  { label: "Customers", value: "1,284", change: "+48", up: true },
  { label: "Avg. days to pay", value: "18", change: "−2", up: true },
];

const REVENUE = [
  { month: "Jan", revenue: 18600 },
  { month: "Feb", revenue: 20500 },
  { month: "Mar", revenue: 23700 },
  { month: "Apr", revenue: 22100 },
  { month: "May", revenue: 27800 },
  { month: "Jun", revenue: 31400 },
];

const GOALS = [
  { label: "Quarterly revenue", value: 72 },
  { label: "New customers", value: 54 },
  { label: "Invoices paid on time", value: 88 },
];

const RECENT: {
  id: string;
  customer: string;
  status: string;
  variant: BadgeVariant;
  amount: string;
}[] = [
  { id: "INV-1046", customer: "Hooli", status: "Pending", variant: "outline", amount: "$3,100.00" },
  { id: "INV-1045", customer: "Umbrella", status: "Paid", variant: "secondary", amount: "$640.00" },
  {
    id: "INV-1044",
    customer: "Initech",
    status: "Overdue",
    variant: "destructive",
    amount: "$2,450.00",
  },
  { id: "INV-1043", customer: "Globex", status: "Pending", variant: "outline", amount: "$860.00" },
  {
    id: "INV-1042",
    customer: "Acme Inc.",
    status: "Paid",
    variant: "secondary",
    amount: "$1,200.00",
  },
];

/**
 * A dashboard home: headline stats with their change this month, progress toward goals,
 * and the latest invoices. Replace the constants at the top with your data.
 */
export function DashboardOverview() {
  return (
    <div {...stylex.props(styles.root)}>
      <ul aria-label="Key figures" {...stylex.props(styles.stats)}>
        {STATS.map((stat) => (
          <li key={stat.label} {...stylex.props(styles.statItem)}>
            <Card.Root style={styles.stat}>
              <Card.Header>
                <Card.Description>{stat.label}</Card.Description>
                <Card.Title style={styles.value}>{stat.value}</Card.Title>
              </Card.Header>
              <Card.Content>
                <Badge variant={stat.up ? "secondary" : "outline"}>{stat.change} this month</Badge>
              </Card.Content>
            </Card.Root>
          </li>
        ))}
      </ul>
      <Card.Root>
        <Card.Header>
          <Card.Title>Revenue</Card.Title>
          <Card.Description>Revenue by month this year.</Card.Description>
        </Card.Header>
        <Card.Content>
          <AreaChart aria-label="Revenue by month" data={REVENUE} aspect={3}>
            <Chart.Grid />
            <Chart.XAxis dataKey="month" />
            <Chart.YAxis format={{ notation: "compact", style: "currency", currency: "USD" }} />
            <Chart.Tooltip
              format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
            />
            <Area dataKey="revenue" name="Revenue" />
          </AreaChart>
        </Card.Content>
      </Card.Root>
      <div {...stylex.props(styles.panels)}>
        <Card.Root style={styles.recent}>
          <Card.Header>
            <Card.Title>Recent invoices</Card.Title>
            <Card.Description>The last five invoices you sent.</Card.Description>
          </Card.Header>
          <Card.Content>
            <Table.Root aria-label="Recent invoices">
              <Table.Header>
                <Table.Row>
                  <Table.Head>Invoice</Table.Head>
                  <Table.Head style={styles.wide}>Customer</Table.Head>
                  <Table.Head>Status</Table.Head>
                  <Table.Head style={styles.end}>Amount</Table.Head>
                </Table.Row>
              </Table.Header>
              <Table.Body>
                {RECENT.map((invoice) => (
                  <Table.Row key={invoice.id}>
                    <Table.Cell>{invoice.id}</Table.Cell>
                    <Table.Cell style={styles.wide}>{invoice.customer}</Table.Cell>
                    <Table.Cell>
                      <Badge variant={invoice.variant}>{invoice.status}</Badge>
                    </Table.Cell>
                    <Table.Cell style={styles.end}>{invoice.amount}</Table.Cell>
                  </Table.Row>
                ))}
              </Table.Body>
            </Table.Root>
          </Card.Content>
        </Card.Root>
        <Card.Root style={styles.goals}>
          <Card.Header>
            <Card.Title>Goals</Card.Title>
            <Card.Description>Progress this quarter.</Card.Description>
          </Card.Header>
          <Card.Content style={styles.goalList}>
            {GOALS.map((goal) => (
              <Progress key={goal.label} label={goal.label} value={goal.value} showValue />
            ))}
          </Card.Content>
        </Card.Root>
      </div>
    </div>
  );
}

const styles = stylex.create({
  root: {
    gap: spacing["4"],
    containerType: "inline-size",
    display: "flex",
    flexDirection: "column",
    fontFamily: typography.fontFamily,
    minWidth: 0,
    width: "100%",
  },
  stats: {
    margin: 0,
    padding: 0,
    gap: spacing["4"],
    listStyle: "none",
    display: "grid",
    gridTemplateColumns: {
      default: "minmax(0, 1fr)",
      "@container (min-width: 20rem)": "repeat(2, minmax(0, 1fr))",
      "@container (min-width: 56rem)": "repeat(4, minmax(0, 1fr))",
    },
  },
  statItem: {
    display: "grid",
  },
  stat: {
    gap: spacing["3"],
  },
  value: {
    fontSize: typography.fontSizeLg,
    fontVariantNumeric: "tabular-nums",
    lineHeight: typography.lineHeightLg,
  },
  panels: {
    gap: spacing["4"],
    display: "flex",
    flexWrap: "wrap",
  },
  recent: {
    flexBasis: "28rem",
    flexGrow: 2,
    minWidth: 0,
  },
  goals: {
    flexBasis: "16rem",
    flexGrow: 1,
  },
  goalList: {
    gap: spacing["4"],
    display: "flex",
    flexDirection: "column",
  },
  wide: {
    display: {
      default: "none",
      "@container (min-width: 28rem)": "table-cell",
    },
  },
  end: {
    color: colors.foreground,
    fontVariantNumeric: "tabular-nums",
    textAlign: "end",
  },
});

3b:["$","$L3e",null,{"style":["$39:props:style:0","$39:props:style:1"],"children":["$","div",null,{"className":"xxhlesw x1in1o3d x1dcheo9 xnunrkz xh8ff3j x521ovy x1qivamn xeq4nuv xezivpi","dangerouslySetInnerHTML":{"__html":"$40"}}]}] 41:T112c2,

import * as stylex from "@stylexjs/stylex";
import { Badge } from "@/components/ui/badge";
import * as Card from "@/components/ui/card";
import * as Chart from "@/components/ui/chart";
import { seriesColors } from "@/components/ui/chart";
import { Area, AreaChart } from "@/components/ui/chart-area";
import { Bar, BarChart } from "@/components/ui/chart-bar";
import { Heatmap } from "@/components/ui/chart-heatmap";
import { Pie, PieChart } from "@/components/ui/chart-pie";
import { Sparkline } from "@/components/ui/sparkline";
import { colors, spacing, typography } from "@/styles/shelf/tokens.stylex";

const USD = { style: "currency", currency: "USD", maximumFractionDigits: 0 } as const;

const STATS = [
  { label: "Revenue", value: "$48,120", change: "+12.4%", trend: [31, 34, 33, 38, 41, 40, 46, 48] },
  { label: "Orders", value: "1,065", change: "+6.2%", trend: [22, 25, 24, 26, 29, 28, 31, 32] },
  { label: "Visitors", value: "24,810", change: "+3.1%", trend: [40, 38, 42, 41, 44, 43, 45, 47] },
  { label: "Refund rate", value: "2.4%", change: "−0.3%", trend: [9, 8, 9, 7, 7, 6, 6, 5] },
].map((stat) => ({ ...stat, trend: stat.trend.map((value, week) => ({ week, value })) }));

const MONTHS = [
  { month: "Jan", revenue: 18600, refunds: 1200 },
  { month: "Feb", revenue: 20500, refunds: 1500 },
  { month: "Mar", revenue: 23700, refunds: 900 },
  { month: "Apr", revenue: 22100, refunds: 1800 },
  { month: "May", revenue: 27800, refunds: 1100 },
  { month: "Jun", revenue: 31400, refunds: 1400 },
];

const CHANNELS = [
  { channel: "Web", orders: 420 },
  { channel: "Store", orders: 310 },
  { channel: "Partner", orders: 215 },
  { channel: "Phone", orders: 120 },
];

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const HOURS = ["9am", "11am", "1pm", "3pm", "5pm"];
const BUSY = [
  [4, 12, 18, 14, 6],
  [5, 14, 22, 16, 8],
  [3, 11, 20, 19, 9],
  [6, 15, 25, 21, 10],
  [8, 18, 28, 24, 15],
];

/**
 * An analytics page: headline figures with sparklines, revenue over time, orders by channel,
 * and when customers buy. Replace the constants at the top with your data.
 */
export function AnalyticsDashboard() {
  return (
    <div {...stylex.props(styles.root)}>
      <ul aria-label="Key figures" {...stylex.props(styles.stats)}>
        {STATS.map((stat) => (
          <li key={stat.label} {...stylex.props(styles.statItem)}>
            <Card.Root style={styles.stat}>
              <Card.Header>
                <Card.Description>{stat.label}</Card.Description>
                <Card.Title style={styles.value}>{stat.value}</Card.Title>
              </Card.Header>
              <Card.Content style={styles.statFooter}>
                <Badge variant="secondary">{stat.change}</Badge>
                <Sparkline
                  aria-label={`${stat.label}, last 8 weeks`}
                  data={stat.trend}
                  dataKey="value"
                />
              </Card.Content>
            </Card.Root>
          </li>
        ))}
      </ul>

      <div {...stylex.props(styles.row)}>
        <Card.Root style={styles.wide}>
          <Card.Header>
            <Card.Title>Revenue</Card.Title>
            <Card.Description>Revenue and refunds by month.</Card.Description>
          </Card.Header>
          <Card.Content>
            <AreaChart aria-label="Revenue and refunds by month" data={MONTHS}>
              <Chart.Grid />
              <Chart.XAxis dataKey="month" />
              <Chart.YAxis format={{ notation: "compact", style: "currency", currency: "USD" }} />
              <Chart.Tooltip format={USD} />
              <Chart.Legend />
              <Area dataKey="revenue" name="Revenue" />
              <Area dataKey="refunds" name="Refunds" color={seriesColors[1]} pattern="dots" />
            </AreaChart>
          </Card.Content>
        </Card.Root>
        <Card.Root style={styles.narrow}>
          <Card.Header>
            <Card.Title>Orders by channel</Card.Title>
            <Card.Description>Share of orders this quarter.</Card.Description>
          </Card.Header>
          <Card.Content>
            <PieChart aria-label="Orders by channel">
              <Chart.Tooltip />
              <Chart.Legend verticalAlign="bottom" />
              <Pie
                data={CHANNELS}
                dataKey="orders"
                nameKey="channel"
                donut
                centerValue="1,065"
                centerLabel="Orders"
              />
            </PieChart>
          </Card.Content>
        </Card.Root>
      </div>

      <div {...stylex.props(styles.row)}>
        <Card.Root style={styles.narrow}>
          <Card.Header>
            <Card.Title>Orders by channel</Card.Title>
            <Card.Description>Compared across channels.</Card.Description>
          </Card.Header>
          <Card.Content>
            <BarChart aria-label="Orders by channel, bars" data={CHANNELS}>
              <Chart.Grid />
              <Chart.XAxis dataKey="channel" />
              <Chart.YAxis />
              <Chart.Tooltip />
              <Bar dataKey="orders" name="Orders" />
            </BarChart>
          </Card.Content>
        </Card.Root>
        <Card.Root style={styles.wide}>
          <Card.Header>
            <Card.Title>When customers buy</Card.Title>
            <Card.Description>Orders by weekday and hour.</Card.Description>
          </Card.Header>
          <Card.Content>
            <Heatmap
              aria-label="Orders by weekday and hour"
              rows={DAYS}
              columns={HOURS}
              values={BUSY}
              color={seriesColors[3]}
            />
          </Card.Content>
        </Card.Root>
      </div>
    </div>
  );
}

const styles = stylex.create({
  root: {
    gap: spacing["4"],
    containerType: "inline-size",
    display: "flex",
    flexDirection: "column",
    fontFamily: typography.fontFamily,
    minWidth: 0,
    width: "100%",
  },
  stats: {
    margin: 0,
    padding: 0,
    gap: spacing["4"],
    listStyle: "none",
    display: "grid",
    gridTemplateColumns: {
      default: "minmax(0, 1fr)",
      "@container (min-width: 20rem)": "repeat(2, minmax(0, 1fr))",
      "@container (min-width: 56rem)": "repeat(4, minmax(0, 1fr))",
    },
  },
  statItem: {
    display: "grid",
  },
  stat: {
    gap: spacing["3"],
  },
  statFooter: {
    gap: spacing["3"],
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
  },
  value: {
    color: colors.foreground,
    fontSize: typography.fontSizeLg,
    fontVariantNumeric: "tabular-nums",
    lineHeight: typography.lineHeightLg,
  },
  row: {
    gap: spacing["4"],
    display: "flex",
    flexWrap: "wrap",
  },
  wide: {
    flexBasis: "28rem",
    flexGrow: 2,
    minWidth: 0,
  },
  narrow: {
    flexBasis: "18rem",
    flexGrow: 1,
    minWidth: 0,
  },
});

Dashboard Shell

Dashboard Overview

Analytics Dashboard