feat: enhance data-table with search, filter/setting drawers, and updated UI controls

packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx

@@ -11,9 +11,11 @@ import {
   DefaultMenuItem,
   StatusBar,
 } from 'ag-grid-community';
-import { Box } from '@mantine/core';
+import { Box, Group, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Search, Filter, Settings } from 'lucide-react';
 
-import { DataGrid, StatusBadge } from '../../../../components';
+import { DataGrid, StatusBadge, PageActions } from '../../../../components';
 import type { PageActionProps } from '../../../../components';
 
 import {
@@ -37,6 +39,8 @@ import { RowActionMenu } from './components/row-actions';
 import { BulkActionMenu } from './components/bulk-actions';
 import { ActionConfirmationModal, ACTION_TRANSLATION_MAP } from '../action-confirmation-modal';
 import { BulkActionConfirmationModal } from '../bulk-action-confirmation';
+import { TableFilterDrawer } from './components/table-filter-drawer';
+import { TableSettingDrawer } from './components/table-setting-drawer';
 import { EntityId } from '../../../../../../core-api/src/data-services/types';
 
 export * from 'ag-grid-community';
@@ -184,6 +188,9 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
   // ---------------------------------------------------------------------------
   // Local UI State
   // ---------------------------------------------------------------------------
+  const [openedFilter, { open: openFilter, close: closeFilter }] = useDisclosure(false);
+  const [openedSetting, { open: openSetting, close: closeSetting }] = useDisclosure(false);
+  const moduleTitle = config.tabTitle || t(`${config.translationNamespace}:title`);
 
   // Reference to the AG Grid API for programmatic interaction
   const gridApiRef = useRef<GridApi<E> | null>(null);
@@ -690,13 +697,46 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
   // ---------------------------------------------------------------------------
   return (
     <Box>
-      {/* BULK ACTION TOOLBAR — shown when rows are selected */}
-      <BulkActionMenu
-        selectedRows={selectedRows as E[]}
-        onActionClick={handleBulkActionClick as (action: ModuleActionType, data: any[]) => void}
-        statusKey={statusKey}
-        customBulkActions={customBulkActions}
-      />
+      {/* TABLE HEADER (Search, Filter, Bulk Actions) */}
+      <Group justify="space-between" align="center" mb="sm">
+        <Group gap="sm">
+          <TextInput
+            size="sm"
+            w={{ base: '100%', sm: 350 }}
+            placeholder={t('common:searchPlaceholder')}
+            leftSection={<Search size={16} />}
+          />
+          <PageActions
+            actions={[
+              { type: 'divider', key: 'search-divider' },
+              {
+                key: 'filter',
+                icon: <Filter size={16} />,
+                variant: 'default',
+                showLabel: false,
+                tooltipLabel: t('common:actions.filter'),
+                onClick: openFilter,
+              },
+              {
+                key: 'setting',
+                icon: <Settings size={16} />,
+                variant: 'default',
+                showLabel: false,
+                tooltipLabel: t('common:actions.setting'),
+                onClick: openSetting,
+              },
+            ]}
+          />
+        </Group>
+
+        {/* BULK ACTION TOOLBAR — shown when rows are selected */}
+        <BulkActionMenu
+          selectedRows={selectedRows as E[]}
+          onActionClick={handleBulkActionClick as (action: ModuleActionType, data: any[]) => void}
+          statusKey={statusKey}
+          customBulkActions={customBulkActions}
+        />
+      </Group>
 
       {/* GRID CONTAINER */}
       <Box
@@ -745,6 +785,17 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
         t={t}
         batchSize={batchSize}
       />
+      <TableFilterDrawer
+        opened={openedFilter}
+        onClose={closeFilter}
+        title={t('common:filterTitle', { module: moduleTitle })}
+      />
+
+      <TableSettingDrawer
+        opened={openedSetting}
+        onClose={closeSetting}
+        title={t('common:tableSettingTitle', { module: moduleTitle })}
+      />
     </Box>
   );
 }