CRM dashboard

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { DashboardGrid, DashboardGridItem } from "@/components/ui/dashboard-grid"
import { PageHeader } from "@/components/ui/page-header"

import { signOut } from "./actions"
import { CrmStats } from "./components/crm-stats"
import { FollowUps } from "./components/follow-ups"
import { LeadsBySource } from "./components/leads-by-source"
import { LeadsTable } from "./components/leads-table"
import { Pipeline } from "./components/pipeline"
import {
  crmStats,
  currentUser,
  followUps,
  lastUpdated,
  leadRows,
  leadsBySource,
  pipeline,
  quarterTarget,
  shellNotifications,
} from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/crm/nav"

/**
 * The CRM page. A server component: it reads the leads, the deals and the
 * customers through `db`, works the quarter out, and hands plain rows to the
 * two islands that act on them — the follow-up list and the leads table.
 */
export default function CrmPage() {
  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.overview}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="CRM"
        description="Leads, follow-ups and the quarter's target."
        meta={lastUpdated()}
      />

      <CrmStats target={quarterTarget()} stats={crmStats()} />

      <DashboardGrid>
        <DashboardGridItem colSpan={{ base: 12, lg: 4 }}>
          <LeadsBySource sources={leadsBySource()} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, lg: 4 }}>
          <FollowUps rows={followUps()} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, lg: 4 }}>
          <Pipeline stages={pipeline()} />
        </DashboardGridItem>

        <DashboardGridItem colSpan={12}>
          <LeadsTable rows={leadRows()} />
        </DashboardGridItem>
      </DashboardGrid>
    </AppShell>
  )
}

/**
 * What /crm reads. The leads are `db.leads`, the pipeline and the quarter's
 * won value are `db.deals`, the customer count is `db.customers`, and the
 * target is a rule over the won deals rather than a number written down.
 * "Now" is `REFERENCE_DATE`, and the quarter is the one it falls in.
 *
 * The client islands import only the types below; `db` never crosses into the
 * browser.
 */
import { formatDate, formatNumber, getInitials } from "@/lib/format"
import { REFERENCE_DATE, db, type Deal, type Lead, type Member } from "@/lib/sample-data"

import { money } from "./money"

const DAY = 86_400_000
const NOW = REFERENCE_DATE.getTime()

/** 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)
}

/** Midnight UTC on the first of the month `offset` months from the current one. */
function monthStart(offset: number): number {
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth() + offset, 1)
}

/** "Q3 2026" — the quarter every number on the page is measured over. */
export const QUARTER_LABEL = `Q${Math.floor(REFERENCE_DATE.getUTCMonth() / 3) + 1} ${REFERENCE_DATE.getUTCFullYear()}`

const OPEN_STAGES: Deal["stage"][] = ["lead", "qualified", "proposal", "negotiation"]

/** The change from `before` to `now` as a ratio; flat when there was nothing before. */
const change = (now: number, before: number): number => (before === 0 ? 0 : (now - before) / before)

/** Closed-won value for the deals that closed inside a window; a won deal closes on its expected day. */
function wonBetween(from: number, to: number): number {
  return db.deals
    .all()
    .filter((deal) => deal.stage === "won")
    .filter((deal) => deal.expectedCloseAt.getTime() >= from && deal.expectedCloseAt.getTime() < to)
    .reduce((sum, deal) => sum + deal.amountCents, 0)
}

export type QuarterTarget = {
  wonCents: number
  targetCents: number
  /** Whole percent of the target reached, capped at 100 for the ring. */
  percent: number
}

/**
 * The quarter's target, set from the quarter itself: a third again over what
 * has been won so far, rounded to a round figure — the number a sales lead
 * would put on the wall rather than one the seed wrote.
 */
export function quarterTarget(): QuarterTarget {
  const wonCents = wonBetween(quarterStart(0), NOW)
  const targetCents = Math.round((wonCents * 1.35) / 1000) * 1000
  const percent = targetCents === 0 ? 0 : Math.min(100, Math.round((wonCents / targetCents) * 100))
  return { wonCents, targetCents, percent }
}

export type CrmStat = {
  key: "customers" | "open" | "won"
  label: string
  value: string
  /** Change against the period before, as a ratio. */
  delta?: number
  description: string
}

/** The three counted headline numbers; the target beside them is `quarterTarget`. */
export function crmStats(): CrmStat[] {
  const customers = db.customers.all()
  const atLastMonthEnd = customers.filter((customer) => customer.createdAt.getTime() < monthStart(0)).length
  const open = db.deals.all().filter((deal) => OPEN_STAGES.includes(deal.stage))
  const openValue = open.reduce((sum, deal) => sum + deal.amountCents, 0)
  const won = wonBetween(quarterStart(0), NOW)
  const wonBefore = wonBetween(quarterStart(-1), quarterStart(0))

  return [
    {
      key: "customers",
      label: "Customers",
      value: formatNumber(customers.length),
      delta: change(customers.length, atLastMonthEnd),
      description: "vs last month",
    },
    {
      key: "open",
      label: "Open deals",
      value: formatNumber(open.length),
      description: `${money(openValue)} in play`,
    },
    {
      key: "won",
      label: "Won this quarter",
      value: money(won),
      delta: change(won, wonBefore),
      description: "vs last quarter",
    },
  ]
}

export type SourceCount = { source: Lead["source"]; count: number }

/** How many leads each channel brought in, largest first. */
export function leadsBySource(): SourceCount[] {
  const counts = new Map<Lead["source"], number>()
  for (const lead of db.leads.all()) counts.set(lead.source, (counts.get(lead.source) ?? 0) + 1)
  return [...counts.entries()]
    .map(([source, count]) => ({ source, count }))
    .sort((a, b) => b.count - a.count)
}

export type FollowUp = {
  id: string
  name: string
  company: string
  dueAt: Date
  /** Whole days from today to the due day; negative when it has slipped past. */
  daysUntil: number
  overdue: boolean
}

const utcDay = (at: number) => Math.floor(at / DAY)

/** Every lead whose next action falls inside the week, soonest first. */
export function followUps(): FollowUp[] {
  return db.leads
    .all()
    // Unset and null both mean no follow-up; only a Date is one to list.
    .filter((lead): lead is Lead & { nextActionAt: Date } => lead.nextActionAt instanceof Date)
    .filter((lead) => lead.nextActionAt.getTime() <= NOW + 7 * DAY)
    .sort((a, b) => a.nextActionAt.getTime() - b.nextActionAt.getTime())
    .map((lead) => ({
      id: lead.id,
      name: lead.name,
      company: lead.company,
      dueAt: lead.nextActionAt,
      daysUntil: utcDay(lead.nextActionAt.getTime()) - utcDay(NOW),
      overdue: lead.nextActionAt.getTime() < NOW,
    }))
}

export type PipelineStage = {
  stage: Exclude<Deal["stage"], "lost">
  count: number
  valueCents: number
  /** This stage's share of the pipeline's value, as a whole percent. */
  share: number
}

const PIPELINE: PipelineStage["stage"][] = ["lead", "qualified", "proposal", "negotiation", "won"]

/** The pipeline stage by stage, lost deals aside — they are not on it any more. */
export function pipeline(): PipelineStage[] {
  const deals = db.deals.all().filter((deal) => deal.stage !== "lost")
  const total = deals.reduce((sum, deal) => sum + deal.amountCents, 0)
  return PIPELINE.map((stage) => {
    const rows = deals.filter((deal) => deal.stage === stage)
    const valueCents = rows.reduce((sum, deal) => sum + deal.amountCents, 0)
    return {
      stage,
      count: rows.length,
      valueCents,
      share: total === 0 ? 0 : Math.round((valueCents / total) * 100),
    }
  })
}

/** One row of the leads table. */
export type LeadRow = Pick<
  Lead,
  "id" | "name" | "email" | "avatarUrl" | "company" | "source" | "status" | "valueCents" | "createdAt"
>

/** Every lead on the books; the table sorts and pages them itself. */
export function leadRows(): LeadRow[] {
  return db.leads
    .all()
    .map(({ id, name, email, company, source, status, valueCents, createdAt }) => ({
      id,
      name,
      email,
      company,
      source,
      status,
      valueCents,
      createdAt,
    }))
}

/** The line under the title: the quarter, and when the numbers were read. */
export function lastUpdated(): string {
  return `${QUARTER_LABEL} to date · synced ${formatDate(REFERENCE_DATE, "medium", { timeZone: "UTC" })}`
}

/** The bell's contents: the newest notifications, unread first in the panel. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

function ownerRow(): Member {
  return db.members.all().find((member) => member.role === "owner") ?? db.members.all()[0]
}

/** The person looking at the page: whoever owns this workspace. */
export function currentUser() {
  const owner = ownerRow()
  return { name: owner.name, email: owner.email, initials: getInitials(owner.name), avatarUrl: owner.avatarUrl }
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { db, type Result } from "@/lib/sample-data"

/**
 * What this page changes on its own. Server actions, so the page can stay a
 * server component and still hand its client islands something to call, and
 * `Result` so every caller reads one success-or-error shape. Converting a
 * lead is not here: the leads page does it too, so it is the dashboard's —
 * `convertLead` in `@/lib/dashboards/crm/actions`.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

const notFound = (id: string): Result<never> => ({
  ok: false,
  error: { code: "not_found", message: `No lead with id "${id}".` },
})

/**
 * Ticks a follow-up off: the lead keeps its stage, and its next action is
 * written as `null` — the repository's `update` keeps `undefined` out of a
 * patch, so null is how the entity spells "done", and every reader of
 * `nextActionAt` takes it for no follow-up.
 */
export async function completeFollowUp(id: string): Promise<Result<{ id: string; name: string }>> {
  const lead = await db.leads.get(id)
  if (!lead) return notFound(id)
  if (!lead.nextActionAt) {
    return {
      ok: false,
      error: { code: "nothing_due", message: `${lead.name} has no follow-up to tick off.` },
    }
  }

  const updated = await db.leads.update(id, { nextActionAt: null })
  if (!updated.ok) return updated
  return { ok: true, data: { id, name: lead.name } }
}

import { BriefcaseIcon, HandshakeIcon, UsersIcon } from "lucide-react"

import { ScoreRing } from "@/components/ui/score-ring"
import { StatCard } from "@/components/ui/stat-card"
import { StatCardGroup } from "@/components/ui/stat-card-group"

import { type CrmStat, type QuarterTarget } from "../data"

import { money } from "./crm-vocabulary"

// One icon per headline, keyed by the stat rather than its position, so the
// row can be reordered without the icons following the wrong numbers.
const ICONS: Record<CrmStat["key"], React.ReactNode> = {
  customers: <UsersIcon />,
  open: <BriefcaseIcon />,
  won: <HandshakeIcon />,
}

export type CrmStatsProps = { target: QuarterTarget; stats: CrmStat[] }

/**
 * The quarter's target and the three counted numbers beside it. No state, so
 * the tiles render on the server. The target tile puts the ring in the value
 * slot beside the target itself, and the caption says how much of it is won
 * and how much is still to go — the won figure's own tile is the last one.
 */
export function CrmStats({ target, stats }: CrmStatsProps) {
  return (
    <StatCardGroup data-widget="widget-crm-overview-crm-stats" columns={4}>
      <StatCard
        id="target"
        label="Quarter target"
        value={
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <ScoreRing
              value={target.percent}
              max={100}
              size={56}
              strokeWidth={6}
              format={(value) => `${value}%`}
              aria-label="Quarter target reached"
            />
            <span className="text-xl sm:text-2xl">{money(target.targetCents)}</span>
          </div>
        }
        description={`${money(target.wonCents)} won · ${money(Math.max(0, target.targetCents - target.wonCents))} to go`}
      />
      {stats.map((stat) => (
        <StatCard
          key={stat.key}
          id={stat.key}
          label={stat.label}
          value={stat.value}
          delta={stat.delta}
          description={stat.description}
          icon={ICONS[stat.key]}
        />
      ))}
    </StatCardGroup>
  )
}

import { type StatusVariant } from "@/components/ui/status-badge"

/**
 * The words this page puts on a source, a status and a stage. Vocabulary, not
 * data — it lives beside the islands that print it rather than in `data.ts`,
 * which reads `db` and must never reach the browser. The money formatter the
 * server page shares with the islands is `../money`, re-exported here so the
 * islands read every word they print from one place.
 */
export { money } from "../money"

export const SOURCE_LABELS: Record<string, string> = {
  website: "Website",
  referral: "Referral",
  ads: "Ads",
  social: "Social",
  event: "Event",
}

/** A funnel's own words are not status words, so every one of them is mapped. */
export const LEAD_STATUS_MAP: Record<string, StatusVariant> = {
  new: "info",
  contacted: "primary",
  qualified: "warning",
  won: "success",
  lost: "danger",
}

export const STAGE_LABELS: Record<string, string> = {
  lead: "Lead",
  qualified: "Qualified",
  proposal: "Proposal",
  negotiation: "Negotiation",
  won: "Closed won",
}

"use client"

import * as React from "react"

import { Callout } from "@/components/ui/callout"
import { Checkbox } from "@/components/ui/checkbox"
import { PriorityBadge, type Priority } from "@/components/ui/priority-badge"
import { Widget } from "@/components/ui/widget"

import { completeFollowUp } from "../actions"
import { type FollowUp } from "../data"

/** How many rows the card shows before it counts the rest in its footer. */
const SHOWN = 6

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

/** A priority read off the days left: overdue or due by tomorrow is high, inside three days medium. */
function priorityOf(row: FollowUp): Extract<Priority, "high" | "medium" | "low"> {
  if (row.overdue || row.daysUntil <= 1) return "high"
  if (row.daysUntil <= 3) return "medium"
  return "low"
}

function dueText(row: FollowUp): string {
  if (row.overdue) return `Overdue · ${DUE_DAY.format(row.dueAt)}`
  if (row.daysUntil === 0) return "Due today"
  if (row.daysUntil === 1) return "Due tomorrow"
  return `Due ${DUE_DAY.format(row.dueAt)}`
}

export type FollowUpsProps = { rows: FollowUp[] }

/**
 * The week's follow-ups as a checklist. Ticking one writes through the server
 * and takes the row off the list; the name lands in a status line, because a
 * row that quietly vanished would not tell anyone what happened, and a refusal
 * gets its own alert rather than sharing that line.
 */
export function FollowUps({ rows }: FollowUpsProps) {
  const [list, setList] = React.useState(rows)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState("")

  const shown = list.slice(0, SHOWN)
  const rest = list.length - shown.length

  async function tick(row: FollowUp) {
    setRefusal("")
    setNotice("")
    const result = await completeFollowUp(row.id)
    if (!result.ok) return setRefusal(result.error.message)
    setList((current) => current.filter((entry) => entry.id !== row.id))
    setNotice(`Done — ${result.data.name} is off the list.`)
  }

  return (
    <Widget
      data-widget="widget-crm-overview-follow-ups"
      title="Follow-ups"
      description={`${list.length} due this week`}
      footer={rest > 0 ? `${rest} more this week` : undefined}
      className="h-full"
    >
      <div className="flex flex-col gap-2">
        {refusal ? (
          <Callout variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}

        <ul data-slot="follow-ups" aria-label="Follow-ups due this week" className="flex flex-col">
          {shown.map((row) => (
            <li
              key={row.id}
              className="flex items-start gap-3 border-b py-2.5 first:pt-0 last:border-b-0 last:pb-0"
            >
              <Checkbox
                aria-label={`Mark ${row.name} done`}
                className="mt-0.5"
                onCheckedChange={(checked) => {
                  if (checked) void tick(row)
                }}
              />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{row.name}</p>
                <p className="truncate text-xs text-muted-foreground">
                  <span>{row.company}</span>
                  <span aria-hidden="true">{" · "}</span>
                  <span>{dueText(row)}</span>
                </p>
              </div>
              <PriorityBadge priority={priorityOf(row)} size="sm" className="mt-0.5" />
            </li>
          ))}
        </ul>
        {list.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted-foreground">Nothing due this week.</p>
        ) : null}

        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </div>
    </Widget>
  )
}

"use client"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { DonutChart } from "@/components/ui/donut-chart"
import { CHART_BG, CHART_TOKENS } from "@/components/ui/percentage-bar"
import { Widget } from "@/components/ui/widget"

import { type SourceCount } from "../data"

import { SOURCE_LABELS } from "./crm-vocabulary"

export type LeadsBySourceProps = { sources: SourceCount[] }

/**
 * Where the funnel is fed from: a ring, and under it one count per channel.
 * The swatches take the palette in the same order the ring does, so the row
 * of counts is the ring's legend rather than a second reading of it. A client
 * island only because the ring is one and takes a formatter, which a server
 * component cannot hand across the boundary; the counts arrive computed.
 */
export function LeadsBySource({ sources }: LeadsBySourceProps) {
  const total = sources.reduce((sum, source) => sum + source.count, 0)

  return (
    <Widget data-widget="widget-crm-overview-leads-by-source" title="Leads by source" description="Where the funnel is fed from" className="h-full">
      <DonutChart
        data={sources.map((source) => ({ name: SOURCE_LABELS[source.source], value: source.count }))}
        height={220}
        innerRadius={66}
        centerLabel="Leads"
        centerValue={formatNumber(total)}
        valueFormatter={(value) => formatNumber(value)}
        showLegend={false}
      />
      <ul
        data-slot="source-counts"
        aria-label="Leads by source, counted"
        className="mt-3 grid grid-cols-5 gap-1"
      >
        {sources.map((source, index) => (
          <li key={source.source} className="flex min-w-0 flex-col items-center gap-0.5 text-center">
            <span
              aria-hidden="true"
              className={cn("size-2 rounded-full", CHART_BG[CHART_TOKENS[index % CHART_TOKENS.length]])}
            />
            <span className="truncate text-xs text-muted-foreground">{SOURCE_LABELS[source.source]}</span>
            <span className="text-base font-semibold tabular-nums">{formatNumber(source.count)}</span>
          </li>
        ))}
      </ul>
    </Widget>
  )
}

"use client"

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

import { Badge } from "@/components/ui/badge"
import { Callout } from "@/components/ui/callout"
import {
  DataTable,
  DataTableColumnHeader,
  DataTableRowActions,
  type DataTableColumnDef,
  type DataTableFacet,
} from "@/components/ui/data-table"
import { StatusBadge } from "@/components/ui/status-badge"
import { DateCell, TruncateCell } from "@/components/ui/table-cells"
import { UserCell } from "@/components/ui/user-cell"
import { Widget } from "@/components/ui/widget"

import { convertLead } from "@/lib/dashboards/crm/actions"
import { type LeadRow } from "../data"

import { LEAD_STATUS_MAP, SOURCE_LABELS, money } from "./crm-vocabulary"

const SOURCE_FACET: DataTableFacet<LeadRow>[] = [
  {
    columnId: "source",
    title: "Source",
    options: Object.entries(SOURCE_LABELS).map(([value, label]) => ({ label, value })),
  },
]

export type LeadsTableProps = { rows: LeadRow[] }

/**
 * Every lead, newest first. The search box reads the name and the company
 * together, because those are the two things a rep remembers a lead by. The
 * one row action converts a lead through the server: the row's pill turns to
 * won and the status line names the deal that opened, while a refusal — a
 * lead already closed — gets its own alert above the table.
 */
export function LeadsTable({ rows }: LeadsTableProps) {
  // The title names the table too, so a screen reader announces it by name.
  const titleId = React.useId()
  const [leads, setLeads] = React.useState(rows)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState("")

  const convert = React.useCallback(async (row: LeadRow) => {
    setRefusal("")
    setNotice("")
    const result = await convertLead(row.id)
    if (!result.ok) return setRefusal(result.error.message)
    setLeads((current) =>
      current.map((lead) => (lead.id === row.id ? { ...lead, status: "won" } : lead))
    )
    setNotice(`Converted ${result.data.name}: ${result.data.dealName} is on the pipeline.`)
  }, [])

  const columns = React.useMemo<DataTableColumnDef<LeadRow>[]>(
    () => [
      {
        id: "lead",
        // Name and company in one accessor, so the search box matches either.
        accessorFn: (row) => `${row.name} ${row.company} ${row.email}`,
        header: ({ column }) => <DataTableColumnHeader column={column} title="Lead" />,
        cell: ({ row }) => <UserCell size="sm" name={row.original.name} email={row.original.email} src={row.original.avatarUrl} />,
        meta: { label: "Lead" },
      },
      {
        accessorKey: "company",
        header: ({ column }) => <DataTableColumnHeader column={column} title="Company" />,
        cell: ({ row }) => <TruncateCell maxWidth={180}>{row.original.company}</TruncateCell>,
        meta: { label: "Company" },
      },
      {
        accessorKey: "source",
        header: ({ column }) => <DataTableColumnHeader column={column} title="Source" />,
        cell: ({ row }) => <Badge variant="outline">{SOURCE_LABELS[row.original.source]}</Badge>,
        meta: { label: "Source" },
      },
      {
        accessorKey: "status",
        header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
        cell: ({ row }) => <StatusBadge status={row.original.status} map={LEAD_STATUS_MAP} />,
        meta: { label: "Status" },
      },
      {
        accessorKey: "valueCents",
        header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
        cell: ({ row }) => <span className="tabular-nums">{money(row.original.valueCents)}</span>,
        meta: { align: "right", label: "Value" },
      },
      {
        accessorKey: "createdAt",
        header: ({ column }) => <DataTableColumnHeader column={column} title="Created" />,
        cell: ({ row }) => <DateCell date={row.original.createdAt} className="text-muted-foreground" />,
        meta: { align: "right", label: "Created" },
      },
      {
        id: "actions",
        size: 44,
        enableSorting: false,
        enableHiding: false,
        cell: ({ row }) => (
          <DataTableRowActions
            label={`Open menu for ${row.original.name}`}
            actions={[
              { label: "Convert to deal", icon: <HandshakeIcon />, onSelect: () => void convert(row.original) },
            ]}
          />
        ),
      },
    ],
    [convert]
  )

  return (
    <Widget titleId={titleId} data-widget="widget-crm-overview-leads-table" title="Leads" description="Every lead on the books, newest first">
      <div className="flex flex-col gap-3">
        {refusal ? (
          <Callout variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}
        <DataTable
          aria-labelledby={titleId}
          size="sm"
          columns={columns}
          data={leads}
          pageSize={8}
          searchKey="lead"
          searchPlaceholder="Search leads…"
          facets={SOURCE_FACET}
          enableRowSelection={false}
          getRowId={(lead) => lead.id}
          initialSorting={[{ id: "createdAt", desc: true }]}
        />
        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </div>
    </Widget>
  )
}

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { CHART_BG, CHART_TOKENS, PercentageBar } from "@/components/ui/percentage-bar"
import { Progress } from "@/components/ui/progress"
import { Widget } from "@/components/ui/widget"

import { type PipelineStage } from "../data"

import { STAGE_LABELS, money } from "./crm-vocabulary"

export type PipelineProps = { stages: PipelineStage[] }

/**
 * The pipeline as one segmented bar and a row per stage. The bar and the rows
 * take the palette in the same order, so a segment can be read back to its
 * row by colour; the row says the count, the money and the share in words.
 */
export function Pipeline({ stages }: PipelineProps) {
  const deals = stages.reduce((sum, stage) => sum + stage.count, 0)

  return (
    <Widget
      data-widget="widget-crm-overview-pipeline"
      title="Pipeline"
      description="Every deal by stage, lost ones aside"
      footer={`${formatNumber(deals)} deals on the board`}
      className="h-full"
    >
      <PercentageBar
        segments={stages.map((stage) => ({ label: STAGE_LABELS[stage.stage], value: stage.valueCents }))}
        showLegend={false}
        aria-label="Pipeline value by stage"
      />
      <ul data-slot="pipeline-stages" className="mt-4 flex flex-col gap-3">
        {stages.map((stage, index) => (
          <li key={stage.stage} className="flex items-center gap-3">
            <span
              aria-hidden="true"
              className={cn("size-2 shrink-0 rounded-full", CHART_BG[CHART_TOKENS[index % CHART_TOKENS.length]])}
            />
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-medium">{STAGE_LABELS[stage.stage]}</p>
              <p className="truncate text-xs text-muted-foreground">
                {`${formatNumber(stage.count)} deals · ${money(stage.valueCents)}`}
              </p>
            </div>
            <div className="flex w-24 shrink-0 items-center gap-2">
              <Progress
                value={stage.share}
                aria-label={`${STAGE_LABELS[stage.stage]} share of the pipeline`}
                className="min-w-0 flex-1"
              />
              <span className="w-9 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
                {`${stage.share}%`}
              </span>
            </div>
          </li>
        ))}
      </ul>
    </Widget>
  )
}