Classic overview

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 { ActivityChart } from "./components/activity-chart"
import { ClassicStats } from "./components/classic-stats"
import { LatestPayments } from "./components/latest-payments"
import { PaymentLink } from "./components/payment-link"
import { RevenueChart } from "./components/revenue-chart"
import { SubscriptionsChart } from "./components/subscriptions-chart"
import { SupportChat } from "./components/support-chat"
import { TeamMembers } from "./components/team-members"
import {
  classicStats,
  currentUser,
  lastUpdated,
  latestPayments,
  shellNotifications,
  subscriptionsByMonth,
  supportThread,
  teamMembers,
  weekActivity,
  weeklyRevenue,
  windowLabel,
} from "./data"
import { NAV, ROUTE } from "./nav"

/**
 * The classic overview: a workspace's numbers and its people on one page.
 * The page is a server component: every figure and row is read through `db`
 * here and handed to the cards as plain data; only the charts and the cards
 * that change something are client islands, each calling the page's actions.
 * The cards that hold people and forms go three to a row only from 1280px,
 * two from 1024px, so a name, a role and a bubble always have room; the two
 * charts share the row evenly until 1280px, so the bars keep their scale.
 */
export default function OverviewPage() {
  const user = currentUser()

  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTE}
      user={user}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="Overview"
        description={`Revenue, subscriptions and the team at Northwind, ${windowLabel()}.`}
        meta={lastUpdated()}
      />

      <ClassicStats stats={classicStats()} />

      <DashboardGrid>
        <DashboardGridItem colSpan={{ base: 12, lg: 6, xl: 8 }}>
          <RevenueChart weeks={weeklyRevenue()} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, lg: 6, xl: 4 }}>
          <SubscriptionsChart months={subscriptionsByMonth()} />
        </DashboardGridItem>

        <DashboardGridItem colSpan={{ base: 12, lg: 6, xl: 4 }}>
          <TeamMembers members={teamMembers()} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, lg: 6, xl: 4 }}>
          <SupportChat thread={supportThread()} agent={{ name: user.name, avatarUrl: user.avatarUrl }} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, xl: 4 }}>
          <PaymentLink />
        </DashboardGridItem>

        <DashboardGridItem colSpan={{ base: 12, xl: 5 }}>
          <ActivityChart days={weekActivity()} />
        </DashboardGridItem>
        <DashboardGridItem colSpan={{ base: 12, xl: 7 }}>
          <LatestPayments rows={latestPayments()} />
        </DashboardGridItem>
      </DashboardGrid>
    </AppShell>
  )
}

/**
 * What the classic overview reads. Money is `db.orders` that were paid for
 * and kept, subscriptions are `db.subscriptions` by the day they started,
 * the team is `db.members`, the chat is with the `db.customers` account seen
 * most recently, and "active now" is `db.sessions` for the hour under way.
 * The one series no entity records a fortnight of — sessions a day — is
 * scaled from the last twenty-four hours of `db.sessions` by a weekly shape
 * drawn once from `seeded("overview-classic")`, and today's figure is the
 * store's own. "Now" is REFERENCE_DATE.
 */
import { formatCurrency, formatNumber, getInitials } from "@/lib/format"
import { REFERENCE_DATE, daysAgo, db, seeded, type Member, type Order } from "@/lib/sample-data"

const DAY_MS = 86_400_000
const HOUR_MS = 3_600_000
/** The window the headline figures cover, and the one they are measured against. */
export const WINDOW_DAYS = 30

/** Money the store kept: an order paid for, shipped or not, and not refunded or cancelled. */
const kept = (order: Order) => order.status === "paid" || order.status === "fulfilled"
const between = (at: Date, from: Date, to: Date) => at.getTime() > from.getTime() && at.getTime() <= to.getTime()
const cents = (orders: Order[]) => orders.reduce((sum, order) => sum + order.totalCents, 0)
/** The change from `before` to `now` as a ratio — none at all when there was nothing before to measure from. */
const change = (now: number, before: number) => (before > 0 ? (now - before) / before : undefined)

/** Cents as whole dollars: a headline figure reads at a glance, and fits its tile at 1024px. */
const dollars = (value: number) => formatCurrency(Math.round(value / 100), "USD", { maximumFractionDigits: 0 })

export type ClassicStat = {
  key: "revenue" | "subscriptions" | "sales" | "active"
  label: string
  value: string
  /** The change against the window before, as a ratio. */
  delta?: number
  description: string
}

/** The latest hour db.sessions has a reading for, and the hour before it. */
function hours() {
  const rows = db.sessions.all()
  const latest = Math.max(...rows.map((row) => row.at.getTime()))
  const at = (time: number) => rows.filter((row) => row.at.getTime() === time).reduce((sum, row) => sum + row.sessions, 0)
  return { now: at(latest), before: at(latest - HOUR_MS) }
}

/** The four headline figures: revenue, new subscriptions and paid orders over 30 days, and sessions this hour. */
export function classicStats(): ClassicStat[] {
  const start = daysAgo(WINDOW_DAYS)
  const before = daysAgo(WINDOW_DAYS * 2)
  const orders = db.orders.all().filter(kept)
  const recent = orders.filter((order) => between(order.placedAt, start, REFERENCE_DATE))
  const earlier = orders.filter((order) => between(order.placedAt, before, start))
  const subscriptions = db.subscriptions.all()
  const started = subscriptions.filter((row) => between(row.startedAt, start, REFERENCE_DATE)).length
  const startedBefore = subscriptions.filter((row) => between(row.startedAt, before, start)).length
  const live = hours()

  return [
    {
      key: "revenue",
      label: "Total revenue",
      value: dollars(cents(recent)),
      delta: change(cents(recent), cents(earlier)),
      description: `vs the ${WINDOW_DAYS} days before`,
    },
    {
      key: "subscriptions",
      label: "Subscriptions",
      value: `+${formatNumber(started)}`,
      delta: change(started, startedBefore),
      description: `new, vs the ${WINDOW_DAYS} days before`,
    },
    {
      key: "sales",
      label: "Sales",
      value: formatNumber(recent.length),
      delta: change(recent.length, earlier.length),
      description: `orders paid, vs the ${WINDOW_DAYS} days before`,
    },
    {
      key: "active",
      label: "Active now",
      value: formatNumber(live.now),
      delta: change(live.now, live.before),
      description: "sessions this hour, vs the last",
    },
  ]
}

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

export type RevenueWeek = { week: string; revenue: number; before: number }

/** Revenue a week at a time over the last twelve weeks, each beside the same week twelve weeks earlier, in dollars. */
export function weeklyRevenue(): RevenueWeek[] {
  const orders = db.orders.all().filter(kept)
  const sum = (from: number, to: number) => cents(orders.filter((order) => between(order.placedAt, daysAgo(from), daysAgo(to)))) / 100
  return Array.from({ length: 12 }, (_, index) => {
    const ends = (11 - index) * 7
    return { week: SHORT_DAY.format(daysAgo(ends)), revenue: sum(ends + 7, ends), before: sum(ends + 91, ends + 84) }
  })
}

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

/** New subscriptions in each of the last six calendar months, this one to date. */
export function subscriptionsByMonth(): { month: string; subscriptions: number }[] {
  const rows = db.subscriptions.all()
  const year = REFERENCE_DATE.getUTCFullYear()
  const month = REFERENCE_DATE.getUTCMonth()
  return Array.from({ length: 6 }, (_, index) => {
    const from = Date.UTC(year, month - 5 + index, 1)
    const to = Date.UTC(year, month - 4 + index, 1)
    return {
      month: MONTH.format(new Date(from)),
      subscriptions: rows.filter((row) => {
        const at = row.startedAt.getTime()
        return at >= from && at < to && at <= REFERENCE_DATE.getTime()
      }).length,
    }
  })
}

export type TeamMember = Pick<Member, "id" | "name" | "email" | "avatarUrl" | "role">

/** The owner, then the four teammates active most recently. */
export function teamMembers(): TeamMember[] {
  const active = db.members.all().filter((member) => member.status === "active")
  const owners = active.filter((member) => member.role === "owner")
  const others = active
    .filter((member) => member.role !== "owner")
    .sort((a, b) => b.lastActiveAt.getTime() - a.lastActiveAt.getTime())
  return [...owners, ...others]
    .slice(0, 5)
    .map(({ id, name, email, avatarUrl, role }) => ({ id, name, email, avatarUrl, role }))
}

export type ChatLine = { id: string; author: string; avatarUrl?: string; fromCustomer: boolean; text: string; at: Date }
export type SupportThread = {
  customer: { id: string; name: string; company: string; avatarUrl?: string }
  lines: ChatLine[]
}

const LONG_MONTH = new Intl.DateTimeFormat("en-US", { month: "long", timeZone: "UTC" })

/**
 * The conversation open on the support desk: with the paying account seen
 * most recently, about its own seat count — the one fact in it that comes
 * off the row — on this month's invoice, for people who left the month
 * before, both months named from REFERENCE_DATE. Written in the words a real
 * thread uses.
 */
export function supportThread(): SupportThread {
  const customer = db.customers
    .all()
    .filter((row) => row.status === "active" && row.seats > 2)
    .sort((a, b) => b.lastSeenAt.getTime() - a.lastSeenAt.getTime())[0]
  const agent = ownerRow()
  const first = customer.name.split(" ")[0]
  const thisMonth = LONG_MONTH.format(REFERENCE_DATE)
  const lastMonth = LONG_MONTH.format(new Date(Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth() - 1, 1)))
  const script: [boolean, string, number][] = [
    [true, `Our ${thisMonth} invoice bills ${customer.seats + 2} seats. We have ${customer.seats}.`, 14],
    [false, `Thanks, ${first} — I see ${customer.seats} on the account too.`, 11],
    [true, `Two people left in ${lastMonth}.`, 9],
    [false, "Their removal landed after the invoice ran. Crediting two seats now.", 6],
  ]
  return {
    customer: { id: customer.id, name: customer.name, company: customer.company, avatarUrl: customer.avatarUrl },
    lines: script.map(([fromCustomer, text, minutes], index) => ({
      id: `line-${index + 1}`,
      author: fromCustomer ? customer.name : agent.name,
      avatarUrl: fromCustomer ? customer.avatarUrl : agent.avatarUrl,
      fromCustomer,
      text,
      at: new Date(REFERENCE_DATE.getTime() - minutes * 60_000),
    })),
  }
}

const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] as const
/** How busy each day of the week runs against a full weekday. */
const DAY_SHAPE = [1, 1.04, 1.02, 0.98, 0.95, 0.58, 0.52]

export type ActivityDay = { day: string; thisWeek: number | null; lastWeek: number }

/**
 * Sessions a day, this week against last, Monday to Sunday. A full day is
 * the last twenty-four hours of db.sessions; every other day is that, shaped
 * by the day of the week and a little noise from the seed, last week a shade
 * quieter. Today is the sessions db.sessions holds for it so far, and the days
 * still to come are empty.
 */
export function weekActivity(): ActivityDay[] {
  const rand = seeded("overview-classic")
  const rows = db.sessions.all()
  const fullDay = rows.reduce((sum, row) => sum + row.sessions, 0)
  const midnight = Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
  const today = rows.filter((row) => row.at.getTime() >= midnight).reduce((sum, row) => sum + row.sessions, 0)
  const todayIndex = (REFERENCE_DATE.getUTCDay() + 6) % 7
  const shaped = (index: number, drift: number) => Math.round(fullDay * DAY_SHAPE[index] * drift * (0.92 + rand() * 0.16))

  return WEEKDAYS.map((day, index) => ({
    day,
    lastWeek: shaped(index, 0.93),
    thisWeek: index < todayIndex ? shaped(index, 1) : index === todayIndex ? today : null,
  }))
}

export type PaymentRow = {
  id: string
  number: string
  customer: string | null
  email: string | null
  amountCents: number
  status: "succeeded" | "processing" | "refunded" | "failed"
}

const PAYMENT_STATUS: Record<Order["status"], PaymentRow["status"]> = {
  pending: "processing",
  paid: "succeeded",
  fulfilled: "succeeded",
  refunded: "refunded",
  cancelled: "failed",
}

/** The newest six orders as payments: who paid, how much, and how it stands. A till sale to a walk-in has no email. */
export function latestPayments(): PaymentRow[] {
  const customers = new Map(db.customers.all().map((row) => [row.id, row]))
  return db.orders
    .all()
    .sort((a, b) => b.placedAt.getTime() - a.placedAt.getTime() || b.number.localeCompare(a.number))
    .slice(0, 6)
    .map((order) => {
      const customer = customers.get(order.customerId)
      return {
        id: order.id,
        number: order.number,
        customer: customer?.name ?? null,
        email: customer?.email ?? null,
        amountCents: order.totalCents,
        status: PAYMENT_STATUS[order.status],
      }
    })
}

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

// Fixed to UTC so the line reads the same wherever the page is rendered.
const UPDATED_AT = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  timeStyle: "short",
  hourCycle: "h23",
  timeZone: "UTC",
})

/** When the numbers on this page were last read. */
export function lastUpdated(): string {
  return `Last updated ${UPDATED_AT.format(REFERENCE_DATE)} UTC`
}

/** "Aug 6 – Sep 4": the thirty days the headline figures cover, REFERENCE_DATE's the last. */
export function windowLabel(): string {
  return `${SHORT_DAY.format(new Date(REFERENCE_DATE.getTime() - (WINDOW_DAYS - 1) * DAY_MS))} – ${SHORT_DAY.format(REFERENCE_DATE)}`
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { formatCurrency } from "@/lib/format"
import { REFERENCE_DATE, asString, db, fields, type Member, type Result } from "@/lib/sample-data"

/**
 * What the overview changes. Server actions, so the page stays a server
 * component; `Result`, so a refusal comes back as a sentence the card shows
 * beside the control that asked. Each looks its row up again and trusts the
 * store over the form.
 */

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

const refuse = (code: string, message: string, field?: string): Result<never> => ({
  ok: false,
  error: field ? { code, message, field } : { code, message },
})

const ROLES: Member["role"][] = ["owner", "admin", "member", "viewer"]

/**
 * Gives a teammate another role. Refuses a role the workspace does not have,
 * someone who is not in the workspace, and taking the owner's role from the
 * last owner — a workspace always has someone who can change its billing.
 */
export async function setMemberRole(
  id: string,
  role: Member["role"]
): Promise<Result<{ id: string; name: string; role: Member["role"] }>> {
  if (!ROLES.includes(role)) return refuse("invalid", "A role is Owner, Admin, Member or Viewer.", "role")
  const member = await db.members.get(id)
  if (!member || member.status === "deactivated") return refuse("not_found", "That person is no longer in the workspace.")
  if (member.role === role) return { ok: true, data: { id: member.id, name: member.name, role } }

  const owners = db.members.all().filter((row) => row.role === "owner" && row.status !== "deactivated")
  if (member.role === "owner" && owners.length === 1) {
    return refuse("last_owner", `${member.name} is the only owner — make someone else an owner first.`, "role")
  }

  const updated = await db.members.update(member.id, { role })
  if (!updated.ok) return updated
  return { ok: true, data: { id: member.id, name: member.name, role: updated.data.role } }
}

const MAX_REPLY = 500
let replies = 0

/**
 * Sends a reply in the support thread. No entity records the desk's
 * conversations, so nothing is written: the action checks the account and
 * the words and hands the message back for the thread to show — the seam a
 * real inbox slots into. Refuses an empty reply and an overlong one.
 */
export async function sendReply(
  customerId: string,
  text: string
): Promise<Result<{ id: string; text: string; at: Date }>> {
  const customer = await db.customers.get(customerId)
  if (!customer) return refuse("not_found", "That conversation is closed.")
  const body = asString(text).trim()
  if (!body) return refuse("empty", "Write a reply first.", "text")
  if (body.length > MAX_REPLY) return refuse("too_long", `A reply fits in ${MAX_REPLY} characters.`, "text")
  replies += 1
  return { ok: true, data: { id: `reply-${replies}`, text: body, at: REFERENCE_DATE } }
}

const CURRENCIES = ["USD", "EUR", "GBP"] as const
const MAX_LINK_CENTS = 10_000_000
let links = 0

/** FNV-1a over the link's own terms and its place in the run, as six base-36 characters. */
function slug(seed: string): string {
  let hash = 2166136261
  for (let i = 0; i < seed.length; i++) {
    hash ^= seed.charCodeAt(i)
    hash = Math.imul(hash, 16777619)
  }
  return (hash >>> 0).toString(36).padStart(6, "0").slice(-6)
}

/**
 * Makes a payment link for an amount. Refuses an amount that is not above
 * zero (or past $100,000), a currency the account does not take, and a
 * description longer than a line. The link is the account's own domain and
 * a slug worked out from the link's terms, never a random draw.
 */
export async function createPaymentLink(sent: {
  amountCents: number
  currency: string
  description?: string
}): Promise<Result<{ url: string; amount: string; description: string }>> {
  const input = fields(sent)
  const amount = typeof input.amountCents === "number" ? Math.round(input.amountCents) : NaN
  if (!Number.isFinite(amount) || amount <= 0) return refuse("amount", "Enter an amount above zero.", "amount")
  if (amount > MAX_LINK_CENTS) return refuse("amount", "A link asks for at most 100,000 at a time.", "amount")
  const currency = CURRENCIES.find((code) => code === input.currency)
  if (!currency) return refuse("currency", "Links are made in dollars, euros or pounds.", "currency")
  const description = asString(input.description).trim()
  if (description.length > 80) return refuse("description", "Keep the description to one line — 80 characters.", "description")

  links += 1
  const url = `pay.northwind.example/l/${slug(`${amount}|${currency}|${description}|${links}`)}`
  return { ok: true, data: { url, amount: formatCurrency(amount / 100, currency), description } }
}

"use client"

import * as React from "react"

import { formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart } from "@/components/ui/line-chart"

import type { ActivityDay } from "../data"
import { ChartKey, NEUTRAL } from "./chart-key"

/**
 * Sessions a day, Monday to Sunday: this week as a line that stops at
 * today — marked, since today is only part of a day — last week dashed
 * behind it in the neutral grey. The key names both, and the line under the title compares the
 * whole days only.
 */
export function ActivityChart({ days }: { days: ActivityDay[] }) {
  const titleId = React.useId()
  const soFar = days.filter((day) => day.thisWeek !== null)
  const today = soFar[soFar.length - 1]
  // Whole days only: today is part of one, so it is compared with nothing.
  const whole = soFar.slice(0, -1)
  const thisWeek = whole.reduce((sum, day) => sum + (day.thisWeek ?? 0), 0)
  const lastWeek = days.slice(0, whole.length).reduce((sum, day) => sum + day.lastWeek, 0)
  const span = whole.length > 1 ? `${whole[0].day}–${whole[whole.length - 1].day}` : whole[0]?.day

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Activity</h2>
        </CardTitle>
        <CardDescription className="tabular-nums">
          {span
            ? `${span}: ${formatNumber(thisWeek)} sessions, against ${formatNumber(lastWeek)} the same days last week`
            : "Sessions a day, this week against last"}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ChartKey current="This week" previous="Last week" />
        <LineChart
          data={days}
          index="day"
          series={[{ key: "thisWeek", label: "This week", compareKey: "lastWeek", compareColor: NEUTRAL }]}
          compare
          dots
          legend="none"
          height={220}
          annotations={today ? [{ kind: "event", x: today.day, label: "Today so far" }] : undefined}
          valueFormatter={(value) => formatNumber(value, { maximumFractionDigits: 0 })}
        />
      </CardContent>
    </Card>
  )
}

import { cn } from "@/lib/utils"
import { COMPARE_STROKE } from "@/components/ui/chart-tooltip"

/**
 * The colour a comparison is drawn in: the kit's neutral chart token, grey
 * under every palette, so the period before never reads as a second series.
 */
export const NEUTRAL = "var(--chart-neutral)"

/**
 * A two-entry key for a line and the dashed period behind it: a short solid
 * stroke in the series' colour and a short dashed one in the neutral grey,
 * each beside its name. The dashed one takes its dash, weight and opacity
 * from the kit's COMPARE_STROKE, so it stays the stroke the chart draws.
 */
export function ChartKey({ current, previous, className }: { current: string; previous: string; className?: string }) {
  return (
    <ul aria-label="Legend" className={cn("flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", className)}>
      <li className="flex items-center gap-1.5">
        <svg aria-hidden="true" data-key="current" width="20" height="2" className="overflow-visible text-chart-1">
          <line x1="0" y1="1" x2="20" y2="1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </svg>
        {current}
      </li>
      <li className="flex items-center gap-1.5">
        <svg aria-hidden="true" data-key="previous" width="20" height="2" className="overflow-visible text-chart-neutral">
          <line
            x1="0"
            y1="1"
            x2="20"
            y2="1"
            stroke="currentColor"
            strokeWidth={COMPARE_STROKE.strokeWidth}
            strokeDasharray={COMPARE_STROKE.strokeDasharray}
            strokeOpacity={COMPARE_STROKE.strokeOpacity}
          />
        </svg>
        {previous}
      </li>
    </ul>
  )
}

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

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

/**
 * The four headline figures — revenue, new subscriptions, paid orders and
 * sessions this hour — each with its change against the window before as a
 * pill on the strip. No pill where the window before was empty: a rise from
 * nothing is not a percentage.
 */
export function ClassicStats({ stats }: { stats: ClassicStat[] }) {
  return (
    <StatCardGroup columns={4} aria-label="Headline figures">
      {stats.map((stat) => (
        <StatCard
          key={stat.key}
          data-stat={stat.key}
          label={stat.label}
          value={stat.value}
          delta={stat.delta}
          description={stat.description}
        />
      ))}
    </StatCardGroup>
  )
}

"use client"

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

import { formatCurrency } from "@/lib/format"
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DataTableRowActions } from "@/components/ui/data-table/row-actions"
import { SimpleTable } from "@/components/ui/simple-table"
import { StatusBadge } from "@/components/ui/status-badge"

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

const STATUS = {
  succeeded: { label: "Succeeded", tone: "success" },
  processing: { label: "Processing", tone: "warning" },
  refunded: { label: "Refunded", tone: "neutral" },
  failed: { label: "Failed", tone: "danger" },
} as const

function Status({ row, className }: { row: PaymentRow; className?: string }) {
  return <StatusBadge status={row.status} label={STATUS[row.status].label} variant={STATUS[row.status].tone} className={className} />
}

/**
 * The newest payments: how each stands, who paid and how much, and a menu
 * on every row to copy its reference or the payer's address. A till sale to
 * a walk-in has no address to copy, and says so.
 */
export function LatestPayments({ rows }: { rows: PaymentRow[] }) {
  const titleId = React.useId()
  const { copy } = useCopyToClipboard()
  const [notice, setNotice] = React.useState("")

  async function copyText(text: string, what: string) {
    const ok = await copy(text)
    setNotice(ok ? `Copied ${what}.` : `Could not reach the clipboard to copy ${what}.`)
  }

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Latest payments</h2>
        </CardTitle>
        <CardDescription>The six newest, as they stand</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-2 p-0">
        <SimpleTable
          className="rounded-none border-0"
          rows={rows}
          rowKey="id"
          columns={[
            {
              key: "status",
              header: "Status",
              // A phone has no room for the column; the state rides under the email instead.
              className: "max-sm:hidden",
              cell: (row) => <Status row={row} />,
            },
            {
              key: "email",
              header: "Email",
              className: "max-w-0 w-full",
              cell: (row) => (
                <span className="flex min-w-0 flex-col items-start gap-1">
                  {row.email ? (
                    <span className="block w-full truncate">{row.email}</span>
                  ) : (
                    <span className="text-muted-foreground">Walk-in</span>
                  )}
                  <Status row={row} className="sm:hidden" />
                </span>
              ),
            },
            {
              key: "amountCents",
              header: "Amount",
              align: "right",
              cell: (row) => formatCurrency(row.amountCents / 100, "USD"),
            },
            {
              key: "menu",
              header: <span className="sr-only">Actions</span>,
              cell: (row) => (
                <DataTableRowActions
                  label={`Actions for ${row.number}`}
                  actions={[
                    { label: "Copy payment ID", icon: <CopyIcon />, onSelect: () => void copyText(row.number, row.number) },
                    ...(row.email
                      ? [{ label: "Copy email", icon: <CopyIcon />, onSelect: () => void copyText(row.email!, row.email!) }]
                      : []),
                  ]}
                />
              ),
            },
          ]}
        />
        <p role="status" aria-live="polite" className="min-h-4 px-(--card-spacing) pb-2 text-xs text-muted-foreground">
          {notice}
        </p>
      </CardContent>
    </Card>
  )
}

"use client"

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

import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CopyButton } from "@/components/ui/copy-button"
import { CurrencyInput } from "@/components/ui/currency-input"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

import { createPaymentLink } from "../actions"

const CURRENCIES = [
  { value: "USD", label: "USD · US dollar" },
  { value: "EUR", label: "EUR · Euro" },
  { value: "GBP", label: "GBP · Pound" },
]

/**
 * A payment link for an amount: how much, in which currency and what for.
 * The link comes back in the status line, ready to copy; an amount that is
 * not above zero is refused under the amount.
 */
export function PaymentLink() {
  const titleId = React.useId()
  const amountId = React.useId()
  const currencyId = React.useId()
  const descriptionId = React.useId()
  const alertId = React.useId()
  const [amount, setAmount] = React.useState<number | null>(null)
  const [currency, setCurrency] = React.useState("USD")
  const [description, setDescription] = React.useState("")
  const [pending, setPending] = React.useState(false)
  const [refusal, setRefusal] = React.useState<{ message: string; field?: string } | null>(null)
  const [link, setLink] = React.useState<{ url: string; amount: string; description: string } | null>(null)

  async function create(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setPending(true)
    setRefusal(null)
    setLink(null)
    const result = await createPaymentLink({ amountCents: Math.round((amount ?? 0) * 100), currency, description })
    setPending(false)
    if (!result.ok) return setRefusal({ message: result.error.message, field: result.error.field })
    setLink(result.data)
  }

  const refusedAmount = refusal?.field === "amount"

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Create a payment link</h2>
        </CardTitle>
        <CardDescription>Ask for a payment by sharing one link</CardDescription>
      </CardHeader>
      <CardContent>
        <form className="flex flex-col gap-4" onSubmit={create} noValidate>
          <div className="grid grid-cols-[minmax(0,1fr)_7.5rem] gap-3">
            <div className="flex flex-col gap-1.5">
              <Label htmlFor={amountId}>Amount</Label>
              <CurrencyInput
                id={amountId}
                currency={currency}
                hideControls
                value={amount}
                onValueChange={setAmount}
                aria-invalid={refusedAmount || undefined}
                aria-describedby={refusedAmount ? alertId : undefined}
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <Label id={currencyId}>Currency</Label>
              <Select value={currency} onValueChange={(next) => next && setCurrency(next as string)} items={CURRENCIES.map(({ value }) => ({ value, label: value }))}>
                <SelectTrigger aria-labelledby={currencyId} className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {CURRENCIES.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          {refusal ? (
            <Callout id={alertId} variant="danger" role="alert">
              {refusal.message}
            </Callout>
          ) : null}
          <div className="flex flex-col gap-1.5">
            <Label htmlFor={descriptionId}>Description</Label>
            <Input
              id={descriptionId}
              placeholder="What the payment is for"
              value={description}
              onChange={(event) => setDescription(event.target.value)}
            />
          </div>
          <Button type="submit" disabled={pending} focusableWhenDisabled className="w-full">
            <LinkIcon data-icon="inline-start" />
            Create link
          </Button>
          <div className="flex min-h-7 items-center justify-between gap-2">
            <p role="status" aria-live="polite" className="flex min-w-0 flex-col text-sm">
              {link ? (
                <>
                  <span className="text-muted-foreground">{`Link for ${link.amount}: `}</span>
                  <span className="truncate font-mono text-xs">{link.url}</span>
                </>
              ) : null}
            </p>
            {link ? <CopyButton value={`https://${link.url}`} label="Copy the link" /> : null}
          </div>
        </form>
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"

import { formatCurrency } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart } from "@/components/ui/line-chart"

import type { RevenueWeek } from "../data"
import { ChartKey, NEUTRAL } from "./chart-key"

const compact = (value: number) => formatCurrency(value, "USD", { compact: true })

/**
 * Revenue a week at a time over twelve weeks, the twelve before drawn dashed
 * behind it in the neutral grey — never the series' colour, so the comparison
 * stays achromatic under every palette, a coloured accent included.
 */
export function RevenueChart({ weeks }: { weeks: RevenueWeek[] }) {
  const titleId = React.useId()
  const total = weeks.reduce((sum, week) => sum + week.revenue, 0)
  const before = weeks.reduce((sum, week) => sum + week.before, 0)

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Revenue</h2>
        </CardTitle>
        <CardDescription className="tabular-nums">
          {`${formatCurrency(total, "USD", { maximumFractionDigits: 0 })} over 12 weeks, against ${formatCurrency(before, "USD", { maximumFractionDigits: 0 })} the 12 before`}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ChartKey current="Last 12 weeks" previous="The 12 weeks before" />
        <LineChart
          data={weeks}
          index="week"
          series={[{ key: "revenue", label: "Revenue", compareKey: "before", compareColor: NEUTRAL }]}
          compare
          dots
          legend="none"
          height={240}
          valueFormatter={compact}
        />
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"

import { formatNumber } from "@/lib/format"
import { BarChart } from "@/components/ui/bar-chart"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

/** New subscriptions in each of the last six months, one grey bar a month, this month to date. */
export function SubscriptionsChart({ months }: { months: { month: string; subscriptions: number }[] }) {
  const titleId = React.useId()
  const total = months.reduce((sum, month) => sum + month.subscriptions, 0)

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Subscriptions</h2>
        </CardTitle>
        <CardDescription className="tabular-nums">{`${formatNumber(total)} new in six months, this one to date`}</CardDescription>
      </CardHeader>
      <CardContent>
        <BarChart
          data={months}
          index="month"
          series={[{ key: "subscriptions", label: "New subscriptions" }]}
          showLegend={false}
          height={268}
          valueFormatter={(value) => formatNumber(value, { maximumFractionDigits: 0 })}
        />
      </CardContent>
    </Card>
  )
}

"use client"

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

import { getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup } from "@/components/ui/message"

import { sendReply } from "../actions"
import type { ChatLine, SupportThread } from "../data"

// Pinned to UTC, like every time on the page.
const CLOCK = new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", hourCycle: "h23", timeZone: "UTC" })

/** A face for a line of the thread. */
function Face({ name, src }: { name: string; src?: string }) {
  return (
    <MessageAvatar className="min-w-7">
      <Avatar size="sm">
        {src ? <AvatarImage src={src} alt="" /> : null}
        <AvatarFallback className="text-2xs">{getInitials(name)}</AvatarFallback>
      </Avatar>
    </MessageAvatar>
  )
}

/**
 * The conversation open on the support desk: the customer's face and
 * account in the strip, the thread as the kit's messages — theirs on the
 * left, the desk's on the right in the ink — and a reply box under it. A
 * reply the server takes is added to the end; an empty one is refused there.
 */
export function SupportChat({ thread, agent }: { thread: SupportThread; agent: { name: string; avatarUrl?: string } }) {
  const titleId = React.useId()
  const alertId = React.useId()
  const [lines, setLines] = React.useState<ChatLine[]>(thread.lines)
  const [draft, setDraft] = React.useState("")
  const [pending, setPending] = React.useState(false)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState("")
  const { customer } = thread
  const logRef = React.useRef<HTMLDivElement>(null)

  // A reply added to the end is scrolled into view; the thread opens at its
  // first line, so the conversation reads from the start.
  const drawn = React.useRef(lines.length)
  React.useEffect(() => {
    const log = logRef.current
    if (log && lines.length > drawn.current) log.scrollTop = log.scrollHeight
    drawn.current = lines.length
  }, [lines.length])

  async function send(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setPending(true)
    setNotice("")
    setRefusal("")
    const result = await sendReply(customer.id, draft)
    setPending(false)
    if (!result.ok) return setRefusal(result.error.message)
    setLines((current) => [
      ...current,
      { id: result.data.id, author: agent.name, avatarUrl: agent.avatarUrl, fromCustomer: false, text: result.data.text, at: result.data.at },
    ])
    setDraft("")
    setNotice(`Reply sent to ${customer.name}.`)
  }

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Support chat</h2>
        </CardTitle>
        <CardDescription className="truncate">{`${customer.name} · ${customer.company}`}</CardDescription>
        <CardAction>
          <Avatar>
            {customer.avatarUrl ? <AvatarImage src={customer.avatarUrl} alt="" /> : null}
            <AvatarFallback className="text-xs">{getInitials(customer.name)}</AvatarFallback>
          </Avatar>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <MessageGroup
          ref={logRef}
          role="log"
          aria-label={`Conversation with ${customer.name}`}
          className="-mx-1 max-h-96 gap-3 overflow-y-auto px-1"
        >
          {lines.map((line) => (
            <Message key={line.id} align={line.fromCustomer ? "start" : "end"}>
              {line.fromCustomer ? <Face name={line.author} src={line.avatarUrl} /> : null}
              <MessageContent className="gap-1">
                <Bubble variant={line.fromCustomer ? "muted" : "default"} align={line.fromCustomer ? "start" : "end"}>
                  <BubbleContent>{line.text}</BubbleContent>
                </Bubble>
                <MessageFooter className="gap-1 font-normal">
                  <span className="sr-only">{`${line.author}, `}</span>
                  <time dateTime={line.at.toISOString()} className="tabular-nums">
                    {CLOCK.format(line.at)}
                  </time>
                </MessageFooter>
              </MessageContent>
            </Message>
          ))}
        </MessageGroup>
        {refusal ? (
          <Callout id={alertId} variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}
        <form className="flex gap-2" onSubmit={send}>
          <Input
            aria-label={`Reply to ${customer.name}`}
            placeholder="Write a reply"
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            aria-invalid={refusal ? true : undefined}
            aria-describedby={refusal ? alertId : undefined}
          />
          <Button type="submit" size="icon" aria-label="Send reply" disabled={pending}>
            <SendHorizontalIcon />
          </Button>
        </form>
        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"

import type { Member } from "@/lib/sample-data"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { UserCell } from "@/components/ui/user-cell"

import { setMemberRole } from "../actions"
import type { TeamMember } from "../data"

const ROLES: { value: Member["role"]; label: string }[] = [
  { value: "owner", label: "Owner" },
  { value: "admin", label: "Admin" },
  { value: "member", label: "Member" },
  { value: "viewer", label: "Viewer" },
]

const LABEL = Object.fromEntries(ROLES.map((role) => [role.value, role.label])) as Record<Member["role"], string>

/**
 * The people with the most say in the workspace, each with a face and a role
 * that can be changed on the spot. A role only moves once the server has
 * said yes; a refusal — the last owner stepping down — is said under the
 * list, and the success in the status line.
 */
export function TeamMembers({ members }: { members: TeamMember[] }) {
  const titleId = React.useId()
  const [rows, setRows] = React.useState(members)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState("")

  async function change(member: TeamMember, role: Member["role"]) {
    setNotice("")
    setRefusal("")
    const result = await setMemberRole(member.id, role)
    if (!result.ok) return setRefusal(result.error.message)
    setRows((current) => current.map((row) => (row.id === result.data.id ? { ...row, role: result.data.role } : row)))
    setNotice(`${result.data.name} is now ${result.data.role === "admin" || result.data.role === "owner" ? "an" : "a"} ${LABEL[result.data.role]}.`)
  }

  return (
    <Card role="region" aria-labelledby={titleId} className="h-full">
      <CardHeader>
        <CardTitle>
          <h2 id={titleId}>Team members</h2>
        </CardTitle>
        <CardDescription>Who can change what in the workspace</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ul className="flex flex-col">
          {rows.map((member) => (
            <li key={member.id} className="flex items-center justify-between gap-3 border-b border-border py-2.5 first:pt-0 last:border-b-0 last:pb-0">
              <UserCell name={member.name} email={member.email} src={member.avatarUrl} className="min-w-0" />
              <Select
                value={member.role}
                onValueChange={(next) => next && void change(member, next as Member["role"])}
                items={ROLES}
              >
                <SelectTrigger aria-label={`Role for ${member.name}`} size="sm" className="w-28 shrink-0">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent align="end">
                  {ROLES.map((role) => (
                    <SelectItem key={role.value} value={role.value}>
                      {role.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </li>
          ))}
        </ul>
        {refusal ? (
          <Callout variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}
        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </CardContent>
    </Card>
  )
}