ivt
Version:
Ivt Components Library
1 lines • 84.2 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../node_modules/lucide-react/dist/esm/icons/arrow-down.js","../../node_modules/lucide-react/dist/esm/icons/arrow-up.js","../../node_modules/@tanstack/react-table/build/lib/index.mjs","../../src/components/default/data-table/DataTablePagination.tsx","../../src/components/default/data-table/DataTablePaginationSkeleton.tsx","../../src/components/default/data-table/DataTableRowSkeleton.tsx","../../src/components/default/data-table/DataTableMainFrame.tsx","../../src/utils/treeReorder.ts","../../src/components/default/data-table/DataTableMainFrameSortable.tsx","../../src/components/default/data-table/DataTableSearch.tsx","../../src/components/default/data-table/DataTableSkeleton.tsx","../../src/components/default/data-table/DataTableStatus.tsx","../../src/components/default/data-table/DataTableViewOptions.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.479.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\"path\", { d: \"M12 5v14\", key: \"s699le\" }],\n [\"path\", { d: \"m19 12-7 7-7-7\", key: \"1idqje\" }]\n];\nconst ArrowDown = createLucideIcon(\"ArrowDown\", __iconNode);\n\nexport { __iconNode, ArrowDown as default };\n//# sourceMappingURL=arrow-down.js.map\n","/**\n * @license lucide-react v0.479.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n [\"path\", { d: \"m5 12 7-7 7 7\", key: \"hav0vg\" }],\n [\"path\", { d: \"M12 19V5\", key: \"x0mq9r\" }]\n];\nconst ArrowUp = createLucideIcon(\"ArrowUp\", __iconNode);\n\nexport { __iconNode, ArrowUp as default };\n//# sourceMappingURL=arrow-up.js.map\n","/**\n * react-table\n *\n * Copyright (c) TanStack\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\nimport * as React from 'react';\nimport { createTable } from '@tanstack/table-core';\nexport * from '@tanstack/table-core';\n\n//\n\n/**\n * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.\n */\nfunction flexRender(Comp, props) {\n return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React.createElement(Comp, props) : Comp;\n}\nfunction isReactComponent(component) {\n return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);\n}\nfunction isClassComponent(component) {\n return typeof component === 'function' && (() => {\n const proto = Object.getPrototypeOf(component);\n return proto.prototype && proto.prototype.isReactComponent;\n })();\n}\nfunction isExoticComponent(component) {\n return typeof component === 'object' && typeof component.$$typeof === 'symbol' && ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description);\n}\nfunction useReactTable(options) {\n // Compose in the generic options to the user options\n const resolvedOptions = {\n state: {},\n // Dummy state\n onStateChange: () => {},\n // noop\n renderFallbackValue: null,\n ...options\n };\n\n // Create a new table and store it in state\n const [tableRef] = React.useState(() => ({\n current: createTable(resolvedOptions)\n }));\n\n // By default, manage table state here using the table's initial state\n const [state, setState] = React.useState(() => tableRef.current.initialState);\n\n // Compose the default state above with any user state. This will allow the user\n // to only control a subset of the state if desired.\n tableRef.current.setOptions(prev => ({\n ...prev,\n ...options,\n state: {\n ...state,\n ...options.state\n },\n // Similarly, we'll maintain both our internal state and any user-provided\n // state.\n onStateChange: updater => {\n setState(updater);\n options.onStateChange == null || options.onStateChange(updater);\n }\n }));\n return tableRef.current;\n}\n\nexport { flexRender, useReactTable };\n//# sourceMappingURL=index.mjs.map\n","\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { PaginationEllipsis, PaginationItem } from \"@/components/ui/pagination\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\n\ninterface DataTablePaginationProps<TData> {\n\ttable: Table<TData>;\n\tpageSizeOptions?: number[];\n\tdataLabel?: string;\n\tinfoExtraLabel?: React.ReactNode;\n\tshowPaginationControls?: boolean;\n\tshowDataLabel?: boolean;\n\tfooterAction?: React.ReactNode;\n\tmaxVisualRows?: number;\n}\n\nexport function DataTablePagination<TData>({\n\ttable,\n\tpageSizeOptions = [20, 30, 50, 100, 200],\n\tdataLabel = \"Fundos\",\n\tinfoExtraLabel,\n\tshowPaginationControls = true,\n\tshowDataLabel = true,\n\tfooterAction,\n\tmaxVisualRows,\n}: DataTablePaginationProps<TData>) {\n\tconst pageSize = pageSizeOptions[0];\n\tconst currentPage = table.getState().pagination.pageIndex + 1;\n\tconst rowCount = table.getRowCount();\n\tconst totalPageCount = Math.ceil(rowCount / table.getState().pagination.pageSize);\n\n\tconst renderPageNumbers = () => {\n\t\tconst items: React.ReactNode[] = [];\n\t\tconst maxVisiblePages = 3;\n\n\t\tif (totalPageCount <= maxVisiblePages) {\n\t\t\tfor (let i = 1; i <= totalPageCount; i++) {\n\t\t\t\titems.push(\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant={currentPage === i ? \"outline\" : \"ghost\"}\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tonClick={() => table.setPageIndex(i - 1)}\n\t\t\t\t\t\tclassName=\"size-9\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{i}\n\t\t\t\t\t</Button>,\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\titems.push(\n\t\t\t\t<Button\n\t\t\t\t\tvariant={currentPage === 1 ? \"outline\" : \"ghost\"}\n\t\t\t\t\tkey={1}\n\t\t\t\t\tonClick={() => table.setPageIndex(0)}\n\t\t\t\t\tclassName=\"size-9\"\n\t\t\t\t>\n\t\t\t\t\t1\n\t\t\t\t</Button>,\n\t\t\t);\n\n\t\t\tconst start = Math.max(2, Math.min(currentPage, totalPageCount - (maxVisiblePages - 1)));\n\t\t\tconst end = Math.min(totalPageCount - 1, start + maxVisiblePages - 2);\n\n\t\t\tif (start > 2) {\n\t\t\t\titems.push(\n\t\t\t\t\t<PaginationItem key=\"ellipsis-start\" className=\"list-none\">\n\t\t\t\t\t\t<PaginationEllipsis />\n\t\t\t\t\t</PaginationItem>,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tfor (let i = start; i <= end; i++) {\n\t\t\t\titems.push(\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant={currentPage === i ? \"outline\" : \"ghost\"}\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tonClick={() => table.setPageIndex(i - 1)}\n\t\t\t\t\t\tclassName=\"size-9\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{i}\n\t\t\t\t\t</Button>,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif (end < totalPageCount - 1) {\n\t\t\t\titems.push(\n\t\t\t\t\t<PaginationItem key=\"ellipsis-end\" className=\"list-none\">\n\t\t\t\t\t\t<PaginationEllipsis />\n\t\t\t\t\t</PaginationItem>,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\titems.push(\n\t\t\t\t<Button\n\t\t\t\t\tvariant={currentPage === totalPageCount ? \"outline\" : \"ghost\"}\n\t\t\t\t\tkey={totalPageCount}\n\t\t\t\t\tonClick={() => table.setPageIndex(totalPageCount - 1)}\n\t\t\t\t>\n\t\t\t\t\t{totalPageCount}\n\t\t\t\t</Button>,\n\t\t\t);\n\t\t}\n\n\t\treturn items;\n\t};\n\n\tif (!showPaginationControls && !showDataLabel) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"mt-4 flex flex-wrap items-center justify-between gap-2\">\n\t\t\t{showDataLabel && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"text-muted-foreground flex items-center gap-4 text-sm\">\n\t\t\t\t\t\t<p className=\"ml-2\">\n\t\t\t\t\t\t\tMostrando{\" \"}\n\t\t\t\t\t\t\t{(maxVisualRows\n\t\t\t\t\t\t\t\t? Math.min(table.getRowModel().rows.length, maxVisualRows)\n\t\t\t\t\t\t\t\t: table.getRowModel().rows.length\n\t\t\t\t\t\t\t).toLocaleString()}{\" \"}\n\t\t\t\t\t\t\tde {rowCount} {dataLabel}. {infoExtraLabel && infoExtraLabel}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>{footerAction && <div>{footerAction}</div>}</div>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{showPaginationControls && (\n\t\t\t\t<div className=\"flex flex-wrap items-center justify-between gap-2 gap-y-4 ml-auto\">\n\t\t\t\t\t<Select\n\t\t\t\t\t\tvalue={String(table.getState().pagination.pageSize) || String(pageSize)}\n\t\t\t\t\t\tonValueChange={(value) => table.setPageSize(Number(value))}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectTrigger className=\"w-fit\">\n\t\t\t\t\t\t\t<SelectValue\n\t\t\t\t\t\t\t\tplaceholder={`Mostrar ${table.getState().pagination.pageSize || pageSize}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t{rowCount && (rowCount === 0 || rowCount < pageSize) ? (\n\t\t\t\t\t\t\t\t<SelectItem value={String(pageSize)}>Mostrar {pageSize}</SelectItem>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tpageSizeOptions.map((pageSize) => (\n\t\t\t\t\t\t\t\t\t<SelectItem key={pageSize} value={String(pageSize)}>\n\t\t\t\t\t\t\t\t\t\tMostrar {pageSize}\n\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t</Select>\n\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2 gap-y-4\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => table.previousPage()}\n\t\t\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\n\t\t\t\t\t\t\taria-label=\"Ir para página anterior\"\n\t\t\t\t\t\t\tclassName=\"gap-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronLeftIcon className=\"size-4\" />\n\t\t\t\t\t\t\tAnterior\n\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t<div className=\"flex gap-2\">{renderPageNumbers()}</div>\n\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => table.nextPage()}\n\t\t\t\t\t\t\tdisabled={!table.getCanNextPage()}\n\t\t\t\t\t\t\taria-label=\"Ir para próxima página\"\n\t\t\t\t\t\t\tclassName=\"gap-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tPróximo\n\t\t\t\t\t\t\t<ChevronRightIcon className=\"size-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import React from \"react\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\n\nexport const DataTablePaginationSkeleton: React.FC = ({ className }: { className?: string }) => {\n\treturn (\n\t\t<div className=\"mt-4 flex flex-wrap items-center justify-between gap-2\">\n\t\t\t<Skeleton className={cn(\"h-5 w-40\", className)} />\n\t\t\t<div className=\"flex flex-wrap items-center justify-between gap-2 gap-y-4\">\n\t\t\t\t<Skeleton className={cn(\"h-10 w-28\", className)} />\n\t\t\t\t<Skeleton className={cn(\"h-9 w-[16rem]\", className)} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import React from \"react\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { TableCell, TableRow } from \"@/components/ui/table\";\n\ninterface DataTableRowSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n\tcolumnCount: number;\n\trowCount?: number;\n\tcellWidths?: string[];\n\tshrinkZero?: boolean;\n}\n\nexport function DataTableRowSkeleton(props: DataTableRowSkeletonProps) {\n\tconst { columnCount, rowCount = 8, cellWidths = [\"auto\"], shrinkZero = false } = props;\n\n\treturn (\n\t\t<>\n\t\t\t{Array.from({ length: rowCount }).map((_, i) => (\n\t\t\t\t<TableRow key={`row-${String(i)}`} className=\"hover:bg-transparent\">\n\t\t\t\t\t{Array.from({ length: columnCount }).map((_, j) => (\n\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\tkey={`cell-${String(i)}-${j}`}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: cellWidths[j],\n\t\t\t\t\t\t\t\tminWidth: shrinkZero ? cellWidths[j] : \"auto\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Skeleton className=\"h-6 w-full\" />\n\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t))}\n\t\t\t\t</TableRow>\n\t\t\t))}\n\t\t</>\n\t);\n}\n","\"use client\";\n\nimport { CaretSortIcon } from \"@radix-ui/react-icons\";\nimport type { ColumnDef, Row, Table as TableType } from \"@tanstack/react-table\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"lucide-react\";\nimport React from \"react\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\nimport { DataTablePagination } from \"./DataTablePagination\";\nimport { DataTablePaginationSkeleton } from \"./DataTablePaginationSkeleton\";\nimport { DataTableRowSkeleton } from \"./DataTableRowSkeleton\";\n\ninterface DataTableViewOptionsProps<TData, TValue> {\n\ttable: TableType<TData>;\n\tcolumns: ColumnDef<TData, TValue>[];\n\tsetQueryParams?: React.Dispatch<React.SetStateAction<ListParams>>;\n\tisLoadingTable?: boolean;\n\tdataLabel: string;\n\tactionColumns?: string[];\n\tmessageEmpty?: React.ReactNode;\n\tdividingColumnKey?: string[];\n\tloadingContent?: React.ReactNode;\n\tpageSizeOptions?: number[];\n\tclassName?: string;\n\tisScrollable?: boolean;\n\tscrollMaxHeightClass?: string;\n\tfixedHeader?: boolean;\n\tshowPagination?: boolean;\n\trenderTooltip?: (row: Row<TData>, rowContent: React.ReactNode) => React.ReactNode;\n\trenderSubComponent?: (props: { row: Row<TData> }) => React.ReactNode;\n\tinfoExtraLabel?: React.ReactNode;\n\tshowDataLabel?: boolean;\n\tfooterAction?: React.ReactNode;\n\tmaxVisualRows?: number;\n}\n\ninterface ListParams {\n\t[propName: string]: string | string[];\n}\n\nexport const DataTableMainFrame = <TData, TValue>({\n\ttable,\n\tcolumns,\n\tisLoadingTable,\n\tloadingContent,\n\tsetQueryParams,\n\tdataLabel,\n\tactionColumns = [],\n\tmessageEmpty = <>Sem resultados</>,\n\tdividingColumnKey,\n\tpageSizeOptions,\n\tclassName,\n\tscrollMaxHeightClass = \"sm:max-h-[calc(100vh-300px)]\",\n\tisScrollable = false,\n\tfixedHeader = false,\n\tshowPagination = true,\n\tshowDataLabel = true,\n\trenderTooltip,\n\trenderSubComponent,\n\tinfoExtraLabel,\n\tfooterAction,\n\tmaxVisualRows,\n}: DataTableViewOptionsProps<TData, TValue>) => {\n\tconst currentPage = Number(table.getState().pagination.pageIndex).toString();\n\tconst pageSize = Number(table.getState().pagination.pageSize).toString();\n\tconst sorting = table.getState().sorting;\n\n\tReact.useEffect(() => {\n\t\tif (!setQueryParams) return;\n\t\tconst sortingParams = { sortingBy: \"\", order: \"\" };\n\t\tif (sorting.length > 0) {\n\t\t\tsortingParams.sortingBy = sorting[0].id;\n\t\t\tsortingParams.order = sorting[0].desc ? \"DESC\" : \"ASC\";\n\t\t}\n\t\tsetQueryParams((prev) => ({\n\t\t\t...prev,\n\t\t\tpageSize,\n\t\t\tpage: currentPage,\n\t\t\t...sortingParams,\n\t\t}));\n\t}, [currentPage, pageSize, setQueryParams, sorting]);\n\n\tconst renderTableBodyContent = () => {\n\t\tif (isLoadingTable && !loadingContent) {\n\t\t\treturn <DataTableRowSkeleton columnCount={table.getAllColumns().length} />;\n\t\t}\n\n\t\tif (isLoadingTable && loadingContent) {\n\t\t\treturn (\n\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t{loadingContent}\n\t\t\t\t</TableCell>\n\t\t\t);\n\t\t}\n\n\t\tif (table.getRowModel().rows.length === 0) {\n\t\t\treturn (\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t\t<span className=\"inline-block max-w-120 text-wrap wrap-break-word\">{messageEmpty}</span>\n\t\t\t\t\t</TableCell>\n\t\t\t\t</TableRow>\n\t\t\t);\n\t\t}\n\n\t\tconst rows = table.getRowModel().rows;\n\t\tconst rowsToRender = maxVisualRows ? rows.slice(0, maxVisualRows) : rows;\n\n\t\treturn rowsToRender.map((row: Row<TData>, index) => {\n\t\t\t// Se estivermos usando renderSubComponent (modo Master-Detail),\n\t\t\t// ignoramos as sub-linhas no loop principal para não duplicá-las\n\t\t\tif (renderSubComponent && row.depth > 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst rowKey = row.id ?? String(index);\n\n\t\t\tconst rowContent = row.getVisibleCells().map((cell) => {\n\t\t\t\tconst content = flexRender(cell.column.columnDef.cell, cell.getContext());\n\t\t\t\treturn (\n\t\t\t\t\t<TableCell\n\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"p-2\",\n\t\t\t\t\t\t\tdividingColumnKey?.includes(cell.column.id) && \"border-r\",\n\t\t\t\t\t\t\tcell.column.columnDef.meta?.className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TableCell>\n\t\t\t\t);\n\t\t\t});\n\n\t\t\tconst rowWithTooltip = renderTooltip ? (\n\t\t\t\trenderTooltip(row, rowContent)\n\t\t\t) : (\n\t\t\t\t<TableRow\n\t\t\t\t\tkey={rowKey}\n\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\tclassName={cn(\"even:bg-body/50\")}\n\t\t\t\t>\n\t\t\t\t\t{rowContent}\n\t\t\t\t</TableRow>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<React.Fragment key={rowKey}>\n\t\t\t\t\t{rowWithTooltip}\n\t\t\t\t\t{row.getIsExpanded() && renderSubComponent && (\n\t\t\t\t\t\t<TableRow className={cn(\"even:bg-body/50\")}>\n\t\t\t\t\t\t\t<TableCell colSpan={row.getVisibleCells().length}>\n\t\t\t\t\t\t\t\t{renderSubComponent({ row })}\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t)}\n\t\t\t\t</React.Fragment>\n\t\t\t);\n\t\t});\n\t};\n\n\tconst shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;\n\n\tconst tableContent = (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-background mx-1 h-full w-full rounded-md border whitespace-nowrap\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative w-full overflow-auto\",\n\t\t\t\t\tshouldForceMinHeight && \"force-min-height\",\n\t\t\t\t\tisScrollable && scrollMaxHeightClass && scrollMaxHeightClass,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Table>\n\t\t\t\t\t<TableHeader\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tfixedHeader && \"bg-background sticky top-0 z-10 shadow-[0_1px_0_hsl(240_6%_90%)]\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\t\t\tcolumn: { id },\n\t\t\t\t\t\t\t\t\t\t} = header;\n\n\t\t\t\t\t\t\t\t\t\tconst isActionsColumn = [\"actions\", ...actionColumns].includes(id);\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\tdividingColumnKey?.includes(id) ? \"border-r\" : \"\",\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.meta?.className,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"static\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder ? null : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!isActionsColumn && header.column.getCanSort()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"flex w-fit items-center justify-start cursor-pointer gap-1 font-medium\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.meta?.headerClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: !isActionsColumn\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? header.column.getToggleSortingHandler()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{flexRender(header.column.columnDef.header, header.getContext())}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{(!isActionsColumn &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tasc: <ArrowDownIcon className=\"h-3.5 w-3.5\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc: <ArrowUpIcon className=\"h-3.5 w-3.5\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse: <CaretSortIcon className=\"h-4 w-4\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}[header.column.getIsSorted() as string]) ?? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ArrowDownIcon className=\"h-3.5 w-3.5\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TableHeader>\n\n\t\t\t\t\t<TableBody>{renderTableBodyContent()}</TableBody>\n\t\t\t\t</Table>\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{tableContent}\n\t\t\t{isScrollable ? null : isLoadingTable ? (\n\t\t\t\t<DataTablePaginationSkeleton />\n\t\t\t) : (\n\t\t\t\t<DataTablePagination\n\t\t\t\t\ttable={table}\n\t\t\t\t\tdataLabel={dataLabel}\n\t\t\t\t\tpageSizeOptions={pageSizeOptions}\n\t\t\t\t\tinfoExtraLabel={infoExtraLabel}\n\t\t\t\t\tshowPaginationControls={showPagination}\n\t\t\t\t\tshowDataLabel={showDataLabel}\n\t\t\t\t\tfooterAction={footerAction}\n\t\t\t\t\tmaxVisualRows={maxVisualRows}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n","// Utils para manipular árvores de forma imutável\n/** biome-ignore-all lint/suspicious/noExplicitAny: <any> */\n\nexport interface TreeItem {\n\tid: string | number;\n\tsubRows?: TreeItem[];\n\t[key: string]: any;\n}\n\nexport type TreeData<T> = T & {\n\tid: string | number;\n\tsubRows?: TreeData<T>[];\n};\n\nexport interface FindResult {\n\tpath: (number | string)[];\n\tnode: TreeItem;\n}\n\n// Encontra um item e retorna caminho + referência\nexport function findItemPath(\n\ttree: TreeItem[],\n\tid: string | number,\n\tpath: (number | string)[] = [],\n): FindResult | null {\n\tfor (let i = 0; i < tree.length; i++) {\n\t\tconst node = tree[i];\n\n\t\t// Encontrou o item\n\t\tif (node.id === id) {\n\t\t\treturn { path: [...path, i], node };\n\t\t}\n\n\t\t// Recursão em subRows\n\t\tif (Array.isArray(node.subRows) && node.subRows.length > 0) {\n\t\t\tconst result = findItemPath(node.subRows, id, [...path, i, \"subRows\"]);\n\t\t\tif (result) return result;\n\t\t}\n\t}\n\n\treturn null;\n}\n\n// Copia profunda (para não mutar)\nexport function clone<T>(obj: T): T {\n\treturn JSON.parse(JSON.stringify(obj));\n}\n\nexport function removeAtPath(tree: TreeItem[], path: (number | string)[]): TreeItem {\n\tlet ref: any = tree;\n\n\tfor (let i = 0; i < path.length - 1; i++) {\n\t\tref = ref[path[i]];\n\t}\n\n\tconst index = path[path.length - 1] as number;\n\tconst removed = ref.splice(index, 1)[0];\n\treturn removed;\n}\n\nexport function insertAtPath(tree: TreeItem[], path: (number | string)[], item: TreeItem): void {\n\tlet ref: any = tree;\n\n\tfor (let i = 0; i < path.length - 1; i++) {\n\t\tref = ref[path[i]];\n\t}\n\n\tconst index = path[path.length - 1] as number;\n\tref.splice(index, 0, item);\n}\n\nexport function toTreeItems<T extends { subRows?: T[] }>(\n\trows: T[],\n\tgetId: (item: T) => string | number,\n): TreeItem[] {\n\treturn rows.map((item) => ({\n\t\t...item,\n\t\tid: getId(item),\n\t\tsubRows: item.subRows ? toTreeItems(item.subRows, getId) : [],\n\t}));\n}\n","import { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport { CaretSortIcon } from \"@radix-ui/react-icons\";\nimport type { ColumnDef, Row, Table as TableType } from \"@tanstack/react-table\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { Sortable, SortableItem } from \"@/components/ui/sortable\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\nimport { findItemPath, insertAtPath, removeAtPath, TreeData } from \"@/utils/treeReorder\";\nimport { DataTablePagination } from \"./DataTablePagination\";\nimport { DataTablePaginationSkeleton } from \"./DataTablePaginationSkeleton\";\nimport { DataTableRowSkeleton } from \"./DataTableRowSkeleton\";\n\ninterface DataTableViewOptionsProps<TData, TValue> {\n\ttable: TableType<TData>;\n\tcolumns: ColumnDef<TData, TValue>[];\n\tsetQueryParams?: React.Dispatch<React.SetStateAction<ListParams>>;\n\tisLoadingTable?: boolean;\n\tdataLabel: string;\n\tactionColumns?: string[];\n\tdata: TData[];\n\tonDataChange?: (newData: TData[]) => void;\n\tmessageEmpty?: React.ReactNode;\n\trowKey: keyof TData | Array<keyof TData> | ((row: TData) => string | number);\n\tdividingColumnKey?: string[];\n\tloadingContent?: React.ReactNode;\n\tpageSizeOptions?: number[];\n\tclassName?: string;\n\tisScrollable?: boolean;\n\tscrollMaxHeightClass?: string;\n\tfixedHeader?: boolean;\n\tshowPagination?: boolean;\n\trenderTooltip?: (row: Row<TData>, rowContent: React.ReactNode) => React.ReactNode;\n\tinfoExtraLabel?: React.ReactNode;\n\tshowDataLabel?: boolean;\n\tfooterAction?: React.ReactNode;\n\t// Sortable props\n\tsortableValue?: TreeData<TData>[];\n\tsortableOnValueChange?: (items: TreeData<TData>[]) => void;\n\tsortableOnDragStart?: (event: DragStartEvent) => void;\n\tsortableOnDragEnd?: (event: DragEndEvent) => void;\n\tmaxVisualRows?: number;\n}\n\ntype RowData = {\n\t// biome-ignore lint/suspicious/noExplicitAny: <any>\n\t[key: string]: any;\n};\n\ninterface ListParams {\n\t[propName: string]: string | string[];\n}\n\nconst getRowKey = <TData extends RowData>(\n\trow: TData,\n\trowKey: keyof TData | Array<keyof TData> | ((row: TData) => string | number),\n): string | number => {\n\tif (typeof rowKey === \"function\") {\n\t\treturn rowKey(row);\n\t}\n\n\tif (Array.isArray(rowKey)) {\n\t\tfor (const key of rowKey) {\n\t\t\tif (row[key] !== undefined && row[key] !== null) {\n\t\t\t\treturn row[key] as string | number;\n\t\t\t}\n\t\t}\n\t\treturn \"\";\n\t}\n\n\treturn row[rowKey] as string | number;\n};\n\nexport const DataTableMainFrameSortable = <TData extends RowData, TValue>({\n\ttable,\n\tcolumns,\n\tisLoadingTable,\n\tloadingContent,\n\tsetQueryParams,\n\tdataLabel,\n\tactionColumns = [],\n\tdata,\n\tmessageEmpty = <>Sem resultados</>,\n\tonDataChange,\n\trowKey,\n\tdividingColumnKey,\n\tpageSizeOptions,\n\tclassName,\n\tscrollMaxHeightClass = \"sm:max-h-[calc(100vh-300px)]\",\n\tisScrollable = false,\n\tfixedHeader = false,\n\tshowPagination = true,\n\tshowDataLabel = true,\n\trenderTooltip,\n\tinfoExtraLabel,\n\tfooterAction,\n\n\tsortableValue: propValue,\n\tsortableOnValueChange: propOnValueChange,\n\tsortableOnDragStart: propOnDragStart,\n\tsortableOnDragEnd: propOnDragEnd,\n\tmaxVisualRows,\n}: DataTableViewOptionsProps<TData, TValue>) => {\n\tconst currentPage = Number(table.getState().pagination.pageIndex).toString();\n\tconst pageSize = Number(table.getState().pagination.pageSize).toString();\n\tconst sorting = table.getState().sorting;\n\n\tconst [newData, setNewData] = React.useState<TData[]>(data);\n\n\tconst handleValueChange = (updatedData: TData[]) => {\n\t\tsetNewData(updatedData);\n\n\t\tif (onDataChange) {\n\t\t\tonDataChange(updatedData);\n\t\t}\n\t};\n\n\tReact.useEffect(() => {\n\t\tsetNewData(data);\n\t}, [data]);\n\n\tReact.useEffect(() => {\n\t\tif (!setQueryParams) return;\n\t\tconst sortingParams = { sortingBy: \"\", order: \"\" };\n\t\tif (sorting.length > 0) {\n\t\t\tsortingParams.sortingBy = sorting[0].id;\n\t\t\tsortingParams.order = sorting[0].desc ? \"DESC\" : \"ASC\";\n\t\t}\n\t\tsetQueryParams((prev) => ({\n\t\t\t...prev,\n\t\t\tpageSize,\n\t\t\tpage: currentPage,\n\t\t\t...sortingParams,\n\t\t}));\n\t}, [currentPage, pageSize, setQueryParams, sorting]);\n\n\tconst renderTableBodyContent = () => {\n\t\tif (isLoadingTable && !loadingContent) {\n\t\t\treturn <DataTableRowSkeleton columnCount={table.getAllColumns().length} />;\n\t\t}\n\n\t\tif (isLoadingTable && loadingContent) {\n\t\t\treturn (\n\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t{loadingContent}\n\t\t\t\t</TableCell>\n\t\t\t);\n\t\t}\n\n\t\tif (table.getRowModel().rows.length === 0) {\n\t\t\treturn (\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t\t<span className=\"inline-block max-w-120 text-wrap wrap-break-word\">{messageEmpty}</span>\n\t\t\t\t\t</TableCell>\n\t\t\t\t</TableRow>\n\t\t\t);\n\t\t}\n\n\t\tconst rows = table.getRowModel().rows;\n\t\tconst rowsToRender = maxVisualRows ? rows.slice(0, maxVisualRows) : rows;\n\n\t\treturn rowsToRender.map((row: Row<TData>) => {\n\t\t\tconst rowData = row.original;\n\t\t\tconst key = getRowKey(rowData, rowKey);\n\n\t\t\tconst rowContent = row.getVisibleCells().map((cell) => (\n\t\t\t\t<TableCell\n\t\t\t\t\tkey={cell.id}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"p-2 py-1\",\n\t\t\t\t\t\tdividingColumnKey?.includes(cell.column.id) && \"border-r\",\n\t\t\t\t\t\tcell.column.columnDef.meta?.className,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</TableCell>\n\t\t\t));\n\n\t\t\tconst baseRow = (\n\t\t\t\t<TableRow data-state={row.getIsSelected() && \"selected\"} className={cn(\"even:bg-body/50\")}>\n\t\t\t\t\t{rowContent}\n\t\t\t\t</TableRow>\n\t\t\t);\n\n\t\t\tconst wrappedRow = renderTooltip ? renderTooltip(row, rowContent) : baseRow;\n\n\t\t\treturn (\n\t\t\t\t<SortableItem key={row.id} value={key} asChild>\n\t\t\t\t\t{wrappedRow}\n\t\t\t\t</SortableItem>\n\t\t\t);\n\t\t});\n\t};\n\n\tconst [activeId, setActiveId] = React.useState<string | null>(null);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: <useMemo>\n\tconst siblings = React.useMemo(() => {\n\t\tif (!activeId)\n\t\t\treturn table.getRowModel().rows.map((row) => ({\n\t\t\t\t...row.original,\n\t\t\t\tid: getRowKey(row.original, rowKey),\n\t\t\t}));\n\n\t\tconst activeRow = table\n\t\t\t.getRowModel()\n\t\t\t.rows.find((row) => getRowKey(row.original, rowKey) === activeId);\n\t\tif (!activeRow) return [];\n\n\t\tconst parentId = activeRow.parentId;\n\n\t\treturn table\n\t\t\t.getRowModel()\n\t\t\t.rows.filter((row) => row.parentId === parentId)\n\t\t\t.map((row) => ({\n\t\t\t\t...row.original,\n\t\t\t\tid: getRowKey(row.original, rowKey),\n\t\t\t}));\n\t}, [activeId, table.getRowModel().rows, rowKey]);\n\n\tconst internalHandleDragStart = (event: DragStartEvent) => {\n\t\tsetActiveId(event.active.id as string);\n\t};\n\n\tconst internalHandleDragEnd = (event: DragEndEvent) => {\n\t\tsetActiveId(null);\n\t\tconst { active, over } = event;\n\t\tif (!active || !over) return;\n\n\t\tconst sourceId = active.id;\n\t\tconst targetId = over.id;\n\t\tif (sourceId === targetId) return;\n\n\t\tconst tree: TreeData<TData>[] = newData.map((item) => ({\n\t\t\t...item,\n\t\t\tid: getRowKey(item, rowKey),\n\t\t}));\n\n\t\tconst source = findItemPath(tree, sourceId);\n\t\tconst target = findItemPath(tree, targetId);\n\n\t\tif (!source || !target) return;\n\n\t\t// -----------------------------\n\t\t// 🔒 1. TRAVAR MOVIMENTAÇÃO ENTRE NÍVEIS DIFERENTES\n\t\t// -----------------------------\n\n\t\tconst sourcePath = source.path;\n\t\tconst targetPath = target.path;\n\n\t\t// Pega o \"caminho do pai\" (remove o último índice, que é o índice do item em si)\n\t\tconst sourceParentPath = sourcePath.slice(0, -1);\n\t\tconst targetParentPath = targetPath.slice(0, -1);\n\n\t\t// Compara se os arrays são iguais (mesmo tamanho e mesmos valores)\n\t\tconst isSameParent =\n\t\t\tsourceParentPath.length === targetParentPath.length &&\n\t\t\tsourceParentPath.every((val, index) => val === targetParentPath[index]);\n\n\t\tif (!isSameParent) {\n\t\t\treturn;\n\t\t}\n\n\t\t// -----------------------------\n\t\t// 🔄 2. MOVIMENTO PERMITIDO → REORDENAR\n\t\t// -----------------------------\n\n\t\tconst removedItem = removeAtPath(tree, sourcePath);\n\n\t\tconst destPath = [...targetPath];\n\t\tdestPath[destPath.length - 1] = targetPath[targetPath.length - 1];\n\n\t\tinsertAtPath(tree, destPath, removedItem);\n\n\t\thandleValueChange(tree);\n\t};\n\n\tconst shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;\n\n\tconst finalValue =\n\t\tpropValue ??\n\t\t(maxVisualRows\n\t\t\t? table.getRowModel().rows.slice(0, maxVisualRows)\n\t\t\t: table.getRowModel().rows\n\t\t).map((row) => ({\n\t\t\t...row.original,\n\t\t\tid: getRowKey(row.original, rowKey),\n\t\t}));\n\n\tconst finalOnValueChange = propOnValueChange ?? handleValueChange;\n\tconst finalOnDragStart = propOnDragStart ?? internalHandleDragStart;\n\tconst finalOnDragEnd = propOnDragEnd ?? internalHandleDragEnd;\n\n\treturn (\n\t\t<>\n\t\t\t<Sortable<TreeData<TData>>\n\t\t\t\tvalue={finalValue}\n\t\t\t\tcontextItems={siblings}\n\t\t\t\tonValueChange={finalOnValueChange}\n\t\t\t\tonDragStart={finalOnDragStart}\n\t\t\t\tonDragEnd={finalOnDragEnd}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"bg-background mx-1 h-full w-full rounded-md border whitespace-nowrap\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative w-full overflow-auto\",\n\t\t\t\t\t\t\tshouldForceMinHeight && \"force-min-height\",\n\t\t\t\t\t\t\tisScrollable && scrollMaxHeightClass && scrollMaxHeightClass,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Table>\n\t\t\t\t\t\t\t<TableHeader\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tfixedHeader && \"bg-background sticky top-0 z-10 shadow-[0_1px_0_hsl(240_6%_90%)]\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn: { id },\n\t\t\t\t\t\t\t\t\t\t\t\t} = header;\n\n\t\t\t\t\t\t\t\t\t\t\t\tconst isActionsColumn = [\"actions\", ...actionColumns].includes(id);\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdividingColumnKey?.includes(id) ? \"border-r\" : \"\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.meta?.className,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder ? null : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!isActionsColumn && header.column.getCanSort()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"flex w-fit items-center justify-start cursor-pointer gap-1 font-medium\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.meta?.headerClassName,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: !isActionsColumn\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? header.column.getToggleSortingHandler()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{flexRender(header.column.columnDef.header, header.getContext())}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{(!isActionsColumn &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tasc: <ArrowDownIcon className=\"h-3.5 w-3.5\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc: <ArrowUpIcon className=\"h-3.5 w-3.5\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse: <CaretSortIcon className=\"h-4 w-4\" />,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}[header.column.getIsSorted() as string]) ?? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ArrowDownIcon className=\"h-3.5 w-3.5\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TableHeader>\n\n\t\t\t\t\t\t\t<TableBody>{renderTableBodyContent()}</TableBody>\n\t\t\t\t\t\t</Table>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Sortable>\n\n\t\t\t{isScrollable ? null : isLoadingTable ? (\n\t\t\t\t<DataTablePaginationSkeleton />\n\t\t\t) : (\n\t\t\t\t<DataTablePagination\n\t\t\t\t\ttable={table}\n\t\t\t\t\tdataLabel={dataLabel}\n\t\t\t\t\tpageSizeOptions={pageSizeOptions}\n\t\t\t\t\tinfoExtraLabel={infoExtraLabel}\n\t\t\t\t\tshowPaginationControls={showPagination}\n\t\t\t\t\tshowDataLabel={showDataLabel}\n\t\t\t\t\tfooterAction={footerAction}\n\t\t\t\t\tmaxVisualRows={maxVisualRows}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n","\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { SearchIcon } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\n\ninterface DataTableSearchProps<TData> {\n\ttable: Table<TData>;\n\tkeySearch: string;\n\tplaceholder: string;\n}\n\nexport function DataTableSearch<TData>({\n\ttable,\n\tkeySearch,\n\tplaceholder,\n}: DataTableSearchProps<TData>) {\n\treturn (\n\t\t<div className=\"relative w-full max-w-sm\">\n\t\t\t<SearchIcon className=\"text-muted-foreground absolute top-3 left-3 h-4 w-4\" />\n\t\t\t<Input\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={(table.getColumn(keySearch)?.getFilterValue() as string) ?? \"\"}\n\t\t\t\tonChange={(event) => table.getColumn(keySearch)?.setFilterValue(event.target.value)}\n\t\t\t\tclassName=\"w-full pl-8 xl:w-80\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n","import React from \"react\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * The number of columns in the table.\n\t * @type number\n\t */\n\tcolumnCount: number;\n\n\t/**\n\t * The number of rows in the table.\n\t * @default 10\n\t * @type number | undefined\n\t */\n\trowCount?: number;\n\n\t/**\n\t * The number of searchable columns in the table.\n\t * @default 0\n\t * @type number | undefined\n\t */\n\tsearchableColumnCount?: number;\n\n\t/**\n\t * The number of filterable columns in the table.\n\t * @default 0\n\t * @type number | undefined\n\t */\n\tfilterableColumnCount?: number;\n\n\t/**\n\t * Flag to show the table view options.\n\t * @default undefined\n\t * @type boolean | undefined\n\t */\n\tshowViewOptions?: boolean;\n\n\t/**\n\t * The width of each cell in the table.\n\t * The length of the array should be equal to the columnCount.\n\t * Any valid CSS width value is accepted.\n\t * @default [\"auto\"]\n\t * @type string[] | undefined\n\t */\n\tcellWidths?: string[];\n\n\t/**\n\t * Flag to show the pagination bar.\n\t * @default true\n\t * @type boolean | undefined\n\t */\n\twithPagination?: boolean;\n\n\t/**\n\t * Flag to prevent the table cells from shrinking.\n\t * @default false\n\t * @type boolean | undefined\n\t */\n\tshrinkZero?: boolean;\n}\n\nexport function DataTableSkeleton(props: DataTableSkeletonProps) {\n\tconst {\n\t\tcolumnCount,\n\t\trowCount = 10,\n\t\tsearchableColumnCount = 0,\n\t\tfilterableColumnCount = 0,\n\t\tshowViewOptions = true,\n\t\tcellWidths = [\"auto\"],\n\t\twithPagination = true,\n\t\tshrinkZero = false,\n\t\tclassName,\n\t\t...skeletonProps\n\t} = props;\n\n\treturn (\n\t\t<div className={cn(\"w-full space-y-2.5 overflow-auto\", className)} {...skeletonProps}>\n\t\t\t<div className=\"flex w-full items-center justify-between space-x-2 overflow-auto p-1\">\n\t\t\t\t<div className=\"flex flex-1 items-center space-x-2\">\n\t\t\t\t\t{searchableColumnCount > 0\n\t\t\t\t\t\t? Array.from({ length: searchableColumnCount }).map((_, i) => (\n\t\t\t\t\t\t\t\t<Skeleton key={`${String(i)}`} className=\"h-7 w-40 lg:w-60\" />\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t: null}\n\t\t\t\t\t{filterableColumnCount > 0\n\t\t\t\t\t\t? Array.from({ length: filterableColumnCount }).map((_, i) => (\n\t\t\t\t\t\t\t\t<Skeleton key={`${String(i)}`} className=\"h-7 w-[4.5rem] border-dashed\" />\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t: null}\n\t\t\t\t</div>\n\t\t\t\t{showViewOptions ? <Skeleton className=\"ml-auto hidden h-7 w-[4.5rem] lg:flex\" /> : null}\n\t\t\t</div>\n\t\t\t<div className=\"rounded-md border\">\n\t\t\t\t<Table>\n\t\t\t\t\t<TableHeader>\n\t\t\t\t\t\t{Array.from({ length: 1 }).map((_, i) => (\n\t\t\t\t\t\t\t<TableRow key={`${String(i)}`} className=\"hover:bg-transparent\">\n\t\t\t\t\t\t\t\t{Array.from({ length: columnCount }).map((_, j) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={`${String(j)}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth: cellWidths[j],\n\t\t\t\t\t\t\t\t\t\t\tminWidth: shrinkZero ? cellWidths[j] : \"auto\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-6 w-full\" />\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{Array.from({ length: rowCount }).map((_, i) => (\n\t\t\t\t\t\t\t<TableRow key={`${String(i)}`} className=\"hover:bg-transparent\">\n\t\t\t\t\t\t\t\t{Array.from({ length: columnCount }).map((_, j) => (\n\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\tkey={`${String(j)}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth: cellWidths[j],\n\t\t\t\t\t\t\t\t\t\t\tminWidth: shrinkZero ? cellWidths[j] : \"auto\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-6 w-full\" />\n\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</div>\n\t\t\t{withPagination ? (\n\t\t\t\t<div className=\"flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8\">\n\t\t\t\t\t<Skeleton className=\"h-7 w-40 shrink-0\" />\n\t\t\t\t\t<div className=\"flex items-center gap-4 sm:gap-6 lg:gap-8\">\n\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t<Skeleton className=\"h-7 w-24\" />\n\t\t\t\t\t\t\t<Skeleton className=\"h-7 w-[4.5rem]\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex items-center justify-center text-sm font-medium\">\n\t\t\t\t\t\t\t<Skeleton className=\"h-7 w-20\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t<Skeleton className=\"hidden size-7 lg:block\" />\n\t\t\t\t\t\t\t<Skeleton className=\"size-7\" />\n\t\t\t\t\t\t\t<Skeleton className=\"size-7\" />\n\t\t\t\t\t\t\t<Skeleton className=\"hidden size-7 lg:block\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n","\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableStatusProps<TData, TEnum> {\n\ttable: Table<TData>;\n\tuniqueStatusValues: TEnum[];\n\trenderStatusMessage(status: TEnum): string;\n\tclassName?: string;\n}\n\nexport function DataTableStatus<TData, TEnum>({\n\ttable,\n\tuniqueStatusValues,\n\trenderStatusMessage,\n\tclassName,\n}: DataTableStatusProps<TData, TEnum>) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\n\tconst currentFilter = table.getColumn(\"status\")?.getFilterValue() as TEnum | undefined;\n\n\treturn (\n\t\t<Popover modal>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\taria-label=\"Filtre por status\"\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-input text-muted-foreground ring-offset-background placeholder:text-muted-foreground hover:text-muted-foreground focus:ring-ring flex h-10 w-full max-w-60 items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm hover:bg-inherit focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{currentFilter ? renderStatusMessage(currentFilter) : \"Todos os status\"}\n\t\t\t\t\t<ChevronDownIcon className=\"h-4 w-4\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent\n\t\t\t\talign=\"end\"\n\t\t\t\tclassName=\"w-44 p-0\"\n\t\t\t\tonCloseAutoFocus={() => triggerRef.current?.focus()}\n\t\t\t>\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Pesquisar status...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>Nenhum status encontrado.</CommandEmpty>\n\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\tkey=\"all\"\n\t\t\t\t\t\t\tonSelect={() => table.getColumn(\"status\")?.setFilterValue(undefined)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"truncate\">Todos os status</span>\n\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t{uniqueStatusValues.map((item) => {\n\t\t\t\t\t\t\tif (!item) return null;\n\n\t\t\t\t\t\t\tconst statusMessage = renderStatusMessage(item as TEnum);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={`${String(item)}`}\n\t\t\t\t\t\t\t\t\tonSelect={() => table.getColumn(\"status\")?.setFilterValue(item)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{statusMessage}</span>\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n","\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { Check, ChevronDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableViewOptionsProps<TData> {\n\ttable: Table<TData>;\n\ttransformColumnName?: (id: string) => string;\n\tdisabled?: boolean;\n}\n\nexport function DataTableViewOptions<TData>({\n\ttable,\n\ttransformColumnName,\n\tdisabled,\n}: DataTableViewOptionsProps<TData>) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\n\treturn (\n\t\t<Popover modal>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\taria-label=\"Toggle columns\"\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName=\"text-muted-foreground hover:text-muted-foreground w-full max-w-[12.5rem] items-center justify-between bg-inherit px-3 py-2 hover:bg-inherit\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\tColunas\n\t\t\t\t\t<ChevronDownIcon className=\"h-4 w-4\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent\n\t\t\t\talign=\"end\"\n\t\t\t\tclassName=\"w-44 p-0\"\n\t\t\t\tonCloseAutoFocus={() => triggerRef.current?.focus()}\n\t\t\t>\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Pesquisar colunas...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>Nenhuma coluna encontrada.</CommandEmpty>\n\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t{table\n\t\t\t\t\t\t\t\t.getAllColumns()\n\t\t\t\t\t\t\t\t.filter((column) => typeof column.accessorFn !== \"undefined\" && column.getCanHide())\n\t\t\t\t\t\t\t\t.map((column) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\t\t\tkey={column.id}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => column.toggleVisibility(!column.getIsVisible())}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"truncate\">\n\t\t\t\t\t\t\t\t\t\t\t\t{transformColumnName ? transformColumnName(column.id) : column.id}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ml-auto size-4 shrink-0\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolumn.getIsVisible() ? \"opacity-100\" : \"opacity-0\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n"],"names":["__iconNode","flexRender","Comp","props","isReactComponent","React","createElement","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","DataTablePagination","table","pageSizeOptions","dataLabel","infoExtraLabel","showPaginationControls","showDataLabel","footerAction","maxVisualRows","pageSize","currentPage","getState","pagination","pageIndex","rowCount","getRowCount","totalPageCount","Math","ceil","renderPageNumbers","items","maxVisiblePages","i","push","Button","variant","key","onClick","setPageIndex","className","start","max","min","end","PaginationItem","PaginationEllipsis","div","p","getRowModel","rows","length","toLocaleString","Select","value","String","onValueChange","setPageSize","Number","SelectTrigger","SelectValue","placeholder","SelectContent","SelectItem","map","previousPage","disabled","getCanPreviousPage","aria-label","ChevronLeftIcon","nextPage","getCanNextPage","ChevronRightIcon","DataTablePaginationSkeleton","Skeleton","cn","DataTableRowSkeleton","columnCount","cellWidths","shrinkZero","Array","from","_","TableRow","j","TableCell","style","width","minWidth","DataTableMainFrame","columns","isLoadingTable","loadingContent","setQueryParams","actionColumns","messageEmpty","dividingColumnKey","scrollMaxHeightClass","isScrollable","fixedHeader","showPagination","renderTooltip","renderSubComponent","toString","sorting","useEffect","sortingParams","sortingBy","order","id","desc","prev","page","renderTableBodyContent","getAllColum