diff --git a/packages/core-i18n/src/languages/en/common.json b/packages/core-i18n/src/languages/en/common.json index 7997037..413cd6d 100644 --- a/packages/core-i18n/src/languages/en/common.json +++ b/packages/core-i18n/src/languages/en/common.json @@ -40,8 +40,11 @@ "collapseAll": "Collapse all menu", "searchMenu": "Search menu", "searchData": "Search data", + "searchPlaceholder": "Type to search & press Enter...", "collapse": "Collapse", "expandSidebar": "Expand Sidebar", + "filterTitle": "Filter {{module}}", + "tableSettingTitle": "Table Setting {{module}}", "actions": { "create": "Create New", "edit": "Edit", diff --git a/packages/core-i18n/src/languages/id/common.json b/packages/core-i18n/src/languages/id/common.json index 4d14de9..609f5fa 100644 --- a/packages/core-i18n/src/languages/id/common.json +++ b/packages/core-i18n/src/languages/id/common.json @@ -40,8 +40,11 @@ "collapseAll": "Tutup semua menu", "searchMenu": "Cari menu", "searchData": "Cari data", + "searchPlaceholder": "Ketik pencarian & tekan Enter...", "collapse": "Tutup", - "expandSidebar": "Perluas Sidebar", + "expandSidebar": "Perluas Bilah Sisi", + "filterTitle": "Filter {{module}}", + "tableSettingTitle": "Pengaturan Tabel {{module}}", "actions": { "create": "Buat Baru", "edit": "Ubah", diff --git a/packages/ui/src/components/actions-tools/page-actions.tsx b/packages/ui/src/components/actions-tools/page-actions.tsx index 8226b0d..bb763b6 100644 --- a/packages/ui/src/components/actions-tools/page-actions.tsx +++ b/packages/ui/src/components/actions-tools/page-actions.tsx @@ -1,5 +1,5 @@ import { memo, Fragment } from 'react'; -import { Group, Button, Menu, Divider, ActionIcon, Box, ButtonProps, Tooltip } from '@mantine/core'; +import { Group, Button, Menu, Divider, ActionIcon, Box, ButtonProps, Tooltip, MantineSpacing } from '@mantine/core'; import { ChevronDown, MoreVertical } from 'lucide-react'; import { PageActionProps } from './types'; import { getIntentColor } from './utils'; @@ -8,13 +8,16 @@ export interface PageActionsProps { /** Array of configured page-level actions. */ actions?: PageActionProps[]; customButtonProps?: (action: PageActionProps) => ButtonProps; + gapActionDesktop?:MantineSpacing; + gapActionMobile?:MantineSpacing } /** * A responsive and flexible presentational component for page-level actions. * Automatically adapts layout based on screen size. */ -export const PageActions = memo(function PageActions({ actions = [], customButtonProps }: PageActionsProps) { +export const PageActions = memo(function PageActions(props: PageActionsProps) { + const { actions = [], customButtonProps, gapActionDesktop='xs', gapActionMobile='sm' }=props; if (!actions || actions?.length === 0) { return null; } @@ -33,7 +36,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto return ( {/* --- DESKTOP VIEW --- */} - + {actions.map((action, index) => { if (action.type === 'divider') { return ; @@ -139,7 +142,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto {/* --- MOBILE VIEW --- */} - + diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/components/bulk-actions.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/components/bulk-actions.tsx index 19fdb90..4d61a12 100644 --- a/packages/ui/src/foundations/enterprise-module/components/data-table/components/bulk-actions.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/data-table/components/bulk-actions.tsx @@ -6,7 +6,6 @@ import { } from '../../../hooks/use-module.context'; import { Trash2, CheckCircle, XCircle, PauseCircle, RotateCcw, X, Check } from 'lucide-react'; import { PageActions, PageActionProps } from '../../../../../components'; -import { Group } from '@mantine/core'; // --------------------------------------------------------------------------- // Types @@ -159,9 +158,5 @@ export function BulkActionMenu({ if (actions.length === 0) return null; - return ( - - - - ); + return ; } diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-filter-drawer.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-filter-drawer.tsx new file mode 100644 index 0000000..0bce4d0 --- /dev/null +++ b/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-filter-drawer.tsx @@ -0,0 +1,24 @@ +import { Drawer, Text } from '@mantine/core'; + +export interface TableFilterDrawerProps { + opened: boolean; + onClose: () => void; + title: string; +} + +export function TableFilterDrawer({ opened, onClose, title }: TableFilterDrawerProps) { + return ( + {title}} + position="right" + size="md" + padding="md" + > + + Filter configuration will go here. + + + ); +} diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-setting-drawer.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-setting-drawer.tsx new file mode 100644 index 0000000..4181987 --- /dev/null +++ b/packages/ui/src/foundations/enterprise-module/components/data-table/components/table-setting-drawer.tsx @@ -0,0 +1,24 @@ +import { Drawer, Text } from '@mantine/core'; + +export interface TableSettingDrawerProps { + opened: boolean; + onClose: () => void; + title: string; +} + +export function TableSettingDrawer({ opened, onClose, title }: TableSettingDrawerProps) { + return ( + {title}} + position="right" + size="md" + padding="md" + > + + Table setting configuration will go here. + + + ); +} diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx index 4464a8a..2ac170a 100644 --- a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx +++ b/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(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 | null>(null); @@ -690,13 +697,46 @@ export function EnterpriseDataTable(props: EnterpriseDataT // --------------------------------------------------------------------------- return ( - {/* BULK ACTION TOOLBAR — shown when rows are selected */} - void} - statusKey={statusKey} - customBulkActions={customBulkActions} - /> + {/* TABLE HEADER (Search, Filter, Bulk Actions) */} + + + } + /> + , + variant: 'default', + showLabel: false, + tooltipLabel: t('common:actions.filter'), + onClick: openFilter, + }, + { + key: 'setting', + icon: , + variant: 'default', + showLabel: false, + tooltipLabel: t('common:actions.setting'), + onClick: openSetting, + }, + ]} + /> + + + {/* BULK ACTION TOOLBAR — shown when rows are selected */} + void} + statusKey={statusKey} + customBulkActions={customBulkActions} + /> + {/* GRID CONTAINER */} (props: EnterpriseDataT t={t} batchSize={batchSize} /> + + + ); }