KPI

import { Kpi } from '@/components/panelui/kpi';

/** Each figure over the last thirty days, oldest first. */
const SUBSCRIBERS = [152, 154, 153, 157, 161, 160, 164, 169, 168, 172, 176, 175, 179, 182];
const UNSUBSCRIBES = [14, 13, 13, 12, 12, 11, 12, 10, 10, 9, 9, 8, 8, 7];
const OPENS = [41, 42, 44, 43, 45, 44, 46, 45, 47, 46, 46, 48, 47, 47];

export default function KpiOverview() {
  return (
    // A frame: a band that names what is inside, round a panel that holds it.
    <div className="w-full max-w-md rounded-3xl bg-muted p-1.5">
      <div className="flex items-center justify-between gap-3 px-3.5 py-2.5">
        <h3 className="text-sm font-medium">Newsletter</h3>
        <p className="text-sm text-muted-foreground">Last 30 days</p>
      </div>

      <div className="rounded-[1.125rem] border bg-card p-5 text-card-foreground shadow-xs">
        <Kpi.Group orientation="vertical">
          <Kpi>
            <Kpi.Content layout="inline">
              <Kpi.Stat>
                <Kpi.Title>Subscribers</Kpi.Title>
                <Kpi.Value>18,240</Kpi.Value>
                <Kpi.Trend value={6.4} caption="this month" />
              </Kpi.Stat>
              <Kpi.Chart data={SUBSCRIBERS} inline />
            </Kpi.Content>
          </Kpi>
          <Kpi>
            <Kpi.Content layout="inline">
              <Kpi.Stat>
                <Kpi.Title>Unsubscribe rate</Kpi.Title>
                <Kpi.Value>0.8%</Kpi.Value>
                <Kpi.Trend value={-12.5} goodDirection="down" caption="on last month" />
              </Kpi.Stat>
              <Kpi.Chart data={UNSUBSCRIBES} color="success" inline />
            </Kpi.Content>
          </Kpi>
          <Kpi>
            <Kpi.Content layout="inline">
              <Kpi.Stat>
                <Kpi.Title>Open rate</Kpi.Title>
                <Kpi.Value>47.3%</Kpi.Value>
                <Kpi.Trend value={1.9} caption="last 7 issues" />
              </Kpi.Stat>
              <Kpi.Chart data={OPENS} color="info" inline />
            </Kpi.Content>
          </Kpi>
        </Kpi.Group>
      </div>
    </div>
  );
}

import { UsersIcon } from 'lucide-react';
import { Kpi } from '@/components/panelui/kpi';

const READERS = [310, 318, 305, 322, 340, 336, 351, 348, 366, 372, 369, 388, 401, 412];

export default function KpiCard() {
  return (
    <Kpi surface className="max-w-xs">
      <Kpi.Header>
        <Kpi.Icon>
          <UsersIcon />
        </Kpi.Icon>
        <Kpi.Title>Weekly readers</Kpi.Title>
        <Kpi.Actions>
          <Kpi.Trend value={8.2} variant="badge" />
        </Kpi.Actions>
      </Kpi.Header>
      <Kpi.Value>4,120</Kpi.Value>
      <Kpi.Chart data={READERS} color="info" filled height={72} />
      <Kpi.Footer>Counted every Monday</Kpi.Footer>
    </Kpi>
  );
}

import { BanknoteIcon, TargetIcon } from 'lucide-react';
import { Kpi } from '@/components/panelui/kpi';

export default function KpiTargets() {
  return (
    // A frame: a band that names what is inside, round a panel that holds it.
    <div className="w-full max-w-md rounded-3xl bg-muted p-1.5">
      <div className="flex items-center justify-between gap-3 px-3.5 py-2.5">
        <h3 className="text-sm font-medium">Targets</h3>
        <p className="text-sm text-muted-foreground">This quarter</p>
      </div>

      <div className="rounded-[1.125rem] border bg-card p-5 text-card-foreground shadow-xs">
        <Kpi.Group orientation="vertical">
          <Kpi>
            <Kpi.Header>
              <Kpi.Icon tone="good">
                <TargetIcon />
              </Kpi.Icon>
              <Kpi.Title>Paid members</Kpi.Title>
              <Kpi.Actions>
                <Kpi.Trend value={5.1} variant="badge" />
              </Kpi.Actions>
            </Kpi.Header>
            <Kpi.Value>1,463</Kpi.Value>
            <Kpi.Progress value={1463} maxValue={2000} label="of 2,000" showValueLabel />
            <Kpi.Footer>38 days left in the quarter</Kpi.Footer>
          </Kpi>
          <Kpi>
            <Kpi.Header>
              <Kpi.Icon>
                <BanknoteIcon />
              </Kpi.Icon>
              <Kpi.Title>Sponsorship</Kpi.Title>
              <Kpi.Actions>
                <Kpi.Trend value={-3.4} variant="badge" />
              </Kpi.Actions>
            </Kpi.Header>
            <Kpi.Value>€9,800</Kpi.Value>
            <Kpi.Progress
              value={9800}
              maxValue={24000}
              label="of €24,000"
              showValueLabel
              color="warning"
            />
          </Kpi>
        </Kpi.Group>
      </div>
    </div>
  );
}

import { Kpi } from '@/components/panelui/kpi';

export default function KpiPanel() {
  return (
    <div className="w-full max-w-md rounded-3xl border bg-card p-5 text-card-foreground">
      <Kpi.Group>
        <Kpi>
          <Kpi.Title>Sent</Kpi.Title>
          <Kpi.Value>112</Kpi.Value>
          <Kpi.Trend value={3.7} />
        </Kpi>
        <Kpi>
          <Kpi.Title>Replies</Kpi.Title>
          <Kpi.Value>386</Kpi.Value>
          <Kpi.Trend value={14.2} />
        </Kpi>
        <Kpi>
          <Kpi.Title>Bounces</Kpi.Title>
          <Kpi.Value>0.6%</Kpi.Value>
          <Kpi.Trend value={-0.4} goodDirection="down" />
        </Kpi>
      </Kpi.Group>
    </div>
  );
}