{
  "name": "bookings-page",
  "title": "BookingsPage",
  "description": "Account-area page listing a customer's bookings with filters and detail view.",
  "type": "component",
  "registryDependencies": [
    "booking-list",
    "booking-card",
    "cn"
  ],
  "files": [
    {
      "path": "bookings-page.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { CustomerBooking } from \"@cimplify/sdk\";\nimport { BookingList } from \"@cimplify/sdk/react\";\nimport { BookingCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingsPageClassNames {\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 BookingsPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched bookings for SSR. */\n  bookings?: CustomerBooking[];\n  /** Called when navigating to a booking detail (e.g. for routing). */\n  onBookingNavigate?: (booking: CustomerBooking) => void;\n  /** Called when cancel is clicked. */\n  onCancel?: (booking: CustomerBooking) => void;\n  /** Called when reschedule is clicked. */\n  onReschedule?: (booking: CustomerBooking) => void;\n  /** Show filter tabs. Default: true. */\n  showFilters?: boolean;\n  /** Custom booking renderer. */\n  renderBooking?: (booking: CustomerBooking) => React.ReactNode;\n  className?: string;\n  classNames?: BookingsPageClassNames;\n}\n\nconst BOOKING_FILTERS: { label: string; value: \"all\" | \"upcoming\" | \"past\" }[] = [\n  { label: \"All\", value: \"all\" },\n  { label: \"Upcoming\", value: \"upcoming\" },\n  { label: \"Past\", value: \"past\" },\n];\n\nexport function BookingsPage({\n  title = \"My Bookings\",\n  bookings: bookingsProp,\n  onBookingNavigate,\n  onCancel,\n  onReschedule,\n  showFilters = true,\n  renderBooking,\n  className,\n  classNames,\n}: BookingsPageProps): React.ReactElement {\n  const [filter, setFilter] = useState<\"all\" | \"upcoming\" | \"past\">(\"all\");\n  const [selectedBooking, setSelectedBooking] = useState<CustomerBooking | null>(null);\n\n  const handleBookingClick = useCallback(\n    (booking: CustomerBooking) => {\n      if (onBookingNavigate) {\n        onBookingNavigate(booking);\n      } else {\n        setSelectedBooking(booking);\n      }\n    },\n    [onBookingNavigate],\n  );\n\n  const handleBack = useCallback(() => {\n    setSelectedBooking(null);\n  }, []);\n\n  if (selectedBooking && !onBookingNavigate) {\n    return (\n      <div data-cimplify-bookings-page className={cn(className, classNames?.root)}>\n        <div data-cimplify-bookings-detail className={classNames?.detail}>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-bookings-back\n            className={classNames?.backButton}\n          >\n            Back to bookings\n          </button>\n          <BookingCard\n            booking={selectedBooking}\n            onCancel={onCancel}\n            onReschedule={onReschedule}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-bookings-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-bookings-header className={classNames?.header}>\n        <h1 data-cimplify-bookings-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {showFilters && (\n        <Tabs.Root\n          value={filter}\n          onValueChange={(value) => setFilter(value as \"all\" | \"upcoming\" | \"past\")}\n        >\n          <Tabs.List data-cimplify-bookings-filters className={classNames?.filters}>\n            {BOOKING_FILTERS.map((f) => (\n              <Tabs.Tab\n                key={f.value}\n                value={f.value}\n                data-cimplify-booking-filter\n                data-selected={filter === f.value || undefined}\n                className={classNames?.filterButton}\n              >\n                {f.label}\n              </Tabs.Tab>\n            ))}\n          </Tabs.List>\n        </Tabs.Root>\n      )}\n\n      <div data-cimplify-bookings-list className={classNames?.list}>\n        <BookingList\n          bookings={bookingsProp}\n          filter={filter}\n          onCancel={onCancel}\n          onReschedule={onReschedule}\n          onBookingClick={handleBookingClick}\n          renderBooking={renderBooking}\n        />\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}