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.
2026-07-01 17:04:20 +07:00
parent 1c2090f4fb
commit 8f14c4bc7b
60 changed files with 2188 additions and 442 deletions
@@ -0,0 +1,150 @@
+import { memo, Fragment } from 'react';
+import { Group, Button, Menu, Divider, ActionIcon, Box } from '@mantine/core';
+import { ChevronDown, MoreVertical, X } from 'lucide-react';
+import { PageAction } from './types';
+import { getIntentColor } from './utils';
+
+export interface PageActionsProps {
+  /** Array of configured page-level actions. */
+  actions: PageAction[];
+  /** Optional callback triggered when the close (X) button is clicked. */
+  onClose?: () => void;
+}
+
+/**
+ * A responsive and flexible presentational component for page-level actions.
+ * Automatically adapts layout based on screen size:
+ * - Desktop: Renders a horizontal toolbar with buttons and dividers.
+ * - Mobile: Renders a single Menu dropdown containing all actions.
+ *
+ * @performance Wrapped in React.memo to prevent unnecessary re-renders.
+ */
+export const PageActions = memo(function PageActions({ actions }: PageActionsProps) {
+  return (
+    <Box style={{ display: 'inline-flex' }}>
+      {/* --- DESKTOP VIEW (hidden on mobile devices) --- */}
+      <Group gap="xs" wrap="nowrap" visibleFrom="sm">
+        {actions.map((action, index) => {
+          if (action.type === 'divider') {
+            return <Divider key={`divider-${index}`} orientation="vertical" mr="sm" ml="sm" />;
+          }
+
+          // Render Dropdown Menu for actions with children
+          if (action.children && action.children.length > 0) {
+            return (
+              <Menu key={action.key} position="bottom-start" withArrow withinPortal trigger="hover">
+                <Menu.Target>
+                  <Button
+                    variant={action.variant || 'transparent'}
+                    color={getIntentColor(action.intent)}
+                    leftSection={action.icon}
+                    rightSection={<ChevronDown size={14} />}
+                    disabled={action.disabled}
+                    size="xs"
+                    pr="sm"
+                    pl="sm"
+                  >
+                    {action.label}
+                  </Button>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  {action.children.map((child, childIndex) => {
+                    if (child.type === 'divider') {
+                      return <Menu.Divider key={`child-divider-${childIndex}`} />;
+                    }
+                    return (
+                      <Menu.Item
+                        key={child.key}
+                        leftSection={child.icon}
+                        color={getIntentColor(child.intent)}
+                        disabled={child.disabled}
+                        onClick={() => child.onClick?.(child.key || '')}
+                      >
+                        {child.label}
+                      </Menu.Item>
+                    );
+                  })}
+                </Menu.Dropdown>
+              </Menu>
+            );
+          }
+
+          return (
+            <Button
+              key={action.key}
+              variant={action.variant || 'transparent'}
+              color={getIntentColor(action.intent)}
+              leftSection={action.icon}
+              disabled={action.disabled}
+              onClick={() => action.onClick?.(action.key || '')}
+              size="xs"
+              pr="sm"
+              pl="sm"
+            >
+              {action.label}
+            </Button>
+          );
+        })}
+      </Group>
+
+      {/* --- MOBILE VIEW (hidden on desktop devices) --- */}
+      <Group gap="xs" wrap="nowrap" hiddenFrom="sm">
+        <Menu position="bottom-end" withArrow withinPortal>
+          <Menu.Target>
+            <ActionIcon variant="transparent" size="md">
+              <MoreVertical size={16} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {actions.map((action, index) => {
+              if (action.type === 'divider') {
+                return <Menu.Divider key={`mobile-divider-${index}`} mt="sm" mb="sm" />;
+              }
+
+              if (action.children && action.children.length > 0) {
+                return (
+                  <Fragment key={action.key}>
+                    <Menu.Label>{action.label}</Menu.Label>
+                    {action.children.map((child, childIndex) => {
+                      if (child.type === 'divider') {
+                        return <Menu.Divider key={`mobile-child-divider-${childIndex}`} mt="xs" mb="xs" />;
+                      }
+                      return (
+                        <Menu.Item
+                          key={child.key}
+                          leftSection={child.icon}
+                          color={getIntentColor(child.intent)}
+                          disabled={child.disabled}
+                          onClick={() => child.onClick?.(child.key || '')}
+                          style={{ paddingLeft: '1.5rem' }} // Indent nested items
+                          mt="sm"
+                          mb="sm"
+                        >
+                          {child.label}
+                        </Menu.Item>
+                      );
+                    })}
+                  </Fragment>
+                );
+              }
+
+              return (
+                <Menu.Item
+                  key={action.key}
+                  leftSection={action.icon}
+                  color={getIntentColor(action.intent)}
+                  disabled={action.disabled}
+                  onClick={() => action.onClick?.(action.key || '')}
+                  mt="sm"
+                  mb="sm"
+                >
+                  {action.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
+    </Box>
+  );
+});