ai-design-system 0.1.22 → 0.1.24

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -5,6 +5,7 @@ import {
   type FormReportsEntity,
   type FormReportsRowAction,
   type FormReportsTableHandlers,
+  type DashboardPaginationState,
 } from "@/components/composites/FormReports"
 
 export interface FormReportsSectionProps {
@@ -13,6 +14,7 @@ export interface FormReportsSectionProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
   tableHandlers?: FormReportsTableHandlers
   tableLeftActions?: React.ReactNode
 }
@@ -24,6 +26,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     items,
     columns,
     rowActions,
+    pagination,
     tableHandlers,
     tableLeftActions,
   }) => {
@@ -33,6 +36,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
           items={items}
           columns={columns}
           rowActions={rowActions}
+          pagination={pagination}
           handlers={tableHandlers}
           leftActions={tableLeftActions}
           onCreateClick={onCreateClick}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -26,11 +26,11 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     const transformedSections = sections.map(section => ({
       ...section,
       content: (
-        <div className="h-full min-h-0 flex flex-col">
+        <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1">
+          <div className="min-h-0 flex-1 overflow-auto">
             {section.content}
           </div>
         </div>

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -37,6 +37,7 @@ import { DragHandleCell } from "./DragHandleCell"
 import { DraggableRow } from "./DraggableRow"
 import { createTableSelectColumn } from "./TableSelectColumn"
 import type {
+  DashboardPaginationState,
   DashboardRow,
   DashboardRowAction,
   DashboardTableActionHandlers,
@@ -46,6 +47,7 @@ import { useEnhancedDataTable } from "./useEnhancedDataTable"
 export interface EnhancedDataTableProps {
   data: DashboardRow[]
   tableSchema: DynamicTableSchema
+  pagination?: DashboardPaginationState
   className?: string
   handlers?: DashboardTableActionHandlers
   leftActions?: React.ReactNode
@@ -86,6 +88,7 @@ function toNumberValue(value: unknown): number {
 export function EnhancedDataTable({
   data: initialData,
   tableSchema,
+  pagination,
   className,
   handlers,
   leftActions,
@@ -384,8 +387,30 @@ export function EnhancedDataTable({
     data: filteredData,
     columns,
     onReorder: (rows) => handlers?.onRowReorder?.(rows),
+    serverPagination: pagination,
   })
 
+  const totalPages = React.useMemo(() => {
+    if (!pagination) {
+      return table.getPageCount()
+    }
+    const safePageSize = Math.max(1, pagination.pageSize)
+    return Math.max(1, Math.ceil(Math.max(0, pagination.totalItems) / safePageSize))
+  }, [pagination, table])
+
+  const currentPageIndex = pagination ? pagination.pageIndex : table.getState().pagination.pageIndex
+  const currentPageSize = pagination ? pagination.pageSize : table.getState().pagination.pageSize
+  const canPreviousPage = currentPageIndex > 0
+  const canNextPage = currentPageIndex < totalPages - 1
+
+  React.useEffect(() => {
+    if (!pagination) {
+      return
+    }
+    table.setPageIndex(pagination.pageIndex)
+    table.setPageSize(pagination.pageSize)
+  }, [pagination, table])
+
   React.useEffect(() => {
     if (version > 0) {
       table.resetRowSelection(false)
@@ -528,16 +553,16 @@ export function EnhancedDataTable({
                 Rows per page
               </Label>
               <Select
-                value={`${table.getState().pagination.pageSize}`}
+                value={`${currentPageSize}`}
                 onValueChange={(value) => {
                   const pageSize = Number(value)
                   table.setPageSize(pageSize)
                   handlers?.onPageSizeChange?.(pageSize)
-                  emitPaginationChange(table.getState().pagination.pageIndex, pageSize)
+                  emitPaginationChange(0, pageSize)
                 }}
               >
                 <SelectTrigger className="w-20" id="rows-per-page">
-                  <SelectValue placeholder={table.getState().pagination.pageSize} />
+                  <SelectValue placeholder={currentPageSize} />
                 </SelectTrigger>
                 <SelectContent side="top">
                   {[10, 20, 30, 40, 50].map((pageSize) => (
@@ -549,7 +574,7 @@ export function EnhancedDataTable({
               </Select>
             </div>
             <div className="flex w-fit items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+              Page {currentPageIndex + 1} of {totalPages}
             </div>
             <div className="ml-auto flex items-center gap-2 lg:ml-0">
               <Button
@@ -558,9 +583,9 @@ export function EnhancedDataTable({
                 onClick={() => {
                   table.setPageIndex(0)
                   handlers?.onPageChange?.(0)
-                  emitPaginationChange(0, table.getState().pagination.pageSize)
+                  emitPaginationChange(0, currentPageSize)
                 }}
-                disabled={!table.getCanPreviousPage()}
+                disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to first page</span>
                 <ChevronsLeft className="size-4" />
@@ -569,12 +594,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="size-8 p-0"
                 onClick={() => {
-                  table.previousPage()
-                  const nextIndex = Math.max(0, table.getState().pagination.pageIndex - 1)
+                  const nextIndex = Math.max(0, currentPageIndex - 1)
+                  table.setPageIndex(nextIndex)
                   handlers?.onPageChange?.(nextIndex)
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize)
+                  emitPaginationChange(nextIndex, currentPageSize)
                 }}
-                disabled={!table.getCanPreviousPage()}
+                disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to previous page</span>
                 <ChevronLeft className="size-4" />
@@ -583,12 +608,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="size-8 p-0"
                 onClick={() => {
-                  table.nextPage()
-                  const nextIndex = Math.min(table.getPageCount() - 1, table.getState().pagination.pageIndex + 1)
+                  const nextIndex = Math.min(totalPages - 1, currentPageIndex + 1)
+                  table.setPageIndex(nextIndex)
                   handlers?.onPageChange?.(nextIndex)
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize)
+                  emitPaginationChange(nextIndex, currentPageSize)
                 }}
-                disabled={!table.getCanNextPage()}
+                disabled={!canNextPage}
               >
                 <span className="sr-only">Go to next page</span>
                 <ChevronRight className="size-4" />
@@ -597,12 +622,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="hidden size-8 p-0 lg:flex"
                 onClick={() => {
-                  const lastPage = Math.max(0, table.getPageCount() - 1)
+                  const lastPage = Math.max(0, totalPages - 1)
                   table.setPageIndex(lastPage)
                   handlers?.onPageChange?.(lastPage)
-                  emitPaginationChange(lastPage, table.getState().pagination.pageSize)
+                  emitPaginationChange(lastPage, currentPageSize)
                 }}
-                disabled={!table.getCanNextPage()}
+                disabled={!canNextPage}
               >
                 <span className="sr-only">Go to last page</span>
                 <ChevronsRight className="size-4" />

package/components/composites/DataTable/index.ts

@@ -20,6 +20,7 @@ export type { UseEnhancedDataTableOptions } from './useEnhancedDataTable'
 export { dashboardRowSchema } from './table-types'
 export type {
 	DashboardInlineEditableField,
+	DashboardPaginationState,
 	DashboardRow,
 	DashboardRowAction,
 	DashboardTableActionHandlers,

package/components/composites/DataTable/table-types.ts

@@ -10,6 +10,12 @@ export type DashboardInlineEditableField = "target" | "limit"
 
 export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete"
 
+export interface DashboardPaginationState {
+  pageIndex: number
+  pageSize: number
+  totalItems: number
+}
+
 export interface DashboardTableActionHandlers {
   onCreateClick?: () => void
   onAddSection?: () => void

package/components/composites/DataTable/useEnhancedDataTable.ts

@@ -16,27 +16,44 @@ import { arrayMove, type UniqueIdentifier } from "@dnd-kit/sortable"
 
 import type { DashboardRow } from "./table-types"
 
+export interface ServerPaginationOptions {
+  pageIndex: number
+  pageSize: number
+  totalItems: number
+}
+
 export interface UseEnhancedDataTableOptions {
   data: DashboardRow[]
   columns: ColumnDef<DashboardRow>[]
   onReorder?: (rows: DashboardRow[]) => void
+  serverPagination?: ServerPaginationOptions
 }
 
-export function useEnhancedDataTable({ data: initialData, columns, onReorder }: UseEnhancedDataTableOptions) {
+export function useEnhancedDataTable({ data: initialData, columns, onReorder, serverPagination }: UseEnhancedDataTableOptions) {
   const [data, setData] = React.useState<DashboardRow[]>(() => initialData)
   const [rowSelection, setRowSelection] = React.useState({})
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 10,
+    pageIndex: serverPagination?.pageIndex ?? 0,
+    pageSize: serverPagination?.pageSize ?? 10,
   })
 
   React.useEffect(() => {
     setData(initialData)
   }, [initialData])
 
+  React.useEffect(() => {
+    if (!serverPagination) {
+      return
+    }
+    setPagination({
+      pageIndex: serverPagination.pageIndex,
+      pageSize: serverPagination.pageSize,
+    })
+  }, [serverPagination])
+
   const dataIds = React.useMemo<UniqueIdentifier[]>(() => data.map((item) => item.id), [data])
 
   const table = useReactTable({
@@ -56,9 +73,13 @@ export function useEnhancedDataTable({ data: initialData, columns, onReorder }:
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: setPagination,
+    manualPagination: Boolean(serverPagination),
+    pageCount: serverPagination
+      ? Math.max(1, Math.ceil(serverPagination.totalItems / Math.max(1, serverPagination.pageSize)))
+      : undefined,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    getPaginationRowModel: serverPagination ? undefined : getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),

package/components/composites/FormReports/FormReportsTable.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import {
   EnhancedDataTable,
+  type DashboardPaginationState,
   type DashboardRow,
   type DashboardRowAction,
   type DashboardTableActionHandlers,
@@ -43,6 +44,7 @@ export interface FormReportsTableProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
   handlers?: FormReportsTableHandlers
   leftActions?: React.ReactNode
   rightActions?: React.ReactNode
@@ -57,8 +59,10 @@ const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
   delete: "delete",
 }
 
+export type { DashboardPaginationState }
+
 export const FormReportsTable = React.memo<FormReportsTableProps>(
-  ({ items, columns, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
+  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
     const { rows, originalById, tableSchema } = React.useMemo(() => {
       const byId = new Map<string, FormReportsEntity>()
       const tableColumns: DynamicTableSchema["columns"] = columns
@@ -168,6 +172,7 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
       <EnhancedDataTable
         data={rows}
         tableSchema={tableSchema}
+        pagination={pagination}
         handlers={adaptedHandlers}
         leftActions={leftActions}
         rightActions={rightActions}

package/components/composites/FormReports/index.ts

@@ -16,6 +16,7 @@ export {
 } from "./FormReportsTable"
 
 export type {
+  DashboardPaginationState,
   FormReportsColumn,
   FormReportsEntity,
   FormReportsRowAction,

package/components/features/FormReportsFeature/FormReportsFeature.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 
 import {
   FormReportsDrawerForm,
+  type DashboardPaginationState,
   type FormReportsColumn,
   type FormReportsEntity,
   type FormReportsFieldDefinition,
@@ -18,6 +19,7 @@ export interface FormReportsFeatureProps {
   fields: FormReportsFieldDefinition[]
   columns: FormReportsColumn[]
   items: FormReportsEntity[]
+  pagination?: DashboardPaginationState
   rowActions?: FormReportsRowAction[]
   actionHandlers?: FormReportsFeatureActionHandlers
   createButtonLabel?: string
@@ -39,6 +41,7 @@ export const FormReportsFeature = React.memo<FormReportsFeatureProps>(
     fields,
     columns,
     items,
+    pagination,
     rowActions,
     actionHandlers,
     createButtonLabel = "Create",
@@ -105,6 +108,7 @@ export const FormReportsFeature = React.memo<FormReportsFeatureProps>(
           createButtonLabel={createButtonLabel}
           items={items}
           columns={columns}
+          pagination={pagination}
           rowActions={rowActions}
           tableHandlers={actionHandlers?.table}
         />

package/components/features/FormReportsFeature/useFormReportsFeature.d.ts

@@ -1,4 +1,5 @@
 import type {
+  DashboardPaginationState,
   FormReportsColumn,
   FormReportsEntity,
   FormReportsFieldDefinition,
@@ -24,6 +25,7 @@ export interface UseFormReportsFeatureReturn {
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
   items: FormReportsEntity[]
+  pagination?: DashboardPaginationState
   actionHandlers?: FormReportsFeatureActionHandlers
   createButtonLabel?: string
 }

package/components/features/PageLayout/PageLayout.tsx

@@ -136,7 +136,7 @@ export const PageLayout = React.memo<PageLayoutProps>(
         <AppSidebar {...sidebar} />
         <PageContainer className={`overflow-hidden ${className ?? ""}`}>
           <AppHeader {...header} />
-          <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+          <div className={`min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`}>
             {contentArea}
           </div>
         </PageContainer>

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.tsx

@@ -65,7 +65,7 @@ function buildObservabilitySections({
   return [
     {
       ...traceSection,
-      defaultSize: 70,
+      defaultSize: 66.67,
       minSize: 55,
     },
     {
@@ -80,7 +80,7 @@ function buildObservabilitySections({
           spans={spans}
         />
       ),
-      defaultSize: 30,
+      defaultSize: 33.33,
       minSize: 25,
     },
   ]

package/dist/index.cjs

@@ -6985,19 +6985,29 @@ function createTableSelectColumn() {
     enableHiding: false
   };
 }
-function useEnhancedDataTable({ data: initialData, columns, onReorder }) {
+function useEnhancedDataTable({ data: initialData, columns, onReorder, serverPagination }) {
+  var _a, _b;
   const [data, setData] = React33__namespace.useState(() => initialData);
   const [rowSelection, setRowSelection] = React33__namespace.useState({});
   const [columnVisibility, setColumnVisibility] = React33__namespace.useState({});
   const [columnFilters, setColumnFilters] = React33__namespace.useState([]);
   const [sorting, setSorting] = React33__namespace.useState([]);
   const [pagination, setPagination] = React33__namespace.useState({
-    pageIndex: 0,
-    pageSize: 10
+    pageIndex: (_a = serverPagination == null ? void 0 : serverPagination.pageIndex) != null ? _a : 0,
+    pageSize: (_b = serverPagination == null ? void 0 : serverPagination.pageSize) != null ? _b : 10
   });
   React33__namespace.useEffect(() => {
     setData(initialData);
   }, [initialData]);
+  React33__namespace.useEffect(() => {
+    if (!serverPagination) {
+      return;
+    }
+    setPagination({
+      pageIndex: serverPagination.pageIndex,
+      pageSize: serverPagination.pageSize
+    });
+  }, [serverPagination]);
   const dataIds = React33__namespace.useMemo(() => data.map((item) => item.id), [data]);
   const table = reactTable.useReactTable({
     data,
@@ -7016,9 +7026,11 @@ function useEnhancedDataTable({ data: initialData, columns, onReorder }) {
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: setPagination,
+    manualPagination: Boolean(serverPagination),
+    pageCount: serverPagination ? Math.max(1, Math.ceil(serverPagination.totalItems / Math.max(1, serverPagination.pageSize))) : void 0,
     getCoreRowModel: reactTable.getCoreRowModel(),
     getFilteredRowModel: reactTable.getFilteredRowModel(),
-    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getPaginationRowModel: serverPagination ? void 0 : reactTable.getPaginationRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     getFacetedRowModel: reactTable.getFacetedRowModel(),
     getFacetedUniqueValues: reactTable.getFacetedUniqueValues()
@@ -7082,6 +7094,7 @@ function toNumberValue(value) {
 function EnhancedDataTable({
   data: initialData,
   tableSchema,
+  pagination,
   className,
   handlers,
   leftActions,
@@ -7346,8 +7359,27 @@ function EnhancedDataTable({
     onReorder: (rows) => {
       var _a2;
       return (_a2 = handlers == null ? void 0 : handlers.onRowReorder) == null ? void 0 : _a2.call(handlers, rows);
-    }
+    },
+    serverPagination: pagination
   });
+  const totalPages = React33__namespace.useMemo(() => {
+    if (!pagination) {
+      return table.getPageCount();
+    }
+    const safePageSize = Math.max(1, pagination.pageSize);
+    return Math.max(1, Math.ceil(Math.max(0, pagination.totalItems) / safePageSize));
+  }, [pagination, table]);
+  const currentPageIndex = pagination ? pagination.pageIndex : table.getState().pagination.pageIndex;
+  const currentPageSize = pagination ? pagination.pageSize : table.getState().pagination.pageSize;
+  const canPreviousPage = currentPageIndex > 0;
+  const canNextPage = currentPageIndex < totalPages - 1;
+  React33__namespace.useEffect(() => {
+    if (!pagination) {
+      return;
+    }
+    table.setPageIndex(pagination.pageIndex);
+    table.setPageSize(pagination.pageSize);
+  }, [pagination, table]);
   React33__namespace.useEffect(() => {
     if (version > 0) {
       table.resetRowSelection(false);
@@ -7455,16 +7487,16 @@ function EnhancedDataTable({
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select2,
               {
-                value: `${table.getState().pagination.pageSize}`,
+                value: `${currentPageSize}`,
                 onValueChange: (value) => {
                   var _a2;
                   const pageSize = Number(value);
                   table.setPageSize(pageSize);
                   (_a2 = handlers == null ? void 0 : handlers.onPageSizeChange) == null ? void 0 : _a2.call(handlers, pageSize);
-                  emitPaginationChange(table.getState().pagination.pageIndex, pageSize);
+                  emitPaginationChange(0, pageSize);
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger2, { className: "w-20", id: "rows-per-page", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: table.getState().pagination.pageSize }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger2, { className: "w-20", id: "rows-per-page", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: currentPageSize }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(SelectContent2, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: `${pageSize}`, children: pageSize }, pageSize)) })
                 ]
               }
@@ -7472,9 +7504,9 @@ function EnhancedDataTable({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-fit items-center justify-center text-sm font-medium", children: [
             "Page ",
-            table.getState().pagination.pageIndex + 1,
+            currentPageIndex + 1,
             " of ",
-            table.getPageCount()
+            totalPages
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 lg:ml-0", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7486,9 +7518,9 @@ function EnhancedDataTable({
                   var _a2;
                   table.setPageIndex(0);
                   (_a2 = handlers == null ? void 0 : handlers.onPageChange) == null ? void 0 : _a2.call(handlers, 0);
-                  emitPaginationChange(0, table.getState().pagination.pageSize);
+                  emitPaginationChange(0, currentPageSize);
                 },
-                disabled: !table.getCanPreviousPage(),
+                disabled: !canPreviousPage,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to first page" }),
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "size-4" })
@@ -7502,12 +7534,12 @@ function EnhancedDataTable({
                 className: "size-8 p-0",
                 onClick: () => {
                   var _a2;
-                  table.previousPage();
-                  const nextIndex = Math.max(0, table.getState().pagination.pageIndex - 1);
+                  const nextIndex = Math.max(0, currentPageIndex - 1);
+                  table.setPageIndex(nextIndex);
                   (_a2 = handlers == null ? void 0 : handlers.onPageChange) == null ? void 0 : _a2.call(handlers, nextIndex);
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize);
+                  emitPaginationChange(nextIndex, currentPageSize);
                 },
-                disabled: !table.getCanPreviousPage(),
+                disabled: !canPreviousPage,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to previous page" }),
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
@@ -7521,12 +7553,12 @@ function EnhancedDataTable({
                 className: "size-8 p-0",
                 onClick: () => {
                   var _a2;
-                  table.nextPage();
-                  const nextIndex = Math.min(table.getPageCount() - 1, table.getState().pagination.pageIndex + 1);
+                  const nextIndex = Math.min(totalPages - 1, currentPageIndex + 1);
+                  table.setPageIndex(nextIndex);
                   (_a2 = handlers == null ? void 0 : handlers.onPageChange) == null ? void 0 : _a2.call(handlers, nextIndex);
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize);
+                  emitPaginationChange(nextIndex, currentPageSize);
                 },
-                disabled: !table.getCanNextPage(),
+                disabled: !canNextPage,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to next page" }),
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
@@ -7540,12 +7572,12 @@ function EnhancedDataTable({
                 className: "hidden size-8 p-0 lg:flex",
                 onClick: () => {
                   var _a2;
-                  const lastPage = Math.max(0, table.getPageCount() - 1);
+                  const lastPage = Math.max(0, totalPages - 1);
                   table.setPageIndex(lastPage);
                   (_a2 = handlers == null ? void 0 : handlers.onPageChange) == null ? void 0 : _a2.call(handlers, lastPage);
-                  emitPaginationChange(lastPage, table.getState().pagination.pageSize);
+                  emitPaginationChange(lastPage, currentPageSize);
                 },
-                disabled: !table.getCanNextPage(),
+                disabled: !canNextPage,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Go to last page" }),
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "size-4" })
@@ -7703,7 +7735,7 @@ var dashboardToFormReportsActionMap = {
   delete: "delete"
 };
 var FormReportsTable = React33__namespace.memo(
-  ({ items, columns, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
+  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
     const { rows, originalById, tableSchema } = React33__namespace.useMemo(() => {
       const byId = /* @__PURE__ */ new Map();
       const tableColumns = columns;
@@ -7834,6 +7866,7 @@ var FormReportsTable = React33__namespace.memo(
       {
         data: rows,
         tableSchema,
+        pagination,
         handlers: adaptedHandlers,
         leftActions,
         rightActions,
@@ -9101,9 +9134,9 @@ var SectionLayout = React33__namespace.memo(
       "className"
     ]);
     const transformedSections = sections.map((section) => __spreadProps(__spreadValues({}, section), {
-      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col", children: [
+      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col overflow-hidden", children: [
         section.header && /* @__PURE__ */ jsxRuntime.jsx(AppHeader, __spreadValues({}, section.header)),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: section.content })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: section.content })
       ] })
     }));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9616,6 +9649,7 @@ var FormReportsSection = React33__namespace.memo(
     items,
     columns,
     rowActions,
+    pagination,
     tableHandlers,
     tableLeftActions
   }) => {
@@ -9625,6 +9659,7 @@ var FormReportsSection = React33__namespace.memo(
         items,
         columns,
         rowActions,
+        pagination,
         handlers: tableHandlers,
         leftActions: tableLeftActions,
         onCreateClick,
@@ -9668,7 +9703,7 @@ var PageLayout = React33__namespace.memo(
           /* @__PURE__ */ jsxRuntime.jsx(AppSidebar, __spreadValues({}, sidebar)),
           /* @__PURE__ */ jsxRuntime.jsxs(PageContainer, { className: `overflow-hidden ${className != null ? className : ""}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx(AppHeader, __spreadValues({}, header)),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden", children: contentArea })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`, children: contentArea })
           ] })
         ]
       }
@@ -10201,6 +10236,7 @@ var FormReportsFeature = React33__namespace.memo(
     fields,
     columns,
     items,
+    pagination,
     rowActions,
     actionHandlers,
     createButtonLabel = "Create",
@@ -10266,6 +10302,7 @@ var FormReportsFeature = React33__namespace.memo(
           createButtonLabel,
           items,
           columns,
+          pagination,
           rowActions,
           tableHandlers: actionHandlers == null ? void 0 : actionHandlers.table
         }
@@ -10471,7 +10508,7 @@ function buildObservabilitySections({
   }
   return [
     __spreadProps(__spreadValues({}, traceSection), {
-      defaultSize: 70,
+      defaultSize: 66.67,
       minSize: 55
     }),
     {
@@ -10487,7 +10524,7 @@ function buildObservabilitySections({
           spans
         }
       ),
-      defaultSize: 30,
+      defaultSize: 33.33,
       minSize: 25
     }
   ];