Stat

import { Stat, StatGrid, TrendDelta } from '@arbol-ai/ui';

<StatGrid>
  <Stat label="Conversations" trend={<TrendDelta label="vs last week" value={0.18} />} value={3240} />
  <Stat
    formatOptions={{ style: 'percent' }}
    hint="Answered within a minute"
    label="Answer rate"
    trend={<TrendDelta label="vs last week" unit="points" value={2.4} />}
    value={0.94}
  />
  <Stat
    label="No-shows"
    trend={<TrendDelta label="vs last week" tone="inverse" value={0.07} />}
    value={41}
  />
  <Stat
    label="Average call"
    trend={<TrendDelta tone="neutral" value={-0.04} />}
    unit="min"
    value="3:45"
  />
</StatGrid>

import { Link, Stat, StatGrid, StatusDot, TrendDelta } from '@arbol-ai/ui';

<StatGrid columns={3}>
  <Stat
    hint="214 by phone · 96 on WhatsApp"
    label="Live now"
    leading={<StatusDot hideLabel label="Live" pulse tone="success" />}
    value={18}
  />
  <Stat
    formatOptions={{ style: 'percent' }}
    info="Conversations that reached their goal, out of every conversation with a result."
    label="Success rate"
    trend={<TrendDelta label="vs previous period" unit="points" value={3.2} />}
    value={0.81}
  />
  <Stat
    info="Conversations the agent handed to your team that nobody has closed yet."
    label="To review"
    trend={<TrendDelta tone="inverse" value={-0.12} />}
    value={23}
  >
    <Link className="text-sm" href="#/stat">
      Review them
    </Link>
  </Stat>
</StatGrid>

import { Stat, StatGrid, TrendDelta } from '@arbol-ai/ui';

<StatGrid columns={2}>
  <Stat isLoading label="Bookings" value={0} />
  <Stat label="Campaigns sent" trend={<TrendDelta value={null} />} value={12} />
</StatGrid>

import { useState } from 'react';
import { SummaryStrip } from '@arbol-ai/ui';
import type { SummaryStripItem } from '@arbol-ai/ui';

const RESULTS: SummaryStripItem[] = [
  {
    id: 'resolved',
    label: 'Resolved',
    value: 812,
    share: 0.81,
    dot: 'bg-chart-1',
    hint: 'Conversations the agent resolved without help.',
  },
  {
    id: 'handoff',
    label: 'Handed off',
    value: 126,
    share: 0.13,
    dot: 'bg-amber-9',
    hint: 'Conversations the agent passed to your team.',
  },
  {
    id: 'missed',
    label: 'Missed',
    value: 64,
    share: 0.06,
    dot: 'bg-red-9',
    hint: 'Calls and chats nobody answered.',
  },
];

const SummaryExample = () => {
  const [result, setResult] = useState<string | null>(null);
  return (
    <SummaryStrip
      items={RESULTS}
      label="Conversations by result"
      onSelectionChange={setResult}
      selectedId={result}
    />
  );
};

<SummaryExample />