22:Td9d9,

"use client"

import * as React from "react"
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  type ColumnDef,
  type SortingState,
} from "@tanstack/react-table"
import { useVirtualizer } from "@tanstack/react-virtual"
import { parseISO } from "date-fns"
import { SortVerticalIcon } from "@solar-icons/react/linear"
import { cn } from "cn"

import { formatDate, formatTHB } from "@/lib/format"
import { statusLabel, type Order } from "@/lib/demo-data"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

const ROW_HEIGHT = 40
const nf = new Intl.NumberFormat("en-US")

const sortable = (label: string, align?: "right") =>
  function SortableHeader({ column }: { column: { toggleSorting: (desc?: boolean) => void; getIsSorted: () => false | "asc" | "desc" } }) {
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        className={cn("-mx-2 text-muted-foreground", align === "right" && "ml-auto flex")}
      >
        {label}
        <SortVerticalIcon className="size-3.5" />
      </Button>
    )
  }

const columns: ColumnDef<Order>[] = [
  { accessorKey: "id", header: "Order", size: 130, cell: ({ getValue }) => <span className="font-mono text-xs">{String(getValue())}</span> },
  { accessorKey: "customer", header: sortable("Customer"), size: 220 },
  { accessorKey: "status", header: "Status", size: 120, cell: ({ row }) => statusLabel[row.original.status] },
  { accessorKey: "channel", header: "Channel", size: 110 },
  {
    accessorKey: "date",
    header: sortable("Date"),
    size: 120,
    cell: ({ row }) => formatDate(parseISO(row.original.date), { style: "short" }),
  },
  {
    accessorKey: "amount",
    header: sortable("Amount", "right"),
    size: 120,
    cell: ({ row }) => <div className="text-right tabular-nums">{formatTHB(row.original.amount)}</div>,
  },
]

/**
 * Block: virtualized table for thousands of rows — only the rows in view are
 * in the DOM (≈ 20 instead of 10,000). Sticky header, fixed 40px rows,
 * sorting, no pagination and **no row animations** (they fight the
 * virtualizer). Use it when people scan/scroll a long list; for filtering and
 * bulk actions on a page of results, use the Data Table block.
 */
export function VirtualTable({ data, height = 480 }: { data: Order[]; height?: number }) {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const scrollRef = React.useRef<HTMLDivElement>(null)

  // eslint-disable-next-line react-hooks/incompatible-library
  const table = useReactTable({
    data,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })
  const rows = table.getRowModel().rows

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => ROW_HEIGHT,
    overscan: 8,
  })
  const items = virtualizer.getVirtualItems()
  // Spacer rows keep real <table> layout (column widths, borders) while skipping off-screen rows
  const padTop = items[0]?.start ?? 0
  const padBottom = virtualizer.getTotalSize() - (items.at(-1)?.end ?? 0)

  return (
    <Card className="gap-0 overflow-hidden py-0">
      <div className="flex items-center justify-between border-b p-3 text-sm text-muted-foreground">
        <span className="tabular-nums">{nf.format(rows.length)} rows</span>
        <span className="hidden sm:inline">Scroll for more — only visible rows are rendered</span>
      </div>
      {/* the scroll container must be the table's direct scroller, or the sticky header breaks */}
      <div
        ref={scrollRef}
        role="region"
        aria-label="All orders"
        tabIndex={0}
        className="relative overflow-auto outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
        style={{ height }}
      >
        <table data-slot="table" className="w-full min-w-[820px] table-fixed text-sm" aria-rowcount={rows.length + 1}>
          <thead className="sticky top-0 z-10 bg-card shadow-[inset_0_-1px_0_var(--border)]">
            {table.getHeaderGroups().map((hg) => (
              <tr key={hg.id} aria-rowindex={1}>
                {hg.headers.map((h) => (
                  <th
                    key={h.id}
                    style={{ width: h.getSize() }}
                    className="h-10 bg-muted/40 px-3 text-left align-middle font-medium whitespace-nowrap text-muted-foreground"
                  >
                    {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody>
            {padTop > 0 && (
              <tr aria-hidden>
                <td colSpan={columns.length} style={{ height: padTop }} />
              </tr>
            )}
            {items.map((v) => {
              const row = rows[v.index]
              return (
                <tr
                  key={row.id}
                  aria-rowindex={v.index + 2}
                  style={{ height: ROW_HEIGHT }}
                  className="border-b transition-colors hover:bg-muted/50"
                >
                  {row.getVisibleCells().map((cell) => (
                    <td key={cell.id} className="truncate px-3 align-middle">
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                  ))}
                </tr>
              )
            })}
            {padBottom > 0 && (
              <tr aria-hidden>
                <td colSpan={columns.length} style={{ height: padBottom }} />
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </Card>
  )
}

1f:["$","div",null,{"className":"max-h-[32rem] overflow-auto p-4 font-mono text-[0.8125rem] leading-relaxed [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$22"}}] 23:Tc42f,

/** Synthetic sample data for the /demo dashboard and gallery previews. Not real customers. */

export type OrderStatus = "paid" | "pending" | "shipped" | "refunded"

export type Order = {
  id: string
  customer: string
  email: string
  status: OrderStatus
  channel: "Web" | "LINE OA" | "Shopee" | "Lazada"
  amount: number
  date: string // ISO 8601, e.g. "2026-09-28"
}

const customers = [
  ["สมชาย ใจดี", "somchai@example.com"],
  ["Nattaya K.", "nattaya@example.com"],
  ["Goldleaf Trading Co., Ltd.", "billing@goldleaf.example"],
  ["Pimchanok S.", "pim@example.com"],
  ["Olivia Bennett", "olivia@example.com"],
  ["Ekkachai P.", "ekkachai@example.com"],
  ["Highland Coffee Roasters", "hello@highlandcoffee.example"],
  ["Thanakorn W.", "thanakorn@example.com"],
  ["Maria Santos", "maria@example.com"],
  ["Kittipong L.", "kittipong@example.com"],
  ["Sarah Chen", "sarah@example.com"],
  ["Arunee C.", "arunee@example.com"],
] as const

const statuses: OrderStatus[] = ["paid", "paid", "shipped", "pending", "paid", "refunded", "shipped", "paid"]
const channels: Order["channel"][] = ["Web", "LINE OA", "Shopee", "Lazada"]

/** The data "ends" here; demo date presets are relative to it so they always have rows. */
export const DEMO_TODAY = new Date(2026, 8, 30)

/** Local YYYY-MM-DD, `n` days before DEMO_TODAY */
function daysAgo(n: number) {
  const d = new Date(DEMO_TODAY)
  d.setDate(d.getDate() - n)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
}

export const orders: Order[] = Array.from({ length: 60 }, (_, i) => {
  const [customer, email] = customers[i % customers.length]
  return {
    id: `ORD-${24081 + i * 7}`,
    customer,
    email,
    status: statuses[(i * 3) % statuses.length],
    channel: channels[(i * 5) % channels.length],
    amount: Math.round((((i * 7919) % 9000) + 350) / 10) * 10,
    date: daysAgo((i * 3) % 89),
  }
})

/** Deterministic bulk sample (e.g. 10,000 rows for the virtualized table) — same shape as `orders` */
export function makeOrders(count: number): Order[] {
  return Array.from({ length: count }, (_, i) => {
    const [customer, email] = customers[(i * 7) % customers.length]
    return {
      id: `ORD-${String(100001 + i)}`,
      customer,
      email,
      status: statuses[(i * 5) % statuses.length],
      channel: channels[(i * 3) % channels.length],
      amount: Math.round((((i * 7919) % 12000) + 120) / 10) * 10,
      date: daysAgo((i * 13) % 365),
    }
  })
}

export const statusLabel: Record<OrderStatus, string> = {
  paid: "Paid",
  pending: "Pending",
  shipped: "Shipped",
  refunded: "Refunded",
}

export const kpis = [
  { key: "revenue", label: "Revenue this month", value: 1284500, delta: 12.4, format: { style: "currency", currency: "THB", maximumFractionDigits: 0 }, trend: [38, 41, 39, 44, 47, 45, 52, 55, 53, 58, 61, 64] },
  { key: "orders", label: "Orders", value: 3421, delta: 8.1, format: {}, trend: [210, 230, 225, 260, 255, 270, 290, 285, 300, 310, 305, 330] },
  { key: "customers", label: "New customers", value: 482, delta: -3.2, format: {}, trend: [52, 49, 51, 47, 45, 46, 43, 44, 41, 42, 40, 39] },
  { key: "aov", label: "Average order value", value: 375.4, delta: 4.6, format: { style: "currency", currency: "THB", maximumFractionDigits: 0 }, trend: [350, 355, 352, 360, 358, 362, 365, 361, 368, 370, 372, 375] },
] as const satisfies ReadonlyArray<{ key: string; label: string; value: number; delta: number; format: Intl.NumberFormatOptions; trend: readonly number[] }>

export const revenueSeries = Array.from({ length: 90 }, (_, i) => {
  const base = 32000 + Math.sin(i / 3) * 6000 + i * 140
  return {
    date: daysAgo(89 - i),
    web: Math.round(base * 0.55),
    marketplace: Math.round(base * 0.45 + Math.cos(i / 2) * 2500),
  }
})

21:["$","div",null,{"className":"max-h-[32rem] overflow-auto p-4 font-mono text-[0.8125rem] leading-relaxed [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$23"}}]

Installation