feat: add StatusBadge component and integrate action confirmation modal

- Introduced StatusBadge component for displaying various status indicators with customizable colors and icons.
- Updated ModulePageHeader to conditionally render badges based on props.
- Implemented ActionConfirmationModal for handling lifecycle actions (delete, activate, etc.) with support for forms and custom body rendering.
- Enhanced EnterpriseDetailPageProvider to manage action confirmation modal state and execution of actions.
- Added new modal configurations for various actions in EnterpriseDetailPageConfig.
- Updated theme provider to include ModalsProvider and Notifications for better user feedback.

packages/ui/src/components/actions-tools/page-actions.tsx

@@ -23,6 +23,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
     return {
       size: 'sm',
       radius: 'md',
+      fw: 500,
       style: isPremiumGlow
         ? { boxShadow: '0 4px 14px 0 color-mix(in srgb, var(--mantine-primary-color-filled) 40%, transparent)' }
         : undefined,
@@ -32,7 +33,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
   return (
     <Box style={{ display: 'inline-flex' }}>
       {/* --- DESKTOP VIEW --- */}
-      <Group gap="xs" wrap="nowrap" visibleFrom="sm">
+      <Group gap="xs" wrap="nowrap" visibleFrom="md">
         {actions.map((action, index) => {
           if (action.type === 'divider') {
             return <Divider key={`divider-${index}`} orientation="vertical" mr="sm" ml="sm" />;
@@ -116,14 +117,14 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
       </Group>
 
       {/* --- MOBILE VIEW --- */}
-      <Group gap="xs" wrap="nowrap" hiddenFrom="sm">
+      <Group gap="xs" wrap="nowrap" hiddenFrom="md">
         <Menu position="bottom-end" withArrow withinPortal>
           <Menu.Target>
             <ActionIcon variant="outline" size="md">
               <MoreVertical size={16} />
             </ActionIcon>
           </Menu.Target>
-          <Menu.Dropdown px={'xl'}>
+          <Menu.Dropdown px={'xl'} w={180}>
             {actions.map((action, index) => {
               if (action.type === 'divider') {
                 return <Menu.Divider key={`mobile-divider-${index}`} mt="sm" mb="sm" />;
@@ -156,16 +157,18 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
                 );
               }
 
+              const color = getIntentColor(action.intent);
+              const realColor = color === undefined ? 'brand' : color;
+
               return (
                 <Menu.Item
                   key={action.key}
                   leftSection={action.icon}
-                  color={getIntentColor(action.intent)}
+                  color={realColor}
                   disabled={action.disabled}
                   onClick={() => action.onClick?.(action.key || '')}
                   mt="sm"
                   mb="sm"
-                  fw={600}
                 >
                   {action.label}
                 </Menu.Item>