feat: implement bulk action framework, expand data table component, and update enterprise module configuration.

This commit is contained in:
Firman Ramdhani
2026-07-20 17:03:25 +07:00
parent 7cec05464a
commit a761ba05c9
5 changed files with 34 additions and 24 deletions
+19 -17
View File
@@ -1,7 +1,7 @@
import { lazy, Suspense, useEffect, useState } from 'react'; import { lazy, Suspense, useEffect, useState } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { ThemeProvider, DensityType } from '@repo/ui/provider'; import { ThemeProvider, DensityType } from '@repo/ui/provider';
import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui/components'; import { NotFound, Forbidden, Maintenance, ComingSoon, AgGridProvider } from '@repo/ui/components';
import { LoadingScreen } from '../core/components/loading-screen'; import { LoadingScreen } from '../core/components/loading-screen';
import { useThemeStore } from '../core/stores/theme.store'; import { useThemeStore } from '../core/stores/theme.store';
import { initializeAndPurgeHistoryBackground } from './modules/layouts/hooks/useHistoryTracker'; import { initializeAndPurgeHistoryBackground } from './modules/layouts/hooks/useHistoryTracker';
@@ -23,22 +23,24 @@ export default function App() {
return ( return (
<ThemeProvider colorScheme={colorScheme} density={density}> <ThemeProvider colorScheme={colorScheme} density={density}>
<BrowserRouter> <AgGridProvider bypassLicense>
<Suspense fallback={<LoadingScreen />}> <BrowserRouter>
<Routes> <Suspense fallback={<LoadingScreen />}>
<Route path="/auth/*" element={<AuthModule />} /> <Routes>
<Route path="/app/*" element={<AppModule />} /> <Route path="/auth/*" element={<AuthModule />} />
<Route path="/showcase" element={<ShowcaseView density={density} setDensity={setDensity} />} /> <Route path="/app/*" element={<AppModule />} />
<Route path="/shell-demo" element={<ShellDemo />} /> <Route path="/showcase" element={<ShowcaseView density={density} setDensity={setDensity} />} />
<Route path="/404" element={<NotFound homeUrl="/app" />} /> <Route path="/shell-demo" element={<ShellDemo />} />
<Route path="/403" element={<Forbidden homeUrl="/app" />} /> <Route path="/404" element={<NotFound homeUrl="/app" />} />
<Route path="/maintenance" element={<Maintenance />} /> <Route path="/403" element={<Forbidden homeUrl="/app" />} />
<Route path="/coming-soon" element={<ComingSoon />} /> <Route path="/maintenance" element={<Maintenance />} />
<Route path="/" element={<Navigate to="/showcase" />} /> <Route path="/coming-soon" element={<ComingSoon />} />
<Route path="*" element={<Navigate to="/404" />} /> <Route path="/" element={<Navigate to="/showcase" />} />
</Routes> <Route path="*" element={<Navigate to="/404" />} />
</Suspense> </Routes>
</BrowserRouter> </Suspense>
</BrowserRouter>
</AgGridProvider>
</ThemeProvider> </ThemeProvider>
); );
} }
@@ -39,6 +39,7 @@
"expandAll": "Expand all menu", "expandAll": "Expand all menu",
"collapseAll": "Collapse all menu", "collapseAll": "Collapse all menu",
"searchMenu": "Search menu", "searchMenu": "Search menu",
"searchData": "Search data",
"collapse": "Collapse", "collapse": "Collapse",
"expandSidebar": "Expand Sidebar", "expandSidebar": "Expand Sidebar",
"actions": { "actions": {
@@ -55,7 +56,9 @@
"rollback": "Rollback", "rollback": "Rollback",
"hold": "Hold", "hold": "Hold",
"back": "Back", "back": "Back",
"reload": "Reload" "reload": "Reload",
"filter": "Filter",
"setting": "Setting"
}, },
"confirmDialog": { "confirmDialog": {
"delete": { "delete": {
@@ -39,6 +39,7 @@
"expandAll": "Buka semua menu", "expandAll": "Buka semua menu",
"collapseAll": "Tutup semua menu", "collapseAll": "Tutup semua menu",
"searchMenu": "Cari menu", "searchMenu": "Cari menu",
"searchData": "Cari data",
"collapse": "Tutup", "collapse": "Tutup",
"expandSidebar": "Perluas Sidebar", "expandSidebar": "Perluas Sidebar",
"actions": { "actions": {
@@ -55,7 +56,9 @@
"rollback": "Rollback", "rollback": "Rollback",
"hold": "Hold", "hold": "Hold",
"back": "Kembali", "back": "Kembali",
"reload": "Muat Ulang" "reload": "Muat Ulang",
"filter": "Filter",
"setting": "Pengaturan"
}, },
"confirmDialog": { "confirmDialog": {
"delete": { "delete": {
@@ -46,7 +46,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
const ButtonWithDropdown = ( const ButtonWithDropdown = (
<Button <Button
variant={action.variant || 'transparent'} variant={action.variant || 'transparent'}
color={getIntentColor(action.intent)} color={action?.color ? action.color : getIntentColor(action.intent)}
leftSection={action.icon} leftSection={action.icon}
rightSection={<ChevronDown size={14} />} rightSection={<ChevronDown size={14} />}
disabled={action.disabled} disabled={action.disabled}
@@ -78,7 +78,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
<Menu.Item <Menu.Item
key={child.key} key={child.key}
leftSection={child.icon} leftSection={child.icon}
color={getIntentColor(child.intent)} color={action?.color ? action.color : getIntentColor(child.intent)}
disabled={child.disabled} disabled={child.disabled}
onClick={() => child.onClick?.(child.key || '')} onClick={() => child.onClick?.(child.key || '')}
> >
@@ -95,7 +95,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
const StandaloneButton = ( const StandaloneButton = (
<Button <Button
variant={action.variant || 'transparent'} variant={action.variant || 'transparent'}
color={getIntentColor(action.intent)} color={action?.color ? action.color : getIntentColor(action.intent)}
leftSection={action.icon} leftSection={action.icon}
disabled={action.disabled} disabled={action.disabled}
onClick={() => action.onClick?.(action.key || '')} onClick={() => action.onClick?.(action.key || '')}
@@ -142,7 +142,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
<Menu.Item <Menu.Item
key={child.key} key={child.key}
leftSection={child.icon} leftSection={child.icon}
color={getIntentColor(child.intent)} color={action?.color ? action.color : getIntentColor(child.intent)}
disabled={child.disabled} disabled={child.disabled}
onClick={() => child.onClick?.(child.key || '')} onClick={() => child.onClick?.(child.key || '')}
style={{ paddingLeft: '1.5rem' }} style={{ paddingLeft: '1.5rem' }}
@@ -157,7 +157,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
); );
} }
const color = getIntentColor(action.intent); const color = action?.color ? action.color : getIntentColor(action.intent);
const realColor = color === undefined ? 'brand' : color; const realColor = color === undefined ? 'brand' : color;
return ( return (
@@ -23,6 +23,8 @@ export interface BaseAction {
/** Semantic context to determine visual emphasis (color mapping). */ /** Semantic context to determine visual emphasis (color mapping). */
intent?: ActionIntent; intent?: ActionIntent;
color?: string;
/** Callback triggered upon action execution. */ /** Callback triggered upon action execution. */
onClick?: (key: string) => void; onClick?: (key: string) => void;
} }