50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T762f,"use client" import * as React from "react" import { Menu as MenuPrimitive } from "@base-ui/react/menu" import { IconAdjustmentsHorizontal, IconArrowDown, IconArrowUp, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight, IconSearch, IconSelector, IconX, } from "@tabler/icons-react" import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTableHook, createTableHookContexts, filterFn_includesString, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, Subscribe, tableFeatures, type Column, type Row, type RowData, type RowSelectionState, type Table as CoreTable, } from "@tanstack/react-table" import { cn } from "cn" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" const dataTableFeatures = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text, datetime: sortFn_datetime, basic: sortFn_basic, }, columnFilteringFeature, globalFilteringFeature, filteredRowModel: createFilteredRowModel(), filterFns: { includesString: filterFn_includesString }, rowPaginationFeature, paginatedRowModel: createPaginatedRowModel(), rowSelectionFeature, columnVisibilityFeature, }) type DataTableFeatures = typeof dataTableFeatures const dataTableContexts = createTableHookContexts() const dataTableHook = createTableHook({ features: dataTableFeatures, ...dataTableContexts, globalFilterFn: "includesString", getColumnCanGlobalFilter: (column) => column.id !== "select", }) type UseDataTableOptions = Parameters< typeof dataTableHook.useAppTable >[0] type DataTableInstance = ReturnType< typeof dataTableHook.useAppTable > type AnyColumn = Column type AnyRow = Row type AnyCoreTable = CoreTable function useDataTable( options: UseDataTableOptions ) { return dataTableHook.useAppTable({ ...options, initialState: { pagination: { pageIndex: 0, pageSize: 10 }, ...options.initialState, }, }) } const createDataTableColumns = dataTableHook.createAppColumnHelper function useDataTableContext() { return dataTableHook.useTableContext() } function columnLabel(column: AnyColumn) { const header = column.columnDef.header if (typeof header === "string") { return header } return column.id.charAt(0).toUpperCase() + column.id.slice(1) } function DataTableAnnouncer() { const table = useDataTableContext() const sorting = table.state.sorting const search = table.state.globalFilter as string | undefined const count = table.getFilteredRowModel().rows.length const sortKey = JSON.stringify(sorting) const [message, setMessage] = React.useState("") const [previousSort, setPreviousSort] = React.useState(sortKey) const first = sorting[0] const sortedColumn = first ? table.getColumn(first.id) : undefined const sortMessage = first ? `Sorted by ${sortedColumn ? columnLabel(sortedColumn as AnyColumn) : first.id}, ${first.desc ? "descending" : "ascending"}` : "Sorting removed" if (sortKey !== previousSort) { setPreviousSort(sortKey) setMessage(sortMessage) } React.useEffect(() => { if (!search) { return } const timer = setTimeout( () => setMessage(count === 1 ? "1 result" : `${count} results`), 500 ) return () => clearTimeout(timer) }, [count, search]) return ( {message} ) } type DataTableProps = React.ComponentProps<"div"> & { table: DataTableInstance } function DataTable({ table, className, children, ...props }: DataTableProps) { return (

{children}

) } function DataTableToolbar({ className, ...props }: React.ComponentProps<"div">) { return (

) } const fieldClassName = "h-8 w-full min-w-0 rounded-md bg-background text-sm inset-ring-(length:--hairline) forced-colors:border inset-ring-input transition-[box-shadow] duration-150 ease-out-quint outline-none focus-visible:outline-hidden placeholder:text-muted-foreground focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:inset-ring-ring pointer-coarse:h-11 pointer-coarse:text-[max(16px,1rem)] dark:bg-input/30" type DataTableSearchProps = Omit< React.ComponentProps<"input">, "value" | "defaultValue" | "onChange" > & { clearLabel?: string } function DataTableSearch({ className, placeholder = "Search…", clearLabel = "Clear search", onKeyDown, "aria-label": ariaLabel = "Search table", ...props }: DataTableSearchProps) { const table = useDataTableContext() const value = (table.state.globalFilter as string | undefined) ?? "" const inputRef = React.useRef(null) const setSearch = (next: string) => { table.setGlobalFilter(next) table.setPageIndex(0) } return (

setSearch(event.target.value)} onKeyDown={(event) => { onKeyDown?.(event) if ( !event.defaultPrevented && event.key === "Escape" && value !== "" ) { event.preventDefault() setSearch("") } }} className={cn( fieldClassName, "ps-8 pe-8 [&::-webkit-search-cancel-button]:hidden" )} {...props} />

) } type DataTableColumnHeaderProps< TData extends RowData, TValue, > = React.ComponentProps<"div"> & { column: Column title: string } function DataTableColumnHeader({ column, title, className, ...props }: DataTableColumnHeaderProps) { const target = column as unknown as AnyColumn if (!target.getCanSort()) { return (

{title}

) } return ( state.sorting.find((entry) => entry.id === target.id)?.desc } > {(desc) => (

)} ) } function DataTableSelectAll({ table, "aria-label": ariaLabel = "Select all rows on this page", }: { table: CoreTable "aria-label"?: string }) { const target = table as unknown as AnyCoreTable return ( [ state.rowSelection, state.pagination, state.globalFilter, ]} > {() => { const all = target.getIsAllPageRowsSelected() const some = target.getIsSomePageRowsSelected() return ( target.toggleAllPageRowsSelected(checked) } /> ) }} ) } function DataTableSelectRow({ row, "aria-label": ariaLabel = "Select row", }: { row: Row "aria-label"?: string }) { const target = row as unknown as AnyRow return ( Boolean(state.rowSelection[target.id])} > {() => ( { const event = details.event as Event & { shiftKey?: boolean } target.getToggleSelectedHandler()({ target: { checked }, shiftKey: Boolean(event?.shiftKey), nativeEvent: event, }) }} /> )} ) } type DataTableContentProps = { className?: string emptyMessage?: React.ReactNode loading?: boolean loadingRows?: number pinStart?: string[] stickyHeader?: boolean containerClassName?: string swipeSelect?: boolean } function scrollParentOf(element: HTMLElement | null) { return element && element.scrollHeight > element.clientHeight + 1 ? element : null } function useSwipeSelect( table: AnyCoreTable, containerRef: React.RefObject, enabled: boolean ) { return (event: React.PointerEvent) => { if ( !enabled || !event.shiftKey || event.button !== 0 || event.pointerType === "touch" ) { return } const target = event.target as Element const box = target.closest("[data-slot=checkbox]") const startRow = box?.closest("tr[data-row-id]") if (!box || !startRow) { return } const ids = table.getRowModel().rows.map((row) => row.id) const anchor = ids.indexOf(startRow.dataset.rowId ?? "") const anchorRow = anchor === -1 ? undefined : table.getRow(ids[anchor]) if (!anchorRow || !anchorRow.getCanSelect()) { return } event.preventDefault() const value = !anchorRow.getIsSelected() const snapshot: RowSelectionState = { ...table.store.state.rowSelection } const body = event.currentTarget const container = containerRef.current let current = anchor let dragged = false let pointer = { x: event.clientX, y: event.clientY } let frame = 0 const apply = (index: number) => { const next: RowSelectionState = { ...snapshot } const from = Math.min(anchor, index) const to = Math.max(anchor, index) for (let position = from; position <= to; position++) { const row = table.getRow(ids[position]) if (!row?.getCanSelect()) { continue } if (value) { next[ids[position]] = true } else { delete next[ids[position]] } } table.setRowSelection(next) } const visibleBounds = () => { const scroller = scrollParentOf(container) const bounds = scroller ? scroller.getBoundingClientRect() : { top: 0, bottom: window.innerHeight } const head = scroller?.querySelector("thead") const top = head ? Math.max(bounds.top, head.getBoundingClientRect().bottom) : bounds.top return { top, bottom: bounds.bottom } } const hitTest = () => { const { top, bottom } = visibleBounds() const rows = body.getBoundingClientRect() const y = Math.min(Math.max(pointer.y, top + 6), bottom - 6) const x = Math.min(Math.max(pointer.x, rows.left + 1), rows.right - 1) const hit = document .elementFromPoint(x, y) ?.closest("tr[data-row-id]") let index = hit ? ids.indexOf(hit.dataset.rowId ?? "") : -1 if (index === -1) { if (pointer.y < rows.top) { index = 0 } else if (pointer.y > rows.bottom) { index = ids.length - 1 } else { return } } if (index === current) { return } current = index if (index !== anchor) { dragged = true } if (dragged) { apply(index) } } const autoScroll = () => { frame = 0 const scroller = scrollParentOf(container) const { top, bottom } = visibleBounds() const edge = 40 let delta = 0 if (pointer.y < top + edge) { delta = -Math.ceil((top + edge - pointer.y) / 4) } else if (pointer.y > bottom - edge) { delta = Math.ceil((pointer.y - (bottom - edge)) / 4) } if (delta === 0) { return } if (scroller) { scroller.scrollTop += delta } else { window.scrollBy(0, delta) } hitTest() frame = requestAnimationFrame(autoScroll) } const onMove = (moveEvent: PointerEvent) => { pointer = { x: moveEvent.clientX, y: moveEvent.clientY } hitTest() if (!frame) { frame = requestAnimationFrame(autoScroll) } } const stopClick = (clickEvent: MouseEvent) => { clickEvent.preventDefault() clickEvent.stopPropagation() } const onUp = () => { window.removeEventListener("pointermove", onMove) window.removeEventListener("pointerup", onUp) window.removeEventListener("pointercancel", onUp) cancelAnimationFrame(frame) container?.removeAttribute("data-swipe-selecting") if (dragged) { window.addEventListener("click", stopClick, { capture: true, once: true, }) setTimeout( () => window.removeEventListener("click", stopClick, { capture: true }), 0 ) } } container?.setAttribute("data-swipe-selecting", "") window.addEventListener("pointermove", onMove) window.addEventListener("pointerup", onUp) window.addEventListener("pointercancel", onUp) } } function DataTableContent({ className, emptyMessage = "No results.", loading = false, loadingRows = 5, pinStart, stickyHeader = false, containerClassName, swipeSelect = true, }: DataTableContentProps) { const table = useDataTableContext() const containerRef = React.useRef(null) const onSwipeStart = useSwipeSelect( table as unknown as AnyCoreTable, containerRef, swipeSelect ) const leafColumns = table.getVisibleLeafColumns() const firstData = leafColumns.find((column) => column.id !== "select") const pinned = ( pinStart ?? ["select", ...(firstData ? [firstData.id] : [])] ).filter((id) => leafColumns.some((column) => column.id === id)) const rows = table.getRowModel().rows const pageCount = table.getPageCount() const pageIndex = table.state.pagination.pageIndex React.useEffect(() => { if (pageCount > 0 && pageIndex > pageCount - 1) { table.setPageIndex(pageCount - 1) } }, [pageCount, pageIndex, table]) const alignOf = (column: { columnDef: { meta?: unknown } }) => ( column.columnDef.meta as { align?: "start" | "center" | "end" } | undefined )?.align const pinProps = (columnId: string) => { const index = pinned.indexOf(columnId) if (index === -1) { return { "data-pin-column": undefined } } return { pinned: "start" as const, pinnedEdge: index === pinned.length - 1, "data-pin-column": columnId, } } React.useLayoutEffect(() => { const container = containerRef.current if (!container) { return } const apply = () => { let offset = 0 for (const id of pinned) { const cells = container.querySelectorAll( `[data-pin-column="${CSS.escape(id)}"]` ) cells.forEach((cell) => cell.style.setProperty("--pin-offset", `${offset}px`) ) const head = container.querySelector( `th[data-pin-column="${CSS.escape(id)}"]` ) offset += head?.getBoundingClientRect().width ?? 0 } } apply() const observer = typeof ResizeObserver === "function" ? new ResizeObserver(apply) : null const head = container.querySelector("thead") if (head) { observer?.observe(head) } return () => observer?.disconnect() }) return ( {table.getHeaderGroups().map((group) => ( {group.headers.map((header) => { const sorted = header.column.getIsSorted() return ( {header.isPlaceholder ? null : ( )} ) })} ))} {loading ? ( Array.from({ length: loadingRows }, (_, index) => ( {leafColumns.map((column) => ( ))} )) ) : rows.length === 0 ? ( {emptyMessage} ) : ( rows.map((row) => ( {row.getVisibleCells().map((cell) => ( ))} )) )}

) } const menuPopupClassName = "relative max-h-(--available-height) max-w-[min(var(--available-width),20rem)] min-w-44 origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-none rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-(length:--hairline) forced-colors:border ring-foreground/10 transition-[opacity,scale] duration-150 ease-out-quint outline-none focus-visible:outline-hidden data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none motion-safe:data-starting-style:scale-96 motion-reduce:transition-opacity" const menuItemClassName = "relative flex min-h-8 w-full min-w-0 cursor-default items-center gap-2 rounded-[max(calc(var(--radius-sm)*0.5),calc(var(--radius-lg)-0.25rem))] py-1.5 ps-8 pe-2 text-start text-sm outline-none focus-visible:outline-hidden select-none data-highlighted:bg-accent forced-colors:data-highlighted:outline-2 forced-colors:data-highlighted:-outline-offset-2 forced-colors:data-highlighted:outline-solid data-highlighted:text-accent-foreground pointer-coarse:min-h-11" type DataTableViewOptionsProps = { label?: string groupLabel?: string getLabel?: (column: AnyColumn) => string } function DataTableViewOptions({ label = "View", groupLabel = "Toggle columns", getLabel = columnLabel, }: DataTableViewOptionsProps) { const table = useDataTableContext() const columns = table .getAllLeafColumns() .filter((column) => column.getCanHide()) as AnyColumn[] return ( } > {label} {groupLabel} {columns.map((column) => ( column.toggleVisibility(checked) } closeOnClick={false} className={menuItemClassName} > {getLabel(column)} ))} ) } type DataTablePaginationLabels = { rowsPerPage: string firstPage: string previousPage: string nextPage: string lastPage: string } type DataTablePaginationProps = React.ComponentProps<"div"> & { pageSizes?: number[] showSelection?: boolean labels?: Partial formatSelection?: (selected: number, total: number) => React.ReactNode formatRows?: (total: number) => React.ReactNode formatPage?: (page: number, pageCount: number) => React.ReactNode } const numberFormat = new Intl.NumberFormat("en-US") const defaultPaginationLabels: DataTablePaginationLabels = { rowsPerPage: "Rows per page", firstPage: "First page", previousPage: "Previous page", nextPage: "Next page", lastPage: "Last page", } function defaultFormatSelection(selected: number, total: number) { return `${numberFormat.format(selected)} of ${numberFormat.format(total)} row${total === 1 ? "" : "s"} selected` } function defaultFormatRows(total: number) { return `${numberFormat.format(total)} row${total === 1 ? "" : "s"}` } function defaultFormatPage(page: number, pageCount: number) { return `Page ${numberFormat.format(page)} of ${numberFormat.format(pageCount)}` } function DataTablePagination({ className, pageSizes = [10, 20, 50, 100], showSelection = true, labels: labelOverrides, formatSelection = defaultFormatSelection, formatRows = defaultFormatRows, formatPage = defaultFormatPage, ...props }: DataTablePaginationProps) { const labels = { ...defaultPaginationLabels, ...labelOverrides } const table = useDataTableContext() const { pageIndex, pageSize } = table.state.pagination const pageCount = Math.max(1, table.getPageCount()) const selected = Object.keys(table.state.rowSelection).length const total = table.getFilteredRowModel().rows.length return (

{showSelection ? formatSelection(selected, total) : formatRows(total)}

{labels.rowsPerPage}

{formatPage(pageIndex + 1, pageCount)}

) } export { DataTable, DataTableToolbar, DataTableSearch, DataTableViewOptions, DataTableContent, DataTableColumnHeader, DataTableSelectAll, DataTableSelectRow, DataTablePagination, createDataTableColumns, dataTableFeatures, useDataTable, useDataTableContext, } export type { DataTableFeatures, DataTableInstance, DataTablePaginationLabels, UseDataTableOptions, } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","@tanstack/react-table@^9.2.6",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table@^9.2.6"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/button.json","https://hextaui.com/r/checkbox.json","https://hextaui.com/r/skeleton.json","https://hextaui.com/r/table.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/data-table.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]