{
  "name": "order-history-page",
  "title": "OrderHistoryPage",
  "description": "Order list with status filtering and inline detail view.",
  "type": "component",
  "registryDependencies": [
    "order-history",
    "order-summary",
    "cn"
  ],
  "files": [
    {
      "path": "order-history-page.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { OrderHistory } from \"@cimplify/sdk/react\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  filters?: string;\n  filterButton?: string;\n  list?: string;\n  detail?: string;\n  backButton?: string;\n}\n\nexport interface OrderHistoryPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched orders for SSR. */\n  orders?: Order[];\n  /** Max orders to show per page. */\n  limit?: number;\n  /** Called when navigating to an order detail (e.g. for routing). */\n  onOrderNavigate?: (order: Order) => void;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Show status filter tabs. Default: true. */\n  showFilters?: boolean;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  className?: string;\n  classNames?: OrderHistoryPageClassNames;\n}\n\nconst STATUS_FILTERS: { label: string; value: OrderStatus | undefined; tabValue: string }[] = [\n  { label: \"All\", value: undefined, tabValue: \"all\" },\n  { label: \"Active\", value: \"confirmed\", tabValue: \"confirmed\" },\n  { label: \"Completed\", value: \"completed\", tabValue: \"completed\" },\n  { label: \"Cancelled\", value: \"cancelled\", tabValue: \"cancelled\" },\n];\n\n/**\n * OrderHistoryPage — order list with inline detail view and status filtering.\n *\n * SSR-friendly: pass `orders` prop for server rendering.\n * Supports both inline detail view and external navigation via `onOrderNavigate`.\n */\nexport function OrderHistoryPage({\n  title = \"Order History\",\n  orders: ordersProp,\n  limit = 20,\n  onOrderNavigate,\n  onReorder,\n  showFilters = true,\n  renderOrder,\n  className,\n  classNames,\n}: OrderHistoryPageProps): React.ReactElement {\n  const [statusFilter, setStatusFilter] = useState<OrderStatus | undefined>(undefined);\n  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);\n\n  const handleTabChange = useCallback((value: string | number | null) => {\n    const filter = STATUS_FILTERS.find((f) => f.tabValue === value);\n    setStatusFilter(filter?.value);\n  }, []);\n\n  const handleOrderClick = useCallback(\n    (order: Order) => {\n      if (onOrderNavigate) {\n        onOrderNavigate(order);\n      } else {\n        setSelectedOrder(order);\n      }\n    },\n    [onOrderNavigate],\n  );\n\n  const handleBack = useCallback(() => {\n    setSelectedOrder(null);\n  }, []);\n\n  const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? \"all\";\n\n  // Inline detail view\n  if (selectedOrder && !onOrderNavigate) {\n    return (\n      <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n        <div data-cimplify-order-history-detail className={classNames?.detail}>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-order-history-back\n            className={classNames?.backButton}\n          >\n            Back to orders\n          </button>\n          <OrderSummary order={selectedOrder} onReorder={onReorder} />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-history-header className={classNames?.header}>\n        <h1 data-cimplify-order-history-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {/* Status filter */}\n      {showFilters && (\n        <Tabs.Root value={activeTabValue} onValueChange={handleTabChange}>\n          <Tabs.List data-cimplify-order-history-filters className={classNames?.filters}>\n            {STATUS_FILTERS.map((filter) => (\n              <Tabs.Tab\n                key={filter.tabValue}\n                value={filter.tabValue}\n                data-cimplify-order-filter\n                data-selected={statusFilter === filter.value || undefined}\n                className={classNames?.filterButton}\n              >\n                {filter.label}\n              </Tabs.Tab>\n            ))}\n          </Tabs.List>\n        </Tabs.Root>\n      )}\n\n      {/* Order list */}\n      <div data-cimplify-order-history-list className={classNames?.list}>\n        <OrderHistory\n          orders={ordersProp}\n          status={statusFilter}\n          limit={limit}\n          onOrderClick={handleOrderClick}\n          renderOrder={renderOrder}\n          onReorder={onReorder}\n        />\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}