@nubitio/crud 0.5.22 → 0.5.24

package/dist/index.cjs

@@ -2731,6 +2731,10 @@ const NativeDataGridView = (0, react.forwardRef)((options, ref) => {
 							})
 						]
 					}),
+					options.aboveGrid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "nb-datagrid__above-grid",
+						children: options.aboveGrid
+					}) : null,
 					isMobile && quickSearchField && (options.filterRow ?? true) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "nb-datagrid__quick-search",
 						children: [
@@ -5300,7 +5304,11 @@ function usePermissions(resource, supportedOperations = []) {
 			canExport: resolve(p?.canExport, false),
 			canBulkDelete: resolve(p?.canBulkDelete, false)
 		};
-	}, [resource.id, opsKey]);
+	}, [
+		resource.id,
+		opsKey,
+		resource.permissions
+	]);
 }
 //#endregion
 //#region packages/crud/crud/useSelectionState.ts
@@ -6149,7 +6157,7 @@ function buildRoutingFilterRules(fields, initialFilters) {
 * Public export — wraps CrudPageInner in its own DialogStoreProvider so that
 * existing pages do not need to add a provider themselves.
 */
-const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, onOperationChange }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStoreProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudPageInner, {
+const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid, onOperationChange }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStoreProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudPageInner, {
 	resource,
 	onFormDataChange,
 	initialRecordId,
@@ -6162,9 +6170,10 @@ const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, c
 	editDisabled,
 	deleteDisabled,
 	gridRef,
+	aboveGrid,
 	onOperationChange
 }) });
-const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, onOperationChange }) => {
+const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, aboveGrid: aboveGridOverride, onOperationChange }) => {
 	const { t } = (0, _nubitio_core.useCoreTranslation)();
 	const { events, resource: resolvedResource, fields, formFields, formRef, permissions, selectionState, presetState } = useCrudPage((0, react.useMemo)(() => resolveCrudResource(resource), [resource]), externalFormRef);
 	const datagridFields = (0, react.useMemo)(() => fields.filter((field) => field.isIdentity || field.visible !== false), [fields]);
@@ -6427,6 +6436,16 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		resolvedResource.rowActions,
 		t
 	]);
+	const aboveGridSlot = aboveGridOverride ?? resolvedResource.aboveGrid;
+	const aboveGridContent = (() => {
+		if (!aboveGridSlot) return;
+		if (typeof aboveGridSlot === "function") return aboveGridSlot({
+			resource: resolvedResource,
+			gridRef,
+			refresh: () => gridRef.current?.refresh()
+		});
+		return aboveGridSlot;
+	})();
 	/** Preset selector rendered as a toolbar slot via `beforeToolbar`. */
 	const renderPresetSelector = hasPresets ? () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnPresetSelector, {
 		resourceId: resolvedResource.id,
@@ -6489,6 +6508,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				editMode: resolvedResource.editMode,
 				visibleColumns: presetState.visibleColumns,
 				beforeToolbar: renderPresetSelector,
+				aboveGrid: aboveGridContent,
 				detailUrl: gridDetail?.url,
 				detailFields: gridDetail?.fields,
 				onFilterChange: onFiltersChange,
@@ -7610,7 +7630,7 @@ function formatRuntimeErrorMessage(error) {
 *
 * URL deep-linking is wired via `initialRecordId` / `initialIsNew` props on CrudPage.
 */
-function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef }) {
+function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid }) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const internalGridRef = (0, react.useRef)(null);
 	const effectiveGridRef = gridRef ?? internalGridRef;
@@ -7695,6 +7715,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		editDisabled,
 		deleteDisabled,
 		gridRef: effectiveGridRef,
+		aboveGrid: aboveGrid ?? resource.aboveGrid,
 		onOperationChange: (operation) => {
 			if (operation === "create") {
 				startCreate();

package/dist/index.d.cts

@@ -3,6 +3,28 @@ import { CoreHttpClient, DataGridEventNames, DataRecord, DataRecord as DataRecor
 import { AppDropdownOption } from "@nubitio/ui";
 import { WorkflowSchema } from "@nubitio/hydra";
 
+//#region packages/crud/field/FilterRule.d.ts
+interface FilterRule {
+  field: string;
+  operator: string;
+  value: string | number | boolean;
+}
+//#endregion
+//#region packages/crud/datagrid/GridHandle.d.ts
+interface GridHandle {
+  showLoading: (message?: string) => void;
+  hideLoading: () => void;
+  refresh: () => void;
+  reset: () => void;
+  loadData: () => Promise<unknown>;
+  getSelectedRowKey: () => string | number | undefined;
+  getSelectedRow: () => DataRecord$1 | undefined;
+  getSelectedRowKeys: () => unknown[];
+  getSelectedRows: () => DataRecord$1[];
+  getFilter: () => unknown[];
+  filter: (filterRule: FilterRule | null) => void;
+}
+//#endregion
 //#region packages/crud/field/FieldType.d.ts
 declare enum FieldType {
   NONE = "none",
@@ -24,13 +46,6 @@ declare enum FieldType {
   HTML = "html"
 }
 //#endregion
-//#region packages/crud/field/FilterRule.d.ts
-interface FilterRule {
-  field: string;
-  operator: string;
-  value: string | number | boolean;
-}
-//#endregion
 //#region packages/crud/field/ValidationRule.d.ts
 type RequiredRule = {
   type: 'required';
@@ -442,21 +457,6 @@ interface FormHandle {
   setIsEdit: (value: boolean) => void;
 }
 //#endregion
-//#region packages/crud/datagrid/GridHandle.d.ts
-interface GridHandle {
-  showLoading: (message?: string) => void;
-  hideLoading: () => void;
-  refresh: () => void;
-  reset: () => void;
-  loadData: () => Promise<unknown>;
-  getSelectedRowKey: () => string | number | undefined;
-  getSelectedRow: () => DataRecord$1 | undefined;
-  getSelectedRowKeys: () => unknown[];
-  getSelectedRows: () => DataRecord$1[];
-  getFilter: () => unknown[];
-  filter: (filterRule: FilterRule | null) => void;
-}
-//#endregion
 //#region packages/crud/form/FormLayout.d.ts
 interface FormTab {
   label: string;
@@ -824,6 +824,12 @@ interface ResourceToolbarContext<T extends DataRecord$1 = DataRecord$1> {
   events: FormEventNames;
   emit: <P>(name: string, payload?: P) => void;
 }
+/** Context passed to `aboveGrid` slot renderers on SmartCrudPage / CrudPage. */
+interface CrudGridSlotContext<T extends DataRecord$1 = DataRecord$1> {
+  resource: ResourceConfig<T>;
+  gridRef: RefObject<GridHandle | null>;
+  refresh: () => void;
+}
 type ResourceToolbar<T extends DataRecord$1 = DataRecord$1> = ResourceToolbarItems | ((context: ResourceToolbarContext<T>) => ResourceToolbarItems);
 interface ResourceGridDetail {
   url: string;
@@ -944,6 +950,11 @@ interface ResourceConfig<T extends DataRecord$1 = DataRecord$1> {
   viewMode?: CrudViewMode | CrudViewModeConfig;
   format?: 'json' | 'multipart';
   toolbar?: ResourceToolbar<T>;
+  /**
+   * Custom UI between the grid toolbar and the table — KPI cards, quota banners,
+   * contextual filters. Static node or render function with grid helpers.
+   */
+  aboveGrid?: ReactNode | ((context: CrudGridSlotContext<T>) => ReactNode);
   rowActions?: ResourceRowActions<T>;
   onSaveSuccess?: (response: T) => void;
   onSaveError?: (error?: unknown) => void;
@@ -1065,6 +1076,8 @@ interface CrudPageProps<T extends DataRecord$1 = DataRecord$1> {
   /** External ref forwarded to the DataGridView — allows the parent to call
    *  showLoading / hideLoading / refresh / getSelectedRow imperatively. */
   gridRef?: React.RefObject<GridHandle | null>;
+  /** Overrides `resource.aboveGrid` — KPI cards, banners, etc. */
+  aboveGrid?: ResourceConfig<T>['aboveGrid'];
   onOperationChange?: (operation: SmartCrudOperation | null) => void;
 }
 /**
@@ -1084,6 +1097,7 @@ declare const CrudPage: <T extends DataRecord$1 = DataRecord$1>({
   editDisabled,
   deleteDisabled,
   gridRef,
+  aboveGrid,
   onOperationChange
 }: CrudPageProps<T>) => React.JSX.Element;
 //#endregion
@@ -1135,6 +1149,8 @@ interface SmartCrudPageProps<T extends DataRecord$1 = DataRecord$1> {
   /** External ref forwarded to the DataGridView — allows the parent to call
    *  showLoading / hideLoading / refresh / getSelectedRow imperatively. */
   gridRef?: RefObject<GridHandle | null>;
+  /** Custom UI above the grid table — KPI cards, banners. Overrides `resource.aboveGrid`. */
+  aboveGrid?: ResourceConfig<T>['aboveGrid'];
 }
 /**
  * SmartCrudPage — wraps CrudPage with Hydra auto-discovery and declarative rules.
@@ -1164,7 +1180,8 @@ declare function SmartCrudPage<T extends DataRecord$1 = DataRecord$1>({
   onSelectionChanged,
   editDisabled,
   deleteDisabled,
-  gridRef
+  gridRef,
+  aboveGrid
 }: SmartCrudPageProps<T>): React.JSX.Element;
 //#endregion
 //#region packages/crud/crud/SmartCrudRolesContext.d.ts
@@ -1578,6 +1595,8 @@ interface DataGridViewOptions {
   headerFilter?: boolean;
   manualLoad?: boolean;
   beforeToolbar?: () => ReactNode;
+  /** Custom content between the toolbar and the table (KPI cards, banners, filters). */
+  aboveGrid?: ReactNode;
   errorMessage?: string | null;
   onDismissError?: () => void;
   editMode?: 'popup' | 'row' | 'cell' | 'batch';
@@ -2016,4 +2035,4 @@ interface RestQueryDialect {
  */
 declare function createRestResourceStore(dialect?: RestQueryDialect): ResourceStoreFactory;
 //#endregion
-export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type RestQueryDialect, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, buildWorkflowRowActions, checkboxField, computeSummaryValue, createCrudEvents, createRestResourceStore, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, embeddedLinesUrl, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };
+export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, type CrudGridSlotContext, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type RestQueryDialect, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, buildWorkflowRowActions, checkboxField, computeSummaryValue, createCrudEvents, createRestResourceStore, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, embeddedLinesUrl, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };

package/dist/index.d.mts

@@ -3,6 +3,28 @@ import { AppDropdownOption } from "@nubitio/ui";
 import { CoreHttpClient, DataGridEventNames, DataRecord, DataRecord as DataRecord$1, DialogEventNames, FormEventNames, GridData, GridData as GridData$1, createCrudEvents } from "@nubitio/core";
 import { WorkflowSchema } from "@nubitio/hydra";
 
+//#region packages/crud/field/FilterRule.d.ts
+interface FilterRule {
+  field: string;
+  operator: string;
+  value: string | number | boolean;
+}
+//#endregion
+//#region packages/crud/datagrid/GridHandle.d.ts
+interface GridHandle {
+  showLoading: (message?: string) => void;
+  hideLoading: () => void;
+  refresh: () => void;
+  reset: () => void;
+  loadData: () => Promise<unknown>;
+  getSelectedRowKey: () => string | number | undefined;
+  getSelectedRow: () => DataRecord$1 | undefined;
+  getSelectedRowKeys: () => unknown[];
+  getSelectedRows: () => DataRecord$1[];
+  getFilter: () => unknown[];
+  filter: (filterRule: FilterRule | null) => void;
+}
+//#endregion
 //#region packages/crud/field/FieldType.d.ts
 declare enum FieldType {
   NONE = "none",
@@ -24,13 +46,6 @@ declare enum FieldType {
   HTML = "html"
 }
 //#endregion
-//#region packages/crud/field/FilterRule.d.ts
-interface FilterRule {
-  field: string;
-  operator: string;
-  value: string | number | boolean;
-}
-//#endregion
 //#region packages/crud/field/ValidationRule.d.ts
 type RequiredRule = {
   type: 'required';
@@ -442,21 +457,6 @@ interface FormHandle {
   setIsEdit: (value: boolean) => void;
 }
 //#endregion
-//#region packages/crud/datagrid/GridHandle.d.ts
-interface GridHandle {
-  showLoading: (message?: string) => void;
-  hideLoading: () => void;
-  refresh: () => void;
-  reset: () => void;
-  loadData: () => Promise<unknown>;
-  getSelectedRowKey: () => string | number | undefined;
-  getSelectedRow: () => DataRecord$1 | undefined;
-  getSelectedRowKeys: () => unknown[];
-  getSelectedRows: () => DataRecord$1[];
-  getFilter: () => unknown[];
-  filter: (filterRule: FilterRule | null) => void;
-}
-//#endregion
 //#region packages/crud/form/FormLayout.d.ts
 interface FormTab {
   label: string;
@@ -824,6 +824,12 @@ interface ResourceToolbarContext<T extends DataRecord$1 = DataRecord$1> {
   events: FormEventNames;
   emit: <P>(name: string, payload?: P) => void;
 }
+/** Context passed to `aboveGrid` slot renderers on SmartCrudPage / CrudPage. */
+interface CrudGridSlotContext<T extends DataRecord$1 = DataRecord$1> {
+  resource: ResourceConfig<T>;
+  gridRef: RefObject<GridHandle | null>;
+  refresh: () => void;
+}
 type ResourceToolbar<T extends DataRecord$1 = DataRecord$1> = ResourceToolbarItems | ((context: ResourceToolbarContext<T>) => ResourceToolbarItems);
 interface ResourceGridDetail {
   url: string;
@@ -944,6 +950,11 @@ interface ResourceConfig<T extends DataRecord$1 = DataRecord$1> {
   viewMode?: CrudViewMode | CrudViewModeConfig;
   format?: 'json' | 'multipart';
   toolbar?: ResourceToolbar<T>;
+  /**
+   * Custom UI between the grid toolbar and the table — KPI cards, quota banners,
+   * contextual filters. Static node or render function with grid helpers.
+   */
+  aboveGrid?: ReactNode | ((context: CrudGridSlotContext<T>) => ReactNode);
   rowActions?: ResourceRowActions<T>;
   onSaveSuccess?: (response: T) => void;
   onSaveError?: (error?: unknown) => void;
@@ -1065,6 +1076,8 @@ interface CrudPageProps<T extends DataRecord$1 = DataRecord$1> {
   /** External ref forwarded to the DataGridView — allows the parent to call
    *  showLoading / hideLoading / refresh / getSelectedRow imperatively. */
   gridRef?: React.RefObject<GridHandle | null>;
+  /** Overrides `resource.aboveGrid` — KPI cards, banners, etc. */
+  aboveGrid?: ResourceConfig<T>['aboveGrid'];
   onOperationChange?: (operation: SmartCrudOperation | null) => void;
 }
 /**
@@ -1084,6 +1097,7 @@ declare const CrudPage: <T extends DataRecord$1 = DataRecord$1>({
   editDisabled,
   deleteDisabled,
   gridRef,
+  aboveGrid,
   onOperationChange
 }: CrudPageProps<T>) => React.JSX.Element;
 //#endregion
@@ -1135,6 +1149,8 @@ interface SmartCrudPageProps<T extends DataRecord$1 = DataRecord$1> {
   /** External ref forwarded to the DataGridView — allows the parent to call
    *  showLoading / hideLoading / refresh / getSelectedRow imperatively. */
   gridRef?: RefObject<GridHandle | null>;
+  /** Custom UI above the grid table — KPI cards, banners. Overrides `resource.aboveGrid`. */
+  aboveGrid?: ResourceConfig<T>['aboveGrid'];
 }
 /**
  * SmartCrudPage — wraps CrudPage with Hydra auto-discovery and declarative rules.
@@ -1164,7 +1180,8 @@ declare function SmartCrudPage<T extends DataRecord$1 = DataRecord$1>({
   onSelectionChanged,
   editDisabled,
   deleteDisabled,
-  gridRef
+  gridRef,
+  aboveGrid
 }: SmartCrudPageProps<T>): React.JSX.Element;
 //#endregion
 //#region packages/crud/crud/SmartCrudRolesContext.d.ts
@@ -1578,6 +1595,8 @@ interface DataGridViewOptions {
   headerFilter?: boolean;
   manualLoad?: boolean;
   beforeToolbar?: () => ReactNode;
+  /** Custom content between the toolbar and the table (KPI cards, banners, filters). */
+  aboveGrid?: ReactNode;
   errorMessage?: string | null;
   onDismissError?: () => void;
   editMode?: 'popup' | 'row' | 'cell' | 'batch';
@@ -2016,4 +2035,4 @@ interface RestQueryDialect {
  */
 declare function createRestResourceStore(dialect?: RestQueryDialect): ResourceStoreFactory;
 //#endregion
-export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type RestQueryDialect, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, buildWorkflowRowActions, checkboxField, computeSummaryValue, createCrudEvents, createRestResourceStore, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, embeddedLinesUrl, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };
+export { type AuditEntry, type AuditFieldLabelResolver, type AuditTrailConfig, AuditTrailPanel, type AuditTrailPanelProps, type BackendAdapter, type BulkAction, type ColSpan, type ColumnPreset, ColumnPresetSelector, type ColumnPresetState, CrudDialogShell, CrudDrawerShell, type CrudDrawerSize, type CrudDrawerViewEvents, type CrudDrawerViewOptions, CrudFormShell, type CrudFormShellProps, type CrudGridSlotContext, CrudPage, CrudPageShell, type CrudPageViewEvents, type CrudPageViewOptions, type CrudViewMode, type CrudViewModeConfig, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, type DataGridSelectionChangedEvent, type DataGridSummaryItem, NativeDataGridView as DataGridView, type DataGridViewOptions, type DataRecord, type DetailSummaryOptions, CrudDialogView as DialogView, type DrawerSize, CrudDrawerView as DrawerView, type EnumOption, FORM_EVENTS, type Field, FieldBuilder, type FieldColSpanContext, type FieldDef, type FieldInput, type FieldOverride, FieldType, type FilterRule, type FormHandle, type FormLayout, type FormLayoutHint, type FormOnChangeFn, type FormPresentationContext, type FormPresentationMode, type FormSection, type FormTab, NativeFormView as FormView, type FormViewOptions, type FormatterFn, type GridCellContext, type GridData, type GridHandle, type GridOnChangeFn, HydraAdapter, type ItemFormatterFn, type LoadOption, type OnChangeFn, CrudPageView as PageView, type ResolvedViewMode, type ResourceConfig, type ResourceEmptyState, type ResourceFilterDescriptor, type ResourceFilterRule, type ResourceFormDetail, type ResourceGridDetail, type ResourceLoadOption, type ResourceLoadOptions, type ResourcePermissions, type ResourceRouting, type ResourceRowActions, ResourceSchemaProvider, type ResourceSchemaProviderProps, type ResourceSchemaResolution, type ResourceSchemaResolver, type ResourceSortDescriptor, type ResourceStore, type ResourceStoreFactory, type ResourceStoreOptions, ResourceStoreProvider, type ResourceStoreProviderProps, type ResourceToolbar, type ResourceToolbarAction, type ResourceToolbarActionVariant, type ResourceToolbarContext, type ResourceToolbarItems, RestAdapter, type RestQueryDialect, type SmartCrudFieldContract, type SmartCrudFieldOperation, type SmartCrudFieldPatch, type SmartCrudHydraFieldContract, type SmartCrudHydraFieldDirective, type SmartCrudManualField, type SmartCrudManualFieldContract, type SmartCrudOperation, SmartCrudPage, SmartCrudRolesProvider, type SummaryCalculateContext, type SummaryFormat, type SummaryItem, type SummaryTextContext, type SummaryType, ToolbarSelect, type ToolbarSelectOption, type ToolbarSelectProps, type ValidationRule, buildFieldColSpanContext, buildFields, buildWorkflowRowActions, checkboxField, computeSummaryValue, createCrudEvents, createRestResourceStore, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, embeddedLinesUrl, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };

package/dist/index.mjs

@@ -2707,6 +2707,10 @@ const NativeDataGridView = forwardRef((options, ref) => {
 							})
 						]
 					}),
+					options.aboveGrid ? /* @__PURE__ */ jsx("div", {
+						className: "nb-datagrid__above-grid",
+						children: options.aboveGrid
+					}) : null,
 					isMobile && quickSearchField && (options.filterRow ?? true) && /* @__PURE__ */ jsxs("div", {
 						className: "nb-datagrid__quick-search",
 						children: [
@@ -5276,7 +5280,11 @@ function usePermissions(resource, supportedOperations = []) {
 			canExport: resolve(p?.canExport, false),
 			canBulkDelete: resolve(p?.canBulkDelete, false)
 		};
-	}, [resource.id, opsKey]);
+	}, [
+		resource.id,
+		opsKey,
+		resource.permissions
+	]);
 }
 //#endregion
 //#region packages/crud/crud/useSelectionState.ts
@@ -6125,7 +6133,7 @@ function buildRoutingFilterRules(fields, initialFilters) {
 * Public export — wraps CrudPageInner in its own DialogStoreProvider so that
 * existing pages do not need to add a provider themselves.
 */
-const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, onOperationChange }) => /* @__PURE__ */ jsx(DialogStoreProvider, { children: /* @__PURE__ */ jsx(CrudPageInner, {
+const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, computedValues, initialFilters, onFiltersChange, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid, onOperationChange }) => /* @__PURE__ */ jsx(DialogStoreProvider, { children: /* @__PURE__ */ jsx(CrudPageInner, {
 	resource,
 	onFormDataChange,
 	initialRecordId,
@@ -6138,9 +6146,10 @@ const CrudPage = ({ resource, onFormDataChange, initialRecordId, initialIsNew, c
 	editDisabled,
 	deleteDisabled,
 	gridRef,
+	aboveGrid,
 	onOperationChange
 }) });
-const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, onOperationChange }) => {
+const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, initialIsNew = false, computedValues = EMPTY_COMPUTED_VALUES, initialFilters = EMPTY_INITIAL_FILTERS, onFiltersChange, formRef: externalFormRef, onSelectionChanged: externalOnSelectionChanged, editDisabled, deleteDisabled, gridRef: externalGridRef, aboveGrid: aboveGridOverride, onOperationChange }) => {
 	const { t } = useCoreTranslation();
 	const { events, resource: resolvedResource, fields, formFields, formRef, permissions, selectionState, presetState } = useCrudPage(useMemo(() => resolveCrudResource(resource), [resource]), externalFormRef);
 	const datagridFields = useMemo(() => fields.filter((field) => field.isIdentity || field.visible !== false), [fields]);
@@ -6403,6 +6412,16 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 		resolvedResource.rowActions,
 		t
 	]);
+	const aboveGridSlot = aboveGridOverride ?? resolvedResource.aboveGrid;
+	const aboveGridContent = (() => {
+		if (!aboveGridSlot) return;
+		if (typeof aboveGridSlot === "function") return aboveGridSlot({
+			resource: resolvedResource,
+			gridRef,
+			refresh: () => gridRef.current?.refresh()
+		});
+		return aboveGridSlot;
+	})();
 	/** Preset selector rendered as a toolbar slot via `beforeToolbar`. */
 	const renderPresetSelector = hasPresets ? () => /* @__PURE__ */ jsx(ColumnPresetSelector, {
 		resourceId: resolvedResource.id,
@@ -6465,6 +6484,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				editMode: resolvedResource.editMode,
 				visibleColumns: presetState.visibleColumns,
 				beforeToolbar: renderPresetSelector,
+				aboveGrid: aboveGridContent,
 				detailUrl: gridDetail?.url,
 				detailFields: gridDetail?.fields,
 				onFilterChange: onFiltersChange,
@@ -7586,7 +7606,7 @@ function formatRuntimeErrorMessage(error) {
 *
 * URL deep-linking is wired via `initialRecordId` / `initialIsNew` props on CrudPage.
 */
-function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef }) {
+function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged, editDisabled, deleteDisabled, gridRef, aboveGrid }) {
 	const queryClient = useQueryClient();
 	const internalGridRef = useRef(null);
 	const effectiveGridRef = gridRef ?? internalGridRef;
@@ -7671,6 +7691,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		editDisabled,
 		deleteDisabled,
 		gridRef: effectiveGridRef,
+		aboveGrid: aboveGrid ?? resource.aboveGrid,
 		onOperationChange: (operation) => {
 			if (operation === "create") {
 				startCreate();

package/dist/style.css

@@ -31,6 +31,15 @@
   padding-top: var(--content-padding);
 }
 
+.nb-datagrid__above-grid {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+  min-width: 0;
+}
+
 .nb-datagrid__toolbar {
   align-items: center;
   background: var(--surface-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/crud",
-  "version": "0.5.22",
+  "version": "0.5.24",
   "type": "module",
   "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.22",
-    "@nubitio/ui": "^0.5.22"
+    "@nubitio/core": "^0.5.24",
+    "@nubitio/ui": "^0.5.24"
   }
 }