Stat cards

import * as React from "react"
import { ReceiptTextIcon, ShoppingBagIcon, UserPlusIcon, WalletIcon, type LucideIcon } from "lucide-react"

import { formatCurrency, formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Sparkline } from "@/components/ui/sparkline"
import { StatCard } from "@/components/ui/stat-card"
import { StatCardGroup } from "@/components/ui/stat-card-group"

import { WINDOW_DAYS, storeStats, windowLabel, type StoreStat, type StoreStatKey } from "./stat-cards-01.data"

const ICONS: Record<StoreStatKey, LucideIcon> = {
  revenue: WalletIcon,
  orders: ShoppingBagIcon,
  "average-order": ReceiptTextIcon,
  "new-customers": UserPlusIcon,
}

/** Whole dollars on a headline; the cents are noise at this size. */
function figure(stat: StoreStat, value: number): string {
  return stat.kind === "money"
    ? formatCurrency(value / 100, "USD", { maximumFractionDigits: 0 })
    : formatNumber(value)
}

/**
 * The store's four headline figures in one framed card on the page ground:
 * the strip names them and the window they cover, and the sheet holds them as
 * one divided row — each label beside its change as a pill, the number with
 * what it is measured against, and the month so far drawn over the month
 * before, so a figure shows not only where it ended but whether it was ever
 * behind.
 *
 * A server component: it counts its figures through `./stat-cards-01.data`
 * and hands the sparklines plain numbers.
 */
export function StatCards01() {
  const titleId = React.useId()
  const stats = storeStats()

  return (
    <section
      data-section="stat-cards-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Store performance</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              Last {WINDOW_DAYS} days · {windowLabel()}
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <StatCardGroup columns={4} divided>
              {stats.map((stat) => {
                const Icon = ICONS[stat.key]
                return (
                  <StatCard
                    key={stat.key}
                    label={stat.label}
                    value={figure(stat, stat.value)}
                    delta={stat.delta}
                    deltaFormat="percent"
                    positiveIsGood={stat.positiveIsGood}
                    description={`vs ${figure(stat, stat.previous)} the ${WINDOW_DAYS} days before`}
                    icon={<Icon aria-hidden="true" />}
                    footer={<Sparkline data={stat.trend} compare={stat.previousTrend} height={36} />}
                  />
                )
              })}
            </StatCardGroup>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default StatCards01

/**
 * What `stat-cards-01` reads: a store's headline figures over a window of
 * days, each against the same span just before it, with where it stood at the
 * end of every day for the trend under the number. Everything is counted from
 * `db.orders` and `db.customers`, and "now" is `REFERENCE_DATE` — never the
 * clock — so the server and the browser count the same days.
 *
 * Selectors only, reading `db` inside functions and run on the server. An
 * island takes these figures as props; it never imports this module.
 */
import { REFERENCE_DATE, db, type Order } from "@/lib/sample-data"

/** The window every figure covers, in days. */
export const WINDOW_DAYS = 30

const DAY_MS = 86_400_000

/** The orders that count as a sale: paid for and not handed back. */
const SOLD: readonly Order["status"][] = ["paid", "fulfilled"]

export type StoreStatKey = "revenue" | "orders" | "average-order" | "new-customers"

export type StoreStat = {
  key: StoreStatKey
  label: string
  /** "money" is in minor units; "count" is a plain number. */
  kind: "money" | "count"
  value: number
  /** The same measure over the span just before. */
  previous: number
  /** `value` against `previous` as a ratio; 0 when there was nothing to grow from. */
  delta: number
  /** False where a rise is the bad news. */
  positiveIsGood: boolean
  /**
   * The measure as it stood at the end of each day of the window, oldest
   * first: a running total for a sum, a rolling window for the average order.
   * Its last point is `value`.
   */
  trend: number[]
  /** The same for the span before, day for day, so the two lines can be laid over each other. */
  previousTrend: number[]
}

type Span = { from: number; to: number }

function spans(days: number): { current: Span; previous: Span } {
  const to = REFERENCE_DATE.getTime()
  const from = to - days * DAY_MS
  return { current: { from, to }, previous: { from: from - days * DAY_MS, to: from } }
}

/** Something that happened at an instant and adds a value: a sale's cents, a sign-up's one. */
type Tally = { at: number; value: number }

/** The sum of the events inside a span, as it stood at the end of each of its days. */
function runningTotal(events: readonly Tally[], span: Span, days: number): number[] {
  const inside = events.filter((event) => event.at >= span.from && event.at < span.to).sort((a, b) => a.at - b.at)
  const totals: number[] = []
  let next = 0
  let total = 0
  for (let day = 1; day <= days; day++) {
    const end = span.from + day * DAY_MS
    while (next < inside.length && inside[next].at < end) total += inside[next++].value
    totals.push(total)
  }
  return totals
}

/** The change from `was` to `now` as a ratio; 0 when there was nothing to grow from. */
function growth(now: number, was: number): number {
  return was === 0 ? 0 : (now - was) / was
}

const last = (series: number[]) => series[series.length - 1] ?? 0

/**
 * A ratio of two tallies over the `days` up to the end of each day of a span.
 * A running ratio swings on its first one or two orders; a rolling one moves
 * with the store, and on the span's last day it is the span's own figure.
 */
function rollingRatio(numerator: readonly Tally[], denominator: readonly Tally[], span: Span, days: number): number[] {
  const sum = (tallies: readonly Tally[], from: number, to: number) =>
    tallies.reduce((total, tally) => (tally.at >= from && tally.at < to ? total + tally.value : total), 0)
  return Array.from({ length: days }, (_, index) => {
    const end = span.from + (index + 1) * DAY_MS
    const start = end - days * DAY_MS
    const below = sum(denominator, start, end)
    return below === 0 ? 0 : Math.round(sum(numerator, start, end) / below)
  })
}

/**
 * The four figures a store opens on — revenue, orders, the average order and
 * new customers — over the last `days`, each with its change against the
 * span before and where it stood at the end of every day.
 */
export function storeStats(days = WINDOW_DAYS): StoreStat[] {
  const { current, previous } = spans(days)
  const sales = db.orders.all().filter((order) => SOLD.includes(order.status))
  const cents: Tally[] = sales.map((order) => ({ at: order.placedAt.getTime(), value: order.totalCents }))
  const orders: Tally[] = sales.map((order) => ({ at: order.placedAt.getTime(), value: 1 }))
  const signups: Tally[] = db.customers.all().map((customer) => ({ at: customer.createdAt.getTime(), value: 1 }))

  const series = (events: Tally[]) => ({
    trend: runningTotal(events, current, days),
    previousTrend: runningTotal(events, previous, days),
  })
  const revenue = series(cents)
  const count = series(orders)
  const average = {
    trend: rollingRatio(cents, orders, current, days),
    previousTrend: rollingRatio(cents, orders, previous, days),
  }
  const customers = series(signups)

  const stat = (
    key: StoreStatKey,
    label: string,
    kind: StoreStat["kind"],
    measured: { trend: number[]; previousTrend: number[] }
  ): StoreStat => {
    const value = last(measured.trend)
    const before = last(measured.previousTrend)
    return { key, label, kind, value, previous: before, delta: growth(value, before), positiveIsGood: true, ...measured }
  }

  return [
    stat("revenue", "Revenue", "money", revenue),
    stat("orders", "Orders", "count", count),
    stat("average-order", "Average order", "money", average),
    stat("new-customers", "New customers", "count", customers),
  ]
}

/** The window as a reader says it — "Aug 5 – Sep 4, 2026" — in UTC, where the data lives. */
export function windowLabel(days = WINDOW_DAYS): string {
  const { current } = spans(days)
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return format.formatRange(new Date(current.from), new Date(current.to))
}

import * as React from "react"
import { CoinsIcon } from "lucide-react"

import { formatCurrency, formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Sparkline } from "@/components/ui/sparkline"
import { StatCard } from "@/components/ui/stat-card"

import { WINDOW_DAYS, modelSpend, windowLabel } from "./stat-cards-02.data"

/** Whole dollars on the headline; cents where a reader compares small sums. */
const dollars = (cents: number) => formatCurrency(cents / 100, "USD", { maximumFractionDigits: 0 })
const exact = (cents: number) => formatCurrency(cents / 100, "USD")

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const day = (date: string) => DAY.format(new Date(`${date}T00:00:00Z`))

/**
 * One figure made the hero: what the model gateway spent over the last 14
 * full days, with its change against the 14 before as a pill, beside the
 * same spend a day at a time — the days before dashed behind it, so a reader
 * sees which days made the difference — and four facts along the foot of
 * the sheet: the daily average, the dearest day, the requests and what one
 * cost.
 *
 * A server component: it counts through `./stat-cards-02.data` and hands the
 * sparkline plain dollars. The line stays drawn on a phone, where the sheet
 * stacks, so it is never measured at nothing.
 */
export function StatCards02() {
  const titleId = React.useId()
  const spend = modelSpend()
  const first = spend.days[0]
  const last = spend.days[spend.days.length - 1]
  const facts = [
    { term: "Daily average", detail: exact(spend.dailyAverageCents) },
    { term: "Dearest day", detail: `${day(spend.peak.date)} · ${exact(spend.peak.cents)}` },
    { term: "Requests", detail: formatNumber(spend.requests) },
    { term: "Per request", detail: exact(spend.perRequestCents) },
  ]

  return (
    <section
      data-section="stat-cards-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Model spend</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              {WINDOW_DAYS} full days · <span className="whitespace-nowrap">{windowLabel()}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <div className="grid lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
              <StatCard
                variant="flush"
                label="Spend"
                value={dollars(spend.cents)}
                delta={spend.delta}
                deltaFormat="percent"
                // A cost: more of it is the news to act on.
                positiveIsGood={false}
                description={`vs ${dollars(spend.previousCents)} the ${WINDOW_DAYS} days before`}
                icon={<CoinsIcon aria-hidden="true" />}
              />
              <figure className="flex min-w-0 flex-col gap-2 border-t border-rule p-(--card-spacing) lg:border-t-0 lg:border-l">
                <Sparkline
                  type="area"
                  data={spend.days.map((entry) => entry.cents / 100)}
                  compare={spend.previousDays.map((cents) => cents / 100)}
                  height={112}
                />
                <div aria-hidden="true" className="flex justify-between text-xs text-muted-foreground tabular-nums">
                  <span>{day(first.date)}</span>
                  <span>{day(last.date)}</span>
                </div>
                <figcaption className="text-xs text-pretty text-muted-foreground">
                  Spend a day from {day(first.date)} to {day(last.date)}, with the {WINDOW_DAYS} days before it
                  dashed behind.
                </figcaption>
              </figure>
            </div>
            <dl className="grid grid-cols-2 overflow-hidden border-t border-rule lg:grid-cols-4 [&>div]:-mt-px [&>div]:-ml-px [&>div]:border-t [&>div]:border-l [&>div]:border-rule">
              {facts.map((fact) => (
                <div key={fact.term} className="flex min-w-0 flex-col gap-0.5 px-(--card-spacing) py-3">
                  <dt className="text-xs text-muted-foreground">{fact.term}</dt>
                  <dd className="text-sm font-medium tabular-nums">{fact.detail}</dd>
                </div>
              ))}
            </dl>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default StatCards02

/**
 * What `stat-cards-02` reads: what the model gateway spent over the last 14
 * full days, day by day, against the 14 before them — counted from
 * `db.aiRequests`. A day is a UTC calendar day and today is left out, because
 * a day that is still running reads as a slump on a sparkline. "Now" is
 * `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db } from "@/lib/sample-data"

/** How many full days the figure covers. */
export const WINDOW_DAYS = 14

const DAY_MS = 86_400_000

export type SpendDay = {
  /** The day, as `YYYY-MM-DD` in UTC. */
  date: string
  /** What the day's requests cost, in cents. A failed request costs nothing. */
  cents: number
  requests: number
}

export type ModelSpend = {
  /** The window's spend, in cents. */
  cents: number
  /** The same over the 14 days before. */
  previousCents: number
  /** `cents` against `previousCents` as a ratio; 0 when there was nothing before. */
  delta: number
  requests: number
  /** One entry a day, oldest first. */
  days: SpendDay[]
  /** What each of the 14 days before cost, in cents, oldest first — laid behind `days` day for day. */
  previousDays: number[]
  /** The dearest day; the earlier one on a tie. */
  peak: SpendDay
  dailyAverageCents: number
  /** What a request cost on average, in cents. */
  perRequestCents: number
}

/** Midnight UTC today: the end of the window, which is today left out. */
function today(): number {
  const now = REFERENCE_DATE
  return Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
}

/** The window's first and last instant: `days` whole days ending at midnight today. */
function span(days: number, offset = 0): { from: number; to: number } {
  const to = today() - offset * days * DAY_MS
  return { from: to - days * DAY_MS, to }
}

/** The gateway's spend over the last `days` full days, day by day, against the days before. */
export function modelSpend(days = WINDOW_DAYS): ModelSpend {
  const requests = db.aiRequests.all()
  const current = span(days)
  const previous = span(days, 1)

  const ledger: SpendDay[] = Array.from({ length: days }, (_, index) => ({
    date: new Date(current.from + index * DAY_MS).toISOString().slice(0, 10),
    cents: 0,
    requests: 0,
  }))
  const before = Array.from({ length: days }, () => 0)
  for (const request of requests) {
    const at = request.at.getTime()
    if (at >= current.from && at < current.to) {
      const day = ledger[Math.floor((at - current.from) / DAY_MS)]
      day.cents += request.costCents
      day.requests += 1
    } else if (at >= previous.from && at < previous.to) {
      before[Math.floor((at - previous.from) / DAY_MS)] += request.costCents
    }
  }
  const previousCents = before.reduce((sum, cents) => sum + cents, 0)

  const cents = ledger.reduce((sum, day) => sum + day.cents, 0)
  const count = ledger.reduce((sum, day) => sum + day.requests, 0)
  const peak = ledger.reduce((best, day) => (day.cents > best.cents ? day : best), ledger[0])
  return {
    cents,
    previousCents,
    delta: previousCents === 0 ? 0 : (cents - previousCents) / previousCents,
    requests: count,
    days: ledger,
    previousDays: before,
    peak,
    dailyAverageCents: Math.round(cents / days),
    perRequestCents: count === 0 ? 0 : cents / count,
  }
}

/** The window as a reader says it — "Aug 21 – Sep 3, 2026" — in UTC, where the data lives. */
export function windowLabel(days = WINDOW_DAYS): string {
  const { from, to } = span(days)
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return format.formatRange(new Date(from), new Date(to - DAY_MS))
}

import * as React from "react"

import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { BulletChart } from "@/components/ui/bullet-chart"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { StatCard } from "@/components/ui/stat-card"
import { StatusBadge } from "@/components/ui/status-badge"

import { TARGET_GROWTH, quarterProgress, quarterTargets, type QuarterTarget } from "./stat-cards-03.data"

/** Whole dollars for money, grouped digits for counts. */
function amount(target: QuarterTarget, value: number): string {
  return target.kind === "money"
    ? formatCurrency(value / 100, "USD", { maximumFractionDigits: 0 })
    : formatNumber(Math.round(value))
}

/** Where a figure stands, in a word: the words carry the state, the tint only repeats it. */
function standing(target: QuarterTarget): { label: string; variant: "success" | "warning" } {
  if (target.met) return { label: "Target met", variant: "success" }
  return target.onPace ? { label: "On pace", variant: "success" } : { label: "Behind pace", variant: "warning" }
}

/**
 * A phone gets one tile to a row, so each keeps the bullet the kit's
 * two-up default hides under 640px: here it is the point of the tile.
 */
const KEEP_FOOTER = "[&_[data-slot=stat-card-footer]]:block"

/**
 * The quarter so far against its targets, one tile a figure. The number is
 * how much of the target is in; the pill on the strip says whether the rest
 * will be, in words; the caption is where the quarter lands at the rate it has
 * kept; and the bullet under it lays the figure to date over three bands —
 * behind pace, on pace, past the target — with the target as the tick.
 *
 * A server component: every figure and target is counted through
 * `./stat-cards-03.data`, where the rule for a target is written down.
 */
export function StatCards03() {
  const titleId = React.useId()
  const targets = quarterTargets()
  const quarter = quarterProgress()

  return (
    <section
      data-section="stat-cards-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>{quarter.label} targets</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              {formatPercent(quarter.elapsed, { maximumFractionDigits: 0 })} of the quarter gone · ends{" "}
              {quarter.ends}
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <div className="grid overflow-hidden sm:grid-cols-2 xl:grid-cols-4 [&>*]:-mt-px [&>*]:-ms-px [&>*]:border-t [&>*]:border-s [&>*]:border-rule">
              {targets.map((target) => {
                const state = standing(target)
                return (
                  <StatCard
                    key={target.key}
                    variant="flush"
                    className={KEEP_FOOTER}
                    label={target.label}
                    icon={<StatusBadge status={state.label} variant={state.variant} />}
                    value={formatPercent(target.attainment, { maximumFractionDigits: 0 })}
                    description={
                      target.met
                        ? `${amount(target, target.value - target.target)} past the target`
                        : `On course for ${amount(target, target.projected)} by ${quarter.ends}`
                    }
                    footer={
                      <BulletChart
                        size="sm"
                        label={`${quarter.label} to date`}
                        aria-label={`${target.label}, ${quarter.label} to date`}
                        value={target.value}
                        target={target.target}
                        ranges={[target.pace, target.target, Math.max(target.target * 1.25, target.value)]}
                        valueFormatter={(value) => amount(target, value)}
                      />
                    }
                  />
                )
              })}
            </div>
          </CardContent>
          <CardFooter className="text-xs text-pretty text-muted-foreground">
            Each target is last quarter plus {formatPercent(TARGET_GROWTH, { maximumFractionDigits: 0 })}, rounded.
            On pace means the rate so far reaches it by {quarter.ends}.
          </CardFooter>
        </Card>
      </div>
    </section>
  )
}

export default StatCards03

/**
 * What `stat-cards-03` reads: the store's quarter so far against its targets.
 * Revenue, orders and units are the paid orders in `db.orders` (paid and
 * fulfilled — a pending cart, a refund and a cancellation are not sales); new
 * customers are the `db.customers` who signed up. "Now" is `REFERENCE_DATE`,
 * and the quarter is the one it falls in.
 *
 * No target is written down anywhere. Each is a rule over the rows: the whole
 * of last quarter plus a tenth, rounded to two significant figures — the
 * number a manager would put on the wall. Pace is the target's share for the
 * part of the quarter that has gone; a figure is on pace when its straight
 * line to the quarter's end reaches the target.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db, type Order } from "@/lib/sample-data"

const DAY_MS = 86_400_000

/** The orders that count as a sale. */
const SOLD: readonly Order["status"][] = ["paid", "fulfilled"]

/** How far over last quarter the targets are set. */
export const TARGET_GROWTH = 0.1

export type TargetKey = "revenue" | "orders" | "units" | "new-customers"

export type QuarterTarget = {
  key: TargetKey
  label: string
  /** "money" is in cents. */
  kind: "money" | "count"
  /** The quarter so far. */
  value: number
  /** The whole of last quarter. */
  lastQuarter: number
  target: number
  /** `value` as a share of `target`. */
  attainment: number
  /** Where the figure should stand by now to land on the target. */
  pace: number
  /** Where it lands at the quarter's end at the rate it has kept so far. */
  projected: number
  onPace: boolean
  met: boolean
}

/** Midnight UTC on the first day of the quarter `offset` quarters from the current one. */
function quarterStart(offset: number): number {
  const month = Math.floor(REFERENCE_DATE.getUTCMonth() / 3) * 3 + offset * 3
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), month, 1)
}

/** Rounds to two significant figures: 71,975 → 72,000; 132 → 130. */
export function roundTarget(value: number): number {
  if (value <= 0) return 0
  const step = 10 ** Math.max(0, Math.floor(Math.log10(value)) - 1)
  return Math.round(value / step) * step
}

/** The quarter's days: how many there are, how many have gone, and the share gone. */
export function quarterProgress(): { label: string; ends: string; totalDays: number; elapsed: number } {
  const start = quarterStart(0)
  const end = quarterStart(1)
  const quarter = Math.floor(REFERENCE_DATE.getUTCMonth() / 3) + 1
  const ends = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" }).format(
    new Date(end - DAY_MS)
  )
  return {
    label: `Q${quarter} ${REFERENCE_DATE.getUTCFullYear()}`,
    ends,
    totalDays: Math.round((end - start) / DAY_MS),
    elapsed: (REFERENCE_DATE.getTime() - start) / (end - start),
  }
}

/** The four figures the quarter is steered by, each against its target. */
export function quarterTargets(): QuarterTarget[] {
  const now = REFERENCE_DATE.getTime()
  const current = { from: quarterStart(0), to: now }
  const last = { from: quarterStart(-1), to: quarterStart(0) }
  const within = (at: Date, span: { from: number; to: number }) => at.getTime() >= span.from && at.getTime() < span.to

  const sales = db.orders.all().filter((order) => SOLD.includes(order.status))
  const signups = db.customers.all()
  const measure = (span: { from: number; to: number }): Record<TargetKey, number> => {
    const orders = sales.filter((order) => within(order.placedAt, span))
    return {
      revenue: orders.reduce((sum, order) => sum + order.totalCents, 0),
      orders: orders.length,
      units: orders.reduce((sum, order) => sum + order.items.reduce((total, item) => total + item.qty, 0), 0),
      "new-customers": signups.filter((customer) => within(customer.createdAt, span)).length,
    }
  }
  const thisQuarter = measure(current)
  const before = measure(last)
  const { elapsed } = quarterProgress()

  const figure = (key: TargetKey, label: string, kind: QuarterTarget["kind"]): QuarterTarget => {
    const value = thisQuarter[key]
    const target = roundTarget(before[key] * (1 + TARGET_GROWTH))
    const projected = elapsed === 0 ? 0 : value / elapsed
    return {
      key,
      label,
      kind,
      value,
      lastQuarter: before[key],
      target,
      attainment: target === 0 ? 0 : value / target,
      pace: target * elapsed,
      projected,
      onPace: projected >= target,
      met: value >= target,
    }
  }

  return [
    figure("revenue", "Revenue", "money"),
    figure("orders", "Orders", "count"),
    figure("units", "Units sold", "count"),
    figure("new-customers", "New customers", "count"),
  ]
}

import * as React from "react"

import { cn } from "@/lib/utils"
import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { type Metric } from "@/lib/metric"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { MetricValue } from "@/components/ui/metric-value"
import { StatCard } from "@/components/ui/stat-card"

import { WEEK_NIGHTS, weekLabels, weekOverWeek, type WeekFigure } from "./stat-cards-04.data"

/** A figure as the kit's metric: shares as shares, money in dollars. */
function metric(figure: WeekFigure, value: number): Metric {
  if (figure.kind === "percent") return { kind: "percent", value, precision: 1 }
  if (figure.kind === "money") return { kind: "money", value: value / 100, precision: 0 }
  return { kind: "count", value }
}

function written(figure: WeekFigure, value: number): string {
  if (figure.kind === "percent") return formatPercent(value, { maximumFractionDigits: 1 })
  if (figure.kind === "money") return formatCurrency(value / 100, "USD", { maximumFractionDigits: 0 })
  return formatNumber(value)
}

/** A share reads against the whole house; an amount against the larger of its two weeks. */
function scale(figure: WeekFigure): number {
  return figure.kind === "percent" ? 1 : Math.max(figure.current, figure.previous, 1)
}

/**
 * Paint for the two weeks: the week that is the news in the accent, the week
 * before in the neutral grey, which stays grey under every preset.
 */
const WEEKS = [
  { key: "current", paint: "bg-primary" },
  { key: "previous", paint: "bg-chart-neutral" },
] as const

/** One tile to a row on a phone would stack four tall tiles; two up keeps the bars, which carry the comparison. */
const KEEP_FOOTER = "[&_[data-slot=stat-card-footer]]:block"

/**
 * Last week at the hotel against the week before: occupancy, the average rate
 * a room sold at, revenue per available room and arrivals. Each tile writes
 * the last week's figure with its change and what it is measured against —
 * a share moves in points, not percent — and lays the two weeks side by side
 * as bars on one scale, so a rate that rose while occupancy fell reads as the
 * trade it was.
 *
 * A server component: it counts through `./stat-cards-04.data`. The bars are
 * the same numbers as the caption, so they are hidden from assistive
 * technology, which already heard both.
 */
export function StatCards04() {
  const titleId = React.useId()
  const figures = weekOverWeek()
  const weeks = weekLabels()

  return (
    <section
      data-section="stat-cards-04"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>This week against last</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              The last {WEEK_NIGHTS} nights, <span className="whitespace-nowrap">{weeks.current}</span>, against{" "}
              <span className="whitespace-nowrap">{weeks.previous}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <div className="grid grid-cols-2 overflow-hidden lg:grid-cols-4 [&>*]:-mt-px [&>*]:-ml-px [&>*]:border-t [&>*]:border-l [&>*]:border-rule">
              {figures.map((figure) => (
                <StatCard
                  key={figure.key}
                  variant="flush"
                  className={KEEP_FOOTER}
                  label={figure.label}
                  value={
                    <MetricValue
                      metric={metric(figure, figure.current)}
                      previous={metric(figure, figure.previous)}
                      positiveIsGood={figure.positiveIsGood}
                      compareLabel={`vs ${written(figure, figure.previous)} the week before`}
                    />
                  }
                  footer={
                    <div aria-hidden="true" className="flex flex-col gap-1.5">
                      {WEEKS.map((week) => {
                        const value = figure[week.key]
                        return (
                          <div key={week.key} className="flex items-center gap-2">
                            <div className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
                              <div
                                className={cn("h-full rounded-full", week.paint)}
                                style={{ width: `${Math.min(100, (value / scale(figure)) * 100)}%` }}
                              />
                            </div>
                            <span className="w-14 shrink-0 text-right text-xs text-muted-foreground tabular-nums">
                              {written(figure, value)}
                            </span>
                          </div>
                        )
                      })}
                    </div>
                  }
                />
              ))}
            </div>
          </CardContent>
          <CardFooter className="flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground tabular-nums">
            <span className="flex items-center gap-1.5">
              <span aria-hidden="true" className="size-2 rounded-[2px] bg-primary" />
              {weeks.current}
            </span>
            <span className="flex items-center gap-1.5">
              <span aria-hidden="true" className="size-2 rounded-[2px] bg-chart-neutral" />
              {weeks.previous}
            </span>
            <span className="basis-full text-pretty sm:basis-auto">A night counts once a guest has slept in the room.</span>
          </CardFooter>
        </Card>
      </div>
    </section>
  )
}

export default StatCards04

/**
 * What `stat-cards-04` reads: the hotel's last seven nights against the seven
 * before them, from `db.bookings` and the `ROOMS` it lets. A night is the date
 * a stay covers — a guest who arrives on the 1st and leaves on the 3rd is in
 * the house on the nights of the 1st and the 2nd — and it counts as sold when
 * the guest was in the room: the stay is checked in or checked out. "Tonight"
 * is the night of `REFERENCE_DATE`, still to come, so the last week ends on
 * last night.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, ROOMS, db, type Booking } from "@/lib/sample-data"

const DAY_MS = 86_400_000

/** The nights compared, a week of them. */
export const WEEK_NIGHTS = 7

/** The stays whose nights were slept in. */
const STAYED: readonly Booking["status"][] = ["checked_in", "checked_out"]

export type WeekKey = "occupancy" | "adr" | "revpar" | "arrivals"

export type WeekFigure = {
  key: WeekKey
  label: string
  /** "percent" is a 0..1 share; "money" is in cents. */
  kind: "percent" | "money" | "count"
  current: number
  previous: number
  /** False where a rise is the bad news; none of these four is. */
  positiveIsGood: boolean
}

/** Midnight UTC tonight: the night the week stops short of. */
function tonight(): number {
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
}

/** The first and last night of a week: `offset` 0 is the last seven nights, 1 the seven before. */
function week(offset: number): { first: number; last: number } {
  const last = tonight() - (1 + offset * WEEK_NIGHTS) * DAY_MS
  return { first: last - (WEEK_NIGHTS - 1) * DAY_MS, last }
}

/** A week's four figures, counted night by night. */
function measure(offset: number): Record<WeekKey, number> {
  const { first, last } = week(offset)
  const stays = db.bookings.all().filter((booking) => STAYED.includes(booking.status))
  let roomNights = 0
  let revenue = 0
  for (let night = first; night <= last; night += DAY_MS) {
    for (const stay of stays) {
      if (stay.checkIn.getTime() <= night && stay.checkOut.getTime() > night) {
        roomNights += 1
        revenue += stay.ratePerNightCents
      }
    }
  }
  const available = ROOMS.length * WEEK_NIGHTS
  return {
    occupancy: roomNights / available,
    adr: roomNights === 0 ? 0 : Math.round(revenue / roomNights),
    revpar: Math.round(revenue / available),
    arrivals: stays.filter((stay) => stay.checkIn.getTime() >= first && stay.checkIn.getTime() <= last).length,
  }
}

/** Occupancy, the average rate sold, revenue per available room and arrivals: last week against the week before. */
export function weekOverWeek(): WeekFigure[] {
  const current = measure(0)
  const previous = measure(1)
  const figure = (key: WeekKey, label: string, kind: WeekFigure["kind"]): WeekFigure => ({
    key,
    label,
    kind,
    current: current[key],
    previous: previous[key],
    positiveIsGood: true,
  })
  return [
    figure("occupancy", "Occupancy", "percent"),
    figure("adr", "Average daily rate", "money"),
    figure("revpar", "Revenue per room", "money"),
    figure("arrivals", "Arrivals", "count"),
  ]
}

/** The two weeks as a reader says them — "Aug 28 – Sep 3" and "Aug 21 – 27" — in UTC. */
export function weekLabels(): { current: string; previous: string } {
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
  const label = (offset: number) => {
    const { first, last } = week(offset)
    return format.formatRange(new Date(first), new Date(last))
  }
  return { current: label(0), previous: label(1) }
}

import * as React from "react"
import { BanIcon, ClockIcon, PackageIcon, TruckIcon, Undo2Icon, type LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { ORDER_STATUS_MAP } from "@/lib/dashboards/ecommerce/vocabulary"
import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { StatCard } from "@/components/ui/stat-card"
import { StatCardGroup } from "@/components/ui/stat-card-group"
import { type StatusVariant } from "@/components/ui/status-badge"

import { WINDOW_DAYS, ordersByStatus, windowLabel, type OrderStatus, type StatusCount } from "./stat-cards-05.data"

/**
 * Each status as the order book says it, with its icon and whether more of it
 * is good news. The tone comes from the E-commerce dashboard's own map, so
 * "Unpaid" wears the same tint here as the pending orders on the order list.
 */
const STATUSES: Record<OrderStatus, { label: string; icon: LucideIcon; positiveIsGood: boolean }> = {
  pending: { label: "Unpaid", icon: ClockIcon, positiveIsGood: false },
  paid: { label: "To ship", icon: PackageIcon, positiveIsGood: true },
  fulfilled: { label: "Shipped", icon: TruckIcon, positiveIsGood: true },
  refunded: { label: "Refunded", icon: Undo2Icon, positiveIsGood: false },
  cancelled: { label: "Cancelled", icon: BanIcon, positiveIsGood: false },
}

/** The tinted square: the tone's own plane and ink, and a hairline in the tone at 30%, as a status pill wears. */
const SQUARE: Record<StatusVariant, string> = {
  success: "bg-success-muted text-success ring-success/30",
  warning: "bg-warning-muted text-warning ring-warning/30",
  danger: "bg-danger-muted text-danger ring-danger/30",
  info: "bg-info-muted text-info ring-info/30",
  neutral: "bg-muted text-muted-foreground ring-border",
  primary: "bg-brand-muted text-brand ring-brand/30",
}

/** What a tile says under its count: the money, and how long the oldest has waited where waiting is the point. */
function caption(entry: StatusCount): string {
  const money = formatCurrency(entry.cents / 100, "USD", { maximumFractionDigits: 0 })
  if (entry.count === 0) return "None in this window"
  if (entry.status === "pending" || entry.status === "paid")
    return `${money} · oldest ${entry.oldestDays} ${entry.oldestDays === 1 ? "day" : "days"}`
  return `${money} · ${formatPercent(entry.share, { maximumFractionDigits: 0 })} of orders`
}

/**
 * The order book by where each order stands: every order placed in the last
 * 30 days, counted under its status, each tile led by a square tinted in the
 * status's own tone — the word beside it carries the meaning, the tint only
 * repeats it. The pill is the change in the count against the 30 days before,
 * read the right way round: more shipped is good news, more refunds is not.
 * The last tile takes a row's width wherever the five do not fit in one.
 *
 * A server component: it counts through `./stat-cards-05.data`.
 */
export function StatCards05() {
  const titleId = React.useId()
  const counts = ordersByStatus()
  const total = counts.reduce((sum, entry) => sum + entry.count, 0)

  return (
    <section
      data-section="stat-cards-05"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Order book</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              {formatNumber(total)} orders in the last {WINDOW_DAYS} days ·{" "}
              <span className="whitespace-nowrap">{windowLabel()}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <StatCardGroup columns={5} divided>
              {counts.map((entry, index) => {
                const status = STATUSES[entry.status]
                const Icon = status.icon
                return (
                  <StatCard
                    key={entry.status}
                    className={cn(index === counts.length - 1 && "max-xl:col-span-2")}
                    label={
                      <span className="flex items-center gap-2.5">
                        <span
                          aria-hidden="true"
                          data-slot="status-square"
                          data-tone={ORDER_STATUS_MAP[entry.status]}
                          className={cn(
                            "flex size-8 shrink-0 items-center justify-center rounded-md ring-1 ring-inset [&_svg]:size-4",
                            SQUARE[ORDER_STATUS_MAP[entry.status]]
                          )}
                        >
                          <Icon />
                        </span>
                        {status.label}
                      </span>
                    }
                    value={formatNumber(entry.count)}
                    delta={entry.count - entry.previous}
                    deltaFormat="number"
                    positiveIsGood={status.positiveIsGood}
                    description={caption(entry)}
                  />
                )
              })}
            </StatCardGroup>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default StatCards05

/**
 * What `stat-cards-05` reads: the orders placed over the last 30 days, sorted
 * by where each one stands now, with the same count for the 30 days before —
 * all from `db.orders`, measured back from `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db, type Order } from "@/lib/sample-data"

/** The window, in days. */
export const WINDOW_DAYS = 30

const DAY_MS = 86_400_000

/** Where an order stands. */
export type OrderStatus = Order["status"]

/** The life of an order, then the two ways it falls away: the order the tiles read in. */
export const STATUS_ORDER: readonly OrderStatus[] = ["pending", "paid", "fulfilled", "refunded", "cancelled"]

export type StatusCount = {
  status: OrderStatus
  count: number
  /** What those orders are worth, in cents. */
  cents: number
  /** The same status's count over the 30 days before. */
  previous: number
  /** Its share of every order placed in the window. */
  share: number
  /** How long the oldest of them has been waiting, in whole days. */
  oldestDays: number
}

/** The window's orders by status, in `STATUS_ORDER`, each against the 30 days before. */
export function ordersByStatus(days = WINDOW_DAYS): StatusCount[] {
  const now = REFERENCE_DATE.getTime()
  const orders = db.orders.all()
  const inWindow = (order: Order, back: number) => {
    const age = now - order.placedAt.getTime()
    return age >= back * days * DAY_MS && age < (back + 1) * days * DAY_MS
  }
  const current = orders.filter((order) => inWindow(order, 0))
  const previous = orders.filter((order) => inWindow(order, 1))

  return STATUS_ORDER.map((status) => {
    const rows = current.filter((order) => order.status === status)
    const oldest = rows.reduce((first, order) => Math.min(first, order.placedAt.getTime()), now)
    return {
      status,
      count: rows.length,
      cents: rows.reduce((sum, order) => sum + order.totalCents, 0),
      previous: previous.filter((order) => order.status === status).length,
      share: current.length === 0 ? 0 : rows.length / current.length,
      oldestDays: Math.floor((now - oldest) / DAY_MS),
    }
  })
}

/** The window as a reader says it — "Aug 5 – Sep 4, 2026" — in UTC. */
export function windowLabel(days = WINDOW_DAYS): string {
  const to = REFERENCE_DATE.getTime()
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return format.formatRange(new Date(to - days * DAY_MS), new Date(to))
}

import * as React from "react"

import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { StatCard } from "@/components/ui/stat-card"

import { WINDOW_DAYS, receivables, windowLabel } from "./stat-cards-06.data"

const dollars = (cents: number) => formatCurrency(cents / 100, "USD", { maximumFractionDigits: 0 })
const invoices = (count: number) => `${formatNumber(count)} ${count === 1 ? "invoice" : "invoices"}`

/**
 * Receivables as a split: two figures side by side — what the last 90 days of
 * invoices brought in, and what they still owe — over one bar that splits
 * the total between them, and under it the money still owed aged by how far
 * past its due date it is, the way a finance team reads a ledger.
 *
 * A server component: it counts through `./stat-cards-06.data`. The bar is
 * the two shares the figures already state, so it is hidden from assistive
 * technology; the aged amounts are a description list.
 */
export function StatCards06() {
  const titleId = React.useId()
  const ledger = receivables()
  const total = ledger.paidCents + ledger.owedCents
  const paidShare = total === 0 ? 0 : ledger.paidCents / total
  const owedShare = total === 0 ? 0 : ledger.owedCents / total
  const share = (value: number) => formatPercent(value, { maximumFractionDigits: 0 })

  return (
    <section
      data-section="stat-cards-06"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Receivables</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              {dollars(total)} invoiced in the last {WINDOW_DAYS} days ·{" "}
              <span className="whitespace-nowrap">{windowLabel()}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="p-0">
            <div className="grid grid-cols-2 overflow-hidden [&>*]:-ml-px [&>*]:border-l [&>*]:border-rule">
              <StatCard
                variant="flush"
                label="Paid"
                value={dollars(ledger.paidCents)}
                description={`${invoices(ledger.paidCount)} · ${share(paidShare)}`}
              />
              <StatCard
                variant="flush"
                label="Still owed"
                value={dollars(ledger.owedCents)}
                description={`${invoices(ledger.owedCount)} · ${share(owedShare)}`}
              />
            </div>
            <div className="px-(--card-spacing) pb-(--card-spacing)">
              <div aria-hidden="true" data-slot="split-bar" className="flex h-2.5 gap-0.5 overflow-hidden rounded-full">
                <div className="h-full rounded-l-full bg-primary" style={{ width: `${paidShare * 100}%` }} />
                <div className="h-full flex-1 rounded-r-full bg-chart-neutral" />
              </div>
            </div>
            <dl className="grid grid-cols-2 overflow-hidden border-t border-rule lg:grid-cols-4 [&>div]:-mt-px [&>div]:-ml-px [&>div]:border-t [&>div]:border-l [&>div]:border-rule">
              {ledger.ages.map((age) => (
                <div key={age.key} className="flex min-w-0 flex-col gap-0.5 px-(--card-spacing) py-3">
                  <dt className="text-xs text-muted-foreground">{age.label}</dt>
                  <dd className="flex flex-wrap items-baseline gap-x-2 tabular-nums">
                    <span className="text-sm font-medium">{dollars(age.cents)}</span>
                    <span className="text-xs text-muted-foreground">{invoices(age.count)}</span>
                  </dd>
                </div>
              ))}
            </dl>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default StatCards06

/**
 * What `stat-cards-06` reads: every invoice issued in the last 90 days, split
 * into what has been paid and what is still owed, and the money still owed by
 * how late it is — all from `db.invoices`. A draft has not been sent and a
 * void one is not owed, so neither counts. "Now" is `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db } from "@/lib/sample-data"

/** The window, in days. */
export const WINDOW_DAYS = 90

const DAY_MS = 86_400_000

export type AgeKey = "not-due" | "late-30" | "late-60" | "late-more"

export type AgeBucket = {
  key: AgeKey
  label: string
  cents: number
  count: number
}

export type Receivables = {
  /** Paid, in cents, and how many invoices that was. */
  paidCents: number
  paidCount: number
  /** Still owed, in cents, and how many invoices. */
  owedCents: number
  owedCount: number
  /** What is owed, by how far past its due date it is. */
  ages: AgeBucket[]
}

/** The buckets a finance team ages a ledger into, in the order they are read. */
const AGES: { key: AgeKey; label: string; upTo: number }[] = [
  { key: "not-due", label: "Not yet due", upTo: 0 },
  { key: "late-30", label: "1–30 days late", upTo: 30 },
  { key: "late-60", label: "31–60 days late", upTo: 60 },
  { key: "late-more", label: "Over 60 days late", upTo: Infinity },
]

/** The window's invoices, paid against owed, with what is owed aged by its due date. */
export function receivables(days = WINDOW_DAYS): Receivables {
  const now = REFERENCE_DATE.getTime()
  const issued = db.invoices
    .all()
    .filter((invoice) => invoice.status !== "draft" && invoice.status !== "void")
    .filter((invoice) => now - invoice.issuedAt.getTime() < days * DAY_MS)
  const paid = issued.filter((invoice) => invoice.status === "paid")
  const owed = issued.filter((invoice) => invoice.status !== "paid")

  const ages = AGES.map(({ key, label }) => ({ key, label, cents: 0, count: 0 }))
  for (const invoice of owed) {
    // Whole days past due; a due date still ahead is zero or less.
    const late = Math.ceil((now - invoice.dueAt.getTime()) / DAY_MS)
    const bucket = ages[AGES.findIndex((age) => late <= age.upTo)]
    bucket.cents += invoice.amountCents
    bucket.count += 1
  }

  const sum = (rows: typeof issued) => rows.reduce((total, invoice) => total + invoice.amountCents, 0)
  return { paidCents: sum(paid), paidCount: paid.length, owedCents: sum(owed), owedCount: owed.length, ages }
}

/** The window as a reader says it — "Jun 6 – Sep 4, 2026" — in UTC. */
export function windowLabel(days = WINDOW_DAYS): string {
  const to = REFERENCE_DATE.getTime()
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return format.formatRange(new Date(to - days * DAY_MS), new Date(to))
}

import * as React from "react"
import { TrophyIcon } from "lucide-react"

import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FunnelChart } from "@/components/ui/funnel-chart"
import { StatCard } from "@/components/ui/stat-card"

import { leadConversion } from "./stat-cards-07.data"

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })

/**
 * One rate and the funnel it comes out of: the share of leads the team won,
 * as the figure, and beside it the four steps a lead passes — in, contacted,
 * qualified, won — each with what share of the leads got that far and how
 * many of the step before went on. A rate on its own hides where the leads
 * were lost; the funnel shows the step.
 *
 * A server component: it counts through `./stat-cards-07.data`, where the
 * rule for how far a lead got is written down.
 */
export function StatCards07() {
  const titleId = React.useId()
  const conversion = leadConversion()
  const won = conversion.steps[conversion.steps.length - 1]
  const [top] = conversion.steps
  const facts = [
    { term: "Won value", detail: formatCurrency(conversion.wonCents / 100, "USD", { maximumFractionDigits: 0 }) },
    { term: "Still being worked", detail: formatNumber(conversion.open) },
  ]

  return (
    <section
      data-section="stat-cards-07"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <Card>
          <CardHeader>
            <CardTitle>
              <h2 id={titleId}>Lead conversion</h2>
            </CardTitle>
            <CardDescription className="tabular-nums">
              Every lead since <span className="whitespace-nowrap">{DAY.format(conversion.since)}</span>, by how far
              it got
            </CardDescription>
          </CardHeader>
          <CardContent className="grid p-0 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
            <div className="flex flex-col">
              <StatCard
                variant="flush"
                label="Lead to won"
                icon={<TrophyIcon aria-hidden="true" />}
                value={formatPercent(conversion.winRate, { maximumFractionDigits: 1 })}
                description={`${formatNumber(won.value)} won of ${formatNumber(top.value)} leads`}
              />
              <dl className="mt-auto grid grid-cols-2 gap-(--card-spacing) border-t border-rule p-(--card-spacing)">
                {facts.map((fact) => (
                  <div key={fact.term} className="flex min-w-0 flex-col gap-0.5">
                    <dt className="text-xs text-muted-foreground">{fact.term}</dt>
                    <dd className="text-sm font-medium tabular-nums">{fact.detail}</dd>
                  </div>
                ))}
              </dl>
            </div>
            <div className="border-t border-rule p-(--card-spacing) lg:border-t-0 lg:border-l">
              <FunnelChart
                steps={conversion.steps.map(({ label, value }) => ({ label, value }))}
                valueFormatter={(value) => formatNumber(value)}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default StatCards07

/**
 * What `stat-cards-07` reads: the sales team's leads from `db.leads`, run
 * down the four steps a lead passes — in, contacted, qualified, won. A lead's
 * status is where it stands now, so the steps are counted as how far each
 * lead got: a qualified lead was contacted first, a won one was both, and a
 * lost one was at least spoken to — a rep marks a lead lost after a
 * conversation, never before one. "Now" is `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db, type Lead } from "@/lib/sample-data"

export type StepKey = "leads" | "contacted" | "qualified" | "won"

export type FunnelStep = { key: StepKey; label: string; value: number }

export type LeadConversion = {
  /** The four steps, widest first. */
  steps: FunnelStep[]
  /** Won as a share of every lead. */
  winRate: number
  /** What the won leads are worth, in cents. */
  wonCents: number
  /** Leads still being worked: not won and not lost. */
  open: number
  /** When the oldest lead came in. */
  since: Date
}

/** How far a status says a lead got: 0 in, 1 contacted, 2 qualified, 3 won. */
const REACHED: Record<Lead["status"], number> = { new: 0, contacted: 1, lost: 1, qualified: 2, won: 3 }

/** Every lead, down the funnel, with the rate it converts at and what it won. */
export function leadConversion(): LeadConversion {
  const leads = db.leads.all().filter((lead) => lead.createdAt.getTime() <= REFERENCE_DATE.getTime())
  const reaching = (step: number) => leads.filter((lead) => REACHED[lead.status] >= step).length
  const won = leads.filter((lead) => lead.status === "won")
  const since = leads.reduce(
    (first, lead) => (lead.createdAt.getTime() < first.getTime() ? lead.createdAt : first),
    REFERENCE_DATE
  )
  return {
    steps: [
      { key: "leads", label: "Leads", value: leads.length },
      { key: "contacted", label: "Contacted", value: reaching(1) },
      { key: "qualified", label: "Qualified", value: reaching(2) },
      { key: "won", label: "Won", value: reaching(3) },
    ],
    winRate: leads.length === 0 ? 0 : won.length / leads.length,
    wonCents: won.reduce((sum, lead) => sum + lead.valueCents, 0),
    open: leads.filter((lead) => lead.status !== "won" && lead.status !== "lost").length,
    since,
  }
}