Config refactor

.cursor/mcp.json

@@ -1,7 +1,3 @@
 {
-  "mcpServers": {
-    "nx-mcp": {
-      "url": "http://localhost:9216/sse"
-    }
-  }
+  "mcpServers": {}
 }

frontend/core-ui/src/modules/app/hooks/usePluginsRouter.tsx

@@ -8,23 +8,14 @@ export const getPluginsRoutes = () => {
   const [pluginsMetaData] = useAtom(pluginsConfigState);
   const plugins = Object.values(pluginsMetaData || {});
 
-  const allModules = plugins.flatMap((plugin) =>
-    plugin.modules
-      .filter((module) => !module.settingsOnly)
-      .map((module) => ({
-        ...module,
-        pluginName: plugin.name,
-      })),
-  );
-
-  return allModules.map((module) => (
+  return plugins.map((module) => (
     <Route
       key={module.name}
       path={`/${module.path}/*`}
       element={
         <RenderPluginsComponent
           moduleName={module.name}
-          pluginName={`${module.pluginName}_ui`}
+          pluginName={`${module.name}_ui`}
           remoteModuleName={module.name}
         />
       }
@@ -36,24 +27,17 @@ export const getPluginsSettingsRoutes = () => {
   const [pluginsMetaData] = useAtom(pluginsConfigState);
   const plugins = Object.values(pluginsMetaData || {});
 
-  const settingsModules = plugins.flatMap((plugin) =>
-    plugin.modules
-      .filter((module) => module.hasSettings || module.settingsOnly)
-      .map((module) => ({
-        ...module,
-        pluginName: plugin.name,
-      })),
-  );
+  console.log(plugins);
 
-  return settingsModules.map((module) => (
+  return plugins.map((plugin) => (
     <Route
-      key={module.name}
-      path={`/${module.path}/*`}
+      key={plugin.name}
+      path={`/${plugin.path}/*`}
       element={
         <RenderPluginsComponent
-          moduleName={module.name}
-          pluginName={`${module.pluginName}_ui`}
-          remoteModuleName={`${module.name}Settings`}
+          moduleName={plugin.name}
+          pluginName={`${plugin.name}_ui`}
+          remoteModuleName={`${plugin.name}Settings`}
         />
       }
     />

frontend/core-ui/src/modules/navigation/components/NavigationPlugins.tsx

@@ -1,6 +1,6 @@
 import { IconChevronLeft } from '@tabler/icons-react';
 import { activePluginState, NavigationMenuGroup, Sidebar } from 'erxes-ui';
-import { usePluginsNavigationGroups } from '../hooks/usePluginsModules';
+import { usePluginsNavigationGroups } from '../hooks/usePlugins';
 import { useAtom } from 'jotai';
 
 export const NavigationPluginExitButton = () => {
@@ -36,6 +36,7 @@ export const NavigationPlugins = () => {
   }
 
   if (activePlugin && navigationGroups[activePlugin]) {
+    const subGroups = navigationGroups[activePlugin].subGroups;
     return (
       <>
         <NavigationMenuGroup
@@ -50,7 +51,7 @@ export const NavigationPlugins = () => {
             <Content key={index} />
           ))}
         </NavigationMenuGroup>
-        {navigationGroups[activePlugin].subGroups.map((SubGroup, index) => (
+        {subGroups.map((SubGroup, index) => (
           <SubGroup key={index} />
         ))}
       </>

frontend/core-ui/src/modules/navigation/hooks/useFavorites.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from '@apollo/client';
 import { GET_FAVORITES } from '@/navigation/graphql/queries/getFavorites';
-import { usePluginsModules } from '@/navigation/hooks/usePluginsModules';
 import { useAtomValue } from 'jotai';
 import { currentUserState } from 'ui-modules';
 
@@ -21,7 +20,6 @@ interface GetFavoritesResponse {
 }
 
 export function useFavorites(): FavoriteModule[] {
-  const modules = usePluginsModules();
   const currentUser = useAtomValue(currentUserState);
 
   const { data } = useQuery<GetFavoritesResponse>(GET_FAVORITES, {
@@ -30,39 +28,5 @@ export function useFavorites(): FavoriteModule[] {
 
   const favorites = data?.getFavoritesByCurrentUser ?? [];
 
-  return favorites.reduce<FavoriteModule[]>((acc, favorite) => {
-    if (favorite.type === 'module') {
-      const module = modules.find(
-        (m) => m.path === favorite.path.replace('/', ''),
-      );
-
-      if (module) {
-        acc.push({
-          name: module.name,
-          icon: module.icon,
-          path: module.path,
-        });
-      } else {
-        const moduleWithSubmenu = modules.find(
-          (m) => m.path === favorite.path.split('/')[1],
-        );
-
-        if (moduleWithSubmenu?.submenus) {
-          const matchingSubmenu = moduleWithSubmenu.submenus.find(
-            (sub) => sub.path === favorite.path.replace('/', ''),
-          );
-
-          if (matchingSubmenu) {
-            acc.push({
-              name: matchingSubmenu.name,
-              icon: matchingSubmenu.icon || moduleWithSubmenu.icon,
-              path: matchingSubmenu.path,
-            });
-          }
-        }
-      }
-    }
-
-    return acc;
-  }, []);
+  return [];
 }

frontend/core-ui/src/modules/navigation/hooks/usePluginsModules.tsx → frontend/core-ui/src/modules/navigation/hooks/usePlugins.tsx

@@ -61,7 +61,7 @@ export const usePluginsNavigationGroups = (): NavigationGroups => {
           ? [...existingGroup.contents, newContent]
           : existingGroup.contents;
 
-        const newSubGroup = plugin.navigationGroup?.subGroups;
+        const newSubGroup = plugin.navigationGroup?.subGroup;
         const updatedSubGroups = newSubGroup
           ? [...existingGroup.subGroups, newSubGroup]
           : existingGroup.subGroups;

frontend/core-ui/src/modules/settings/components/SettingsSidebar.tsx

@@ -80,22 +80,9 @@ export function SettingsSidebar() {
           ))}
         </SettingsNavigationGroup>
 
-        {Array.from(pluginsWithSettingsModules.entries()).map(
-          ([pluginName, modules]) => (
-            <SettingsNavigationGroup
-              key={pluginName}
-              name={pluginName.charAt(0).toUpperCase() + pluginName.slice(1)}
-            >
-              {modules.map((item) => (
-                <NavigationMenuLinkItem
-                  key={item.name}
-                  pathPrefix={AppPath.Settings}
-                  path={item.path}
-                  name={item.name}
-                />
-              ))}
-            </SettingsNavigationGroup>
-          ),
+        {pluginSettingsNavigations.map(
+          (SettingsNavigation, index) =>
+            SettingsNavigation && <SettingsNavigation key={index} />,
         )}
       </Sidebar.Content>
     </>
@@ -109,7 +96,6 @@ export const SettingsNavigationGroup = ({
   name: string;
   children: React.ReactNode;
 }) => {
-
   if (React.Children.count(children) === 0) return null;
 
   return (

frontend/core-ui/src/modules/widgets/components/FloatingWidgets.tsx

@@ -7,7 +7,7 @@ export const FloatingWidgets = () => {
   return modules.map((module) => (
     <RenderPluginsComponent
       key={module.name}
-      pluginName={`${module.pluginName}_ui`}
+      pluginName={`${module.name}_ui`}
       remoteModuleName="floatingWidget"
       moduleName={module.name}
       props={{ module }}

frontend/core-ui/src/modules/widgets/hooks/useFloatingWidgetsModules.tsx

@@ -10,12 +10,5 @@ export const useFloatingWidgetsModules = () => {
 
   const plugins = Object.values(pluginsMetaData);
 
-  return plugins.flatMap((plugin) =>
-    plugin.modules
-      .filter((module) => module.hasFloatingWidget)
-      .map((module) => ({
-        ...module,
-        pluginName: plugin.name,
-      })),
-  );
+  return plugins.filter((plugin) => plugin.hasFloatingWidget);
 };

frontend/core-ui/src/plugins/components/RenderPluginsComponent.tsx

@@ -22,6 +22,8 @@ export function RenderPluginsComponent({
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState<{ message: string } | null>(null);
 
+  console.log(pluginName, remoteModuleName, moduleName);
+
   useEffect(() => {
     const loadPlugin = async () => {
       try {

frontend/core-ui/src/plugins/constants/core-plugins.constants.ts

@@ -10,7 +10,6 @@ import {
   IconSpiral,
   IconUser,
 } from '@tabler/icons-react';
-import { IUIConfig } from 'erxes-ui';
 
 export const GET_CORE_MODULES = (version?: boolean): IUIConfig['modules'] => {
   const MODULES: IUIConfig['modules'] = [

frontend/core-ui/tsconfig.json

@@ -10,10 +10,10 @@
       "erxes-ui/*": ["frontend/libs/erxes-ui/src/*"],
       "ui-modules": ["frontend/libs/ui-modules/src"],
       "ui-modules/*": ["frontend/libs/ui-modules/src/*"],
-      "@/*": ["frontend/core-ui/src/modules/*"],
       "@": ["frontend/core-ui/src/modules"],
-      "~/*": ["frontend/core-ui/src/*"],
-      "~": ["frontend/core-ui/src"]
+      "@/*": ["frontend/core-ui/src/modules/*"],
+      "~": ["frontend/core-ui/src"],
+      "~/*": ["frontend/core-ui/src/*"]
     }
   },
   "files": [],

frontend/libs/erxes-ui/src/modules/navigation-menu/components/NavigationMenu.tsx

@@ -27,7 +27,10 @@ export const NavigationMenuLinkItem = forwardRef<
   ) => {
     const { pathname } = useLocation();
     const fullPath = pathPrefix ? `${pathPrefix}/${path}` : path;
-    const isActive = pathname.startsWith(`/${fullPath}`);
+
+    const isActive = pathname.startsWith(
+      fullPath?.startsWith('/') ? fullPath : `/${fullPath}`,
+    );
     return (
       <Sidebar.MenuItem>
         <Sidebar.MenuButton
@@ -57,6 +60,21 @@ export const NavigationMenuLinkItem = forwardRef<
 
 NavigationMenuLinkItem.displayName = 'NavigationMenuLinkItem';
 
+export const SettingsNavigationMenuLinkItem = forwardRef<
+  React.ElementRef<typeof Sidebar.MenuButton>,
+  React.ComponentProps<typeof NavigationMenuLinkItem>
+>(({ pathPrefix, ...props }, ref) => {
+  const settingsPathPrefix =
+    '/settings' + (pathPrefix?.startsWith('/') ? pathPrefix : `/${pathPrefix}`);
+  return (
+    <NavigationMenuLinkItem
+      {...props}
+      pathPrefix={settingsPathPrefix}
+      ref={ref}
+    />
+  );
+});
+
 export const NavigationMenuItem = forwardRef<
   React.ElementRef<typeof Sidebar.MenuButton>,
   React.ComponentProps<typeof Sidebar.MenuButton> & {

frontend/libs/erxes-ui/src/types/UIConfig.ts

@@ -1,27 +1,14 @@
 export type IUIConfig = {
   name: string;
-  icon?: React.ElementType;
+  path: string;
+  hasFloatingWidget?: boolean;
+  settingsNavigation?: () => React.ReactNode;
   navigationGroup?: {
     name: string;
     icon: React.ElementType;
     content: () => React.ReactNode;
-    subGroups?: () => React.ReactNode;
+    subGroup?: () => React.ReactNode;
   };
-  modules: {
-    name: string;
-    icon?: React.ElementType;
-    path: string;
-    hasSettings?: boolean;
-    hasRelationWidget?: boolean;
-    hasFloatingWidget?: boolean;
-    settingsOnly?: boolean;
-    submenus?: {
-      name: string;
-      path: string;
-      icon: React.ElementType
-    }[]
-  }[];
-
   relationWidgets?: {
     name: string;
     icon?: React.ElementType;

frontend/plugins/frontline_ui/module-federation.config.ts

@@ -16,9 +16,8 @@ const config: ModuleFederationConfig = {
   name: 'frontline_ui',
   exposes: {
     './config': './src/config.tsx',
-    './frontline': './src/modules/Main.tsx',
-    './inboxSettings': './src/modules/inbox/Settings.tsx',
-    './ticketSettings': './src/modules/ticket/Settings.tsx',
+    './frontline': './src/modules/FrontlineMain.tsx',
+    './frontlineSettings': './src/modules/FrontlineSettings.tsx',
     './automationsWidget':
       './src/widgets/automations/components/AutomationRemoteEntry.tsx',
     './notificationWidget':

frontend/plugins/frontline_ui/src/config.tsx

@@ -1,4 +1,4 @@
-import { IconMail, IconStackFront, IconTicket } from '@tabler/icons-react';
+import { IconStackFront } from '@tabler/icons-react';
 import { IUIConfig } from 'erxes-ui';
 import { lazy, Suspense } from 'react';
 
@@ -14,8 +14,21 @@ const FrontlineSubGroups = lazy(() =>
   })),
 );
 
+const FrontlineSettingsNavigation = lazy(() =>
+  import('./modules/FrontlineSettingsNavigation').then((module) => ({
+    default: module.FrontlineSettingsNavigation,
+  })),
+);
+
 export const CONFIG: IUIConfig = {
   name: 'frontline',
+  path: 'frontline',
+  hasFloatingWidget: true,
+  settingsNavigation: () => (
+    <Suspense fallback={<div />}>
+      <FrontlineSettingsNavigation />
+    </Suspense>
+  ),
   navigationGroup: {
     name: 'frontline',
     icon: IconStackFront,
@@ -24,35 +37,10 @@ export const CONFIG: IUIConfig = {
         <FrontlineNavigation />
       </Suspense>
     ),
-    subGroups: () => (
+    subGroup: () => (
       <Suspense fallback={<div />}>
         <FrontlineSubGroups />
       </Suspense>
     ),
   },
-  modules: [
-    {
-      name: 'inbox',
-      icon: IconMail,
-      path: 'inbox',
-      hasSettings: true,
-      hasRelationWidget: true,
-      hasFloatingWidget: true,
-      settingsOnly: true,
-    },
-    {
-      name: 'ticket',
-      icon: IconTicket,
-      path: 'ticket',
-      hasSettings: true,
-      hasRelationWidget: true,
-      settingsOnly: true,
-    },
-    {
-      name: 'frontline',
-      icon: IconMail,
-      path: 'frontline',
-      hasSettings: false,
-    },
-  ],
 };