KpiGrid

import { KpiGrid } from '@arbol-ai/ui';
import type { Kpi } from '@arbol-ai/ui';

const OVERVIEW: Kpi[] = [
  { id: 'live', label: 'Live now', value: 18, isLive: true, hint: '12 by phone · 6 on WhatsApp' },
  { id: 'today', label: 'Today', value: 214, change: 0.08, changeLabel: 'vs yesterday' },
  {
    id: 'rate',
    label: 'Success rate',
    value: 0.81,
    formatOptions: { style: 'percent' },
    change: 3.2,
    changeUnit: 'points',
    info: 'Conversations that reached their goal, out of every conversation with a result.',
  },
  {
    id: 'review',
    label: 'To review',
    value: 23,
    change: -0.12,
    changeTone: 'inverse',
    info: 'Conversations the agents handed to your team that nobody has closed yet.',
    link: { href: '#/kpi-grid', label: 'Review them' },
  },
];

<KpiGrid items={OVERVIEW} />

import { KpiGrid } from '@arbol-ai/ui';

<KpiGrid
  items={[
    {
      id: 'duration',
      label: 'Average call',
      value: '3:45',
      unit: 'min',
      change: 0.04,
      changeTone: 'neutral',
    },
  ]}
  reading="Calls lasted a little longer than the week before; a longer call is not a worse one."
/>

import { KpiGrid } from '@arbol-ai/ui';
import type { Kpi } from '@arbol-ai/ui';

const OVERVIEW: Kpi[] = [
  { id: 'live', label: 'Live now', value: 18, isLive: true, hint: '12 by phone · 6 on WhatsApp' },
  { id: 'today', label: 'Today', value: 214, change: 0.08, changeLabel: 'vs yesterday' },
  {
    id: 'rate',
    label: 'Success rate',
    value: 0.81,
    formatOptions: { style: 'percent' },
    change: 3.2,
    changeUnit: 'points',
    info: 'Conversations that reached their goal, out of every conversation with a result.',
  },
  {
    id: 'review',
    label: 'To review',
    value: 23,
    change: -0.12,
    changeTone: 'inverse',
    info: 'Conversations the agents handed to your team that nobody has closed yet.',
    link: { href: '#/kpi-grid', label: 'Review them' },
  },
];

<div className="grid gap-4">
  <KpiGrid isLoading items={OVERVIEW.slice(0, 3)} />
  <KpiGrid items={[{ id: 'booked', label: 'Booked for next week', value: 312, change: null }]} />
</div>