feat: add RowActions component for enhanced row-level actions in data grids

- Introduced RowActions component to manage row-level actions with tooltips and dropdown menus.
- Created types for row actions and page actions to standardize action properties.
- Implemented utility function to map action intents to Mantine theme colors.
- Updated CoreAppShell component to support optional slots for better flexibility.
- Added enterprise module structure with context hooks for managing module state and actions.
- Implemented draft management for forms to enhance user experience during data entry.
- Established context providers for detail, form, and index pages to streamline data handling.
- Updated dependencies to ensure compatibility with the latest versions.

packages/ui/src/components/core-app-shell/core-app-shell.tsx

@@ -3,7 +3,6 @@ import { AppShell, Flex, Box, Button } from '@mantine/core';
 import { CoreAppShellProvider, useCoreAppShell } from './core-app-shell-context';
 import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types';
 
-
 const DEFAULT_DIMENSIONS: Required<CoreAppShellDimensions> = {
   utilityBarHeight: 32,
   headerHeight: 60,
@@ -14,12 +13,13 @@ const DEFAULT_DIMENSIONS: Required<CoreAppShellDimensions> = {
 };
 
 interface CoreAppShellInnerProps {
-  slots: CoreAppShellSlots;
+  slots?: CoreAppShellSlots;
   children: React.ReactNode;
 }
 
-function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
-  const { mobileOpened, desktopOpened, sidebarVariant, asideOpened, navbarPanelOpened, config, toggleMobile } = useCoreAppShell();
+function CoreAppShellInner({ slots = {}, children }: CoreAppShellInnerProps) {
+  const { mobileOpened, desktopOpened, sidebarVariant, asideOpened, navbarPanelOpened, config, toggleMobile } =
+    useCoreAppShell();
   const { variant, dimensions, features } = config;
   const dims = { ...DEFAULT_DIMENSIONS, ...dimensions };
 
@@ -27,7 +27,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
   const isTopNav = variant === 'top-nav';
   const isFooterOffset = variant === 'header-first';
   const isSidebarFirst = variant === 'sidebar-first';
-  
+
   // Calculate Navbar Width based on states
   const navbarWidth = useMemo(() => {
     let desktopWidth = dims.sidebarWidth;
@@ -46,13 +46,12 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
 
   // Determine AppShell Layout
   const appShellLayout = variant === 'sidebar-first' ? 'alt' : 'default';
-  
+
   // Smart defaults for slots
   const showUtilityBar = (features?.withUtilityBar ?? Boolean(slots.utilityBar)) && Boolean(slots.utilityBar);
   const showAside = (features?.withAside ?? Boolean(slots.aside)) && Boolean(slots.aside);
   const showFooter = (features?.withFooter ?? Boolean(slots.footer)) && Boolean(slots.footer);
 
-  
   // Header height needs to account for utility bar if present
   const totalHeaderHeight = useMemo(() => {
     if (!showUtilityBar) return dims.headerHeight;
@@ -63,6 +62,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
     return `calc(${dims.headerHeight}${typeof dims.headerHeight === 'number' ? 'px' : ''} + ${dims.utilityBarHeight}${typeof dims.utilityBarHeight === 'number' ? 'px' : ''})`;
   }, [dims.headerHeight, dims.utilityBarHeight, showUtilityBar]);
 
+  console.log({ totalHeaderHeight, dimensions });
   return (
     <AppShell
       layout={appShellLayout}
@@ -74,7 +74,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         breakpoint: 'sm',
         collapsed: {
           mobile: !mobileOpened,
-          desktop: isTopNav ? true : (features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false),
+          desktop: isTopNav ? true : features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false,
         },
       }}
       aside={
@@ -100,9 +100,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
               {slots.utilityBar}
             </Box>
           )}
-          <Box flex={1}>
-            {slots.header}
-          </Box>
+          <Box flex={1}>{slots.header}</Box>
         </Flex>
       </AppShell.Header>
 
@@ -121,12 +119,12 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         <Box visibleFrom="sm" h="100%" display={isTopNav ? 'none' : undefined}>
           {isDoubleSidebar ? (
             <Flex h="100%" direction="row" wrap="nowrap">
-              <Box 
-                w={dims.sidebarRailWidth} 
-                h="100%" 
-                style={{ 
+              <Box
+                w={dims.sidebarRailWidth}
+                h="100%"
+                style={{
                   flexShrink: 0,
-                  borderRight: '1px solid var(--mantine-color-default-border)' 
+                  borderRight: '1px solid var(--mantine-color-default-border)',
                 }}
               >
                 {slots.sidebarRail}
@@ -143,15 +141,13 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         </Box>
         <Box hiddenFrom="sm" h="100%">
           <Flex direction="column" h="100%">
-            {
-              isSidebarFirst && (
-                <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
-                  <Button fullWidth variant="default" onClick={toggleMobile}>
-                    Close
-                  </Button>
-                </Box>
-              )
-            }
+            {isSidebarFirst && (
+              <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+                <Button fullWidth variant="default" onClick={toggleMobile}>
+                  Close
+                </Button>
+              </Box>
+            )}
             <Box flex={1} style={{ overflowY: 'auto' }}>
               {slots.sidebarMobile || slots.sidebar}
             </Box>
@@ -175,9 +171,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         </AppShell.Aside>
       )}
 
-      <AppShell.Main>
-        {children}
-      </AppShell.Main>
+      <AppShell.Main>{children}</AppShell.Main>
 
       {showFooter && (
         <AppShell.Footer
@@ -204,16 +198,14 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
 
 export interface CoreAppShellProps {
   config: CoreAppShellConfig;
-  slots: CoreAppShellSlots;
+  slots?: CoreAppShellSlots;
   children: React.ReactNode;
 }
 
 export function CoreAppShell({ config, slots, children }: CoreAppShellProps) {
   return (
     <CoreAppShellProvider config={config}>
-      <CoreAppShellInner slots={slots}>
-        {children}
-      </CoreAppShellInner>
+      <CoreAppShellInner slots={slots}>{children}</CoreAppShellInner>
     </CoreAppShellProvider>
   );
 }