shadcn/ui
review file

export function DashboardShell() {
  return (
    <div className="grid min-h-screen lg:grid-cols-[16rem_1fr]">
      <aside className="hidden border-r bg-muted/30 p-4 lg:block">
        <nav className="space-y-1">
          {['Dashboard', 'Users', 'Analytics', 'Settings', 'Billing'].map((item) => (
            <Button key={item} variant="ghost" className="w-full justify-start">{item}</Button>
          ))}
        </nav>
      </aside>
      <main className="space-y-6 p-4 md:p-8">
        <header className="flex items-center justify-between gap-4">
          <div>
            <p className="text-sm text-muted-foreground">Dashboard</p>
            <h1 className="text-2xl font-semibold tracking-tight">Revenue overview</h1>
          </div>
          <Button>Invite teammate</Button>
        </header>
        <section className="grid gap-4 md:grid-cols-4">
          {metrics.map((metric) => <MetricCard key={metric.label} {...metric} />)}
        </section>
        <Card>
          <CardHeader><CardTitle>Recent customers</CardTitle></CardHeader>
          <CardContent><CustomersTable state="loaded" /></CardContent>
        </Card>
      </main>
    </div>
  )
}

export function PricingPage() {
  return (
    <section className="mx-auto max-w-6xl space-y-10 px-4 py-16">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Simple, transparent pricing</Badge>
        <h1 className="mt-4 text-4xl font-bold tracking-tight">Choose the plan that fits your team</h1>
        <div className="mt-6 flex items-center justify-center gap-3">
          <span>Monthly</span><Switch aria-label="Toggle annual billing" /><span>Annual</span>
        </div>
      </div>
      <div className="grid gap-6 md:grid-cols-3">
        {plans.map((plan) => (
          <Card key={plan.name} className={plan.highlight ? 'border-primary shadow-lg' : ''}>
            <CardHeader>
              {plan.highlight && <Badge>Most popular</Badge>}
              <CardTitle>{plan.name}</CardTitle>
              <CardDescription>{plan.description}</CardDescription>
            </CardHeader>
            <CardContent><PlanFeatures features={plan.features} /></CardContent>
            <CardFooter><Button className="w-full">{plan.cta}</Button></CardFooter>
          </Card>
        ))}
      </div>
      <FeatureComparisonTable />
    </section>
  )
}

export function DashboardOverview() {
  return (
    <main className="grid min-h-screen lg:grid-cols-[260px_1fr]">
      <SidebarNav sections={['Overview', 'Customers', 'Usage', 'Billing']} />
      <section className="space-y-6 p-6">
        <DashboardHeader title="Revenue operations" action="Invite teammate" />
        <div className="grid gap-4 md:grid-cols-4">
          {metrics.map((metric) => <MetricCard key={metric.label} metric={metric} />)}
        </div>
        <div className="grid gap-4 xl:grid-cols-[1.4fr_1fr]">
          <RevenueChart state="loaded" />
          <ActivationChecklist state="empty-ready" />
        </div>
        <CustomerTable state="loaded" />
      </section>
    </main>
  )
}