@orbe-agro/client-core 5.6.122 → 5.6.124

package/dist/base/services/modules/ativos/tipo/TipoService.js.map

@@ -1 +1 @@
-{"version":3,"file":"TipoService.js","sources":["../../../../../../lib/base/services/modules/ativos/tipo/TipoService.ts"],"sourcesContent":["import ApiService from \"@/services/ApiService\";\nimport { IFilterParams, TQueryResponse } from \"@base/@types/api\";\nimport { TTipo } from \"@base/@types/models/ativos/tipo\";\nimport endpointConfig from \"@base/configs/endpoints.config/endpoints.navigation\";\n\nconst TIPO_ENDPOINT = endpointConfig.ativos.tipo;\n\nexport async function apiGetAtivosTipo(id: number) {\n    return ApiService.fetchDataWithAxios<TTipo>({\n        url: TIPO_ENDPOINT.findOne.endpoint + `${id}`,\n        method: TIPO_ENDPOINT.findOne.method,\n    })\n}\n\nexport async function apiAddAtivosTipo(body: TTipo) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.add.endpoint,\n        method: TIPO_ENDPOINT.add.method,\n        data: body,\n    })\n}\n\nexport async function apiUpdateAtivosTipo(body: TTipo) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.update.endpoint,\n        method: TIPO_ENDPOINT.update.method,\n        data: body,\n    })\n}\n\nexport async function apiDeleteAtivosTipo(id: number) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.delete.endpoint + `${id}`,\n        method: TIPO_ENDPOINT.delete.method,\n    })\n}\n\nexport async function apiFindMonitorAtivosTipo(body?: IFilterParams) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.findMonitor.endpoint,\n        method: TIPO_ENDPOINT.findMonitor.method,\n        data: body,\n    })\n}\n"],"names":["endpointConfig"],"mappings":";;AAKA,MAAM,gBAAgBA,yBAAe,OAAO;AAE5C,eAAsB,iBAAiB,IAAY;AAC/C,SAAO,WAAW,mBAA0B;AAAA,IACxC,KAAK,cAAc,QAAQ,WAAW,GAAG,EAAE;AAAA,IAC3C,QAAQ,cAAc,QAAQ;AAAA,EAAA,CACjC;AACL;AAEA,eAAsB,iBAAiB,MAAa;AAChD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,IAAI;AAAA,IACvB,QAAQ,cAAc,IAAI;AAAA,IAC1B,MAAM;AAAA,EAAA,CACT;AACL;AAEA,eAAsB,oBAAoB,MAAa;AACnD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,OAAO;AAAA,IAC1B,QAAQ,cAAc,OAAO;AAAA,IAC7B,MAAM;AAAA,EAAA,CACT;AACL;AAEA,eAAsB,oBAAoB,IAAY;AAClD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,OAAO,WAAW,GAAG,EAAE;AAAA,IAC1C,QAAQ,cAAc,OAAO;AAAA,EAAA,CAChC;AACL;AAEA,eAAsB,yBAAyB,MAAsB;AACjE,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,YAAY;AAAA,IAC/B,QAAQ,cAAc,YAAY;AAAA,IAClC,MAAM;AAAA,EAAA,CACT;AACL;"}
+{"version":3,"file":"TipoService.js","sources":["../../../../../../lib/base/services/modules/ativos/tipo/TipoService.ts"],"sourcesContent":["import ApiService from \"@/services/ApiService\";\nimport { IFilterParams, TQueryResponse } from \"@base/@types/api\";\nimport { TTipo } from \"@base/@types/models/ativos/tipo\";\nimport endpointConfig from \"@base/configs/endpoints.config/endpoints.navigation\";\n\nconst TIPO_ENDPOINT = endpointConfig.ativos.tipo;\n\nexport async function apiGetAtivosTipo(id: number) {\n    return ApiService.fetchDataWithAxios<TTipo>({\n        url: TIPO_ENDPOINT.findOne.endpoint + `${id}`,\n        method: TIPO_ENDPOINT.findOne.method,\n    })\n}\n\nexport async function apiAddAtivosTipo(body: TTipo) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.add.endpoint,\n        method: TIPO_ENDPOINT.add.method,\n        data: body,\n    })\n}\n\nexport async function apiUpdateAtivosTipo(body: TTipo) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.update.endpoint,\n        method: TIPO_ENDPOINT.update.method,\n        data: body,\n    })\n}\n\nexport async function apiDeleteAtivosTipo(id: number) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.delete.endpoint + `${id}`,\n        method: TIPO_ENDPOINT.delete.method,\n    })\n}\n\nexport async function apiFindMonitorAtivosTipo(body?: IFilterParams) {\n    return ApiService.fetchDataWithAxios<TQueryResponse<TTipo>>({\n        url: TIPO_ENDPOINT.findMonitor.endpoint,\n        method: TIPO_ENDPOINT.findMonitor.method,\n        data: body,\n    })\n}\n\nexport async function apiFindByTipoAndFormulario(body: { tipo: string; formularioCamposId?: number | null }) {\n    return ApiService.fetchDataWithAxios<any[]>({\n        url: TIPO_ENDPOINT.findByTipoAndFormulario.endpoint,\n        method: TIPO_ENDPOINT.findByTipoAndFormulario.method,\n        data: body,\n    })\n}\n"],"names":["endpointConfig"],"mappings":";;AAKA,MAAM,gBAAgBA,yBAAe,OAAO;AAE5C,eAAsB,iBAAiB,IAAY;AAC/C,SAAO,WAAW,mBAA0B;AAAA,IACxC,KAAK,cAAc,QAAQ,WAAW,GAAG,EAAE;AAAA,IAC3C,QAAQ,cAAc,QAAQ;AAAA,EAAA,CACjC;AACL;AAEA,eAAsB,iBAAiB,MAAa;AAChD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,IAAI;AAAA,IACvB,QAAQ,cAAc,IAAI;AAAA,IAC1B,MAAM;AAAA,EAAA,CACT;AACL;AAEA,eAAsB,oBAAoB,MAAa;AACnD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,OAAO;AAAA,IAC1B,QAAQ,cAAc,OAAO;AAAA,IAC7B,MAAM;AAAA,EAAA,CACT;AACL;AAEA,eAAsB,oBAAoB,IAAY;AAClD,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,OAAO,WAAW,GAAG,EAAE;AAAA,IAC1C,QAAQ,cAAc,OAAO;AAAA,EAAA,CAChC;AACL;AAEA,eAAsB,yBAAyB,MAAsB;AACjE,SAAO,WAAW,mBAA0C;AAAA,IACxD,KAAK,cAAc,YAAY;AAAA,IAC/B,QAAQ,cAAc,YAAY;AAAA,IAClC,MAAM;AAAA,EAAA,CACT;AACL;AAEA,eAAsB,2BAA2B,MAA4D;AACzG,SAAO,WAAW,mBAA0B;AAAA,IACxC,KAAK,cAAc,wBAAwB;AAAA,IAC3C,QAAQ,cAAc,wBAAwB;AAAA,IAC9C,MAAM;AAAA,EAAA,CACT;AACL;"}

package/dist/base/services/modules/index.js

@@ -30,7 +30,7 @@ import { apiAddAtivosProcessador, apiDeleteAtivosProcessador, apiFindMonitorAtiv
 import { apiAddAtivosSistemaOperacional, apiDeleteAtivosSistemaOperacional, apiFindMonitorAtivosSistemaOperacional, apiGetAtivosSistemaOperacional, apiUpdateAtivosSistemaOperacional } from "./ativos/sistemaOperacional/SistemaOperacionalService.js";
 import { apiAddAtivosSoftware, apiDeleteAtivosSoftware, apiFindMonitorAtivosSoftware, apiGetAtivosSoftware, apiUpdateAtivosSoftware } from "./ativos/software/SoftwareService.js";
 import { apiAddAtivosSubcategoria, apiDeleteAtivosSubcategoria, apiFindMonitorAtivosSubcategoria, apiGetAtivosSubcategoria, apiUpdateAtivosSubcategoria } from "./ativos/subcategoria/SubcategoriaService.js";
-import { apiAddAtivosTipo, apiDeleteAtivosTipo, apiFindMonitorAtivosTipo, apiGetAtivosTipo, apiUpdateAtivosTipo } from "./ativos/tipo/TipoService.js";
+import { apiAddAtivosTipo, apiDeleteAtivosTipo, apiFindByTipoAndFormulario, apiFindMonitorAtivosTipo, apiGetAtivosTipo, apiUpdateAtivosTipo } from "./ativos/tipo/TipoService.js";
 import { apiAddAtivosVersaoAndroid, apiDeleteAtivosVersaoAndroid, apiFindMonitorAtivosVersaoAndroid, apiGetAtivosVersaoAndroid, apiUpdateAtivosVersaoAndroid } from "./ativos/versaoAndroid/VersaoAndroidService.js";
 import { apiAddAtivosVersaoMSOffice, apiDeleteAtivosVersaoMSOffice, apiFindMonitorAtivosVersaoMSOffice, apiGetAtivosVersaoMSOffice, apiUpdateAtivosVersaoMSOffice } from "./ativos/versaoMSOffice/VersaoMSOfficeService.js";
 import { apiAddAtivosVlan, apiDeleteAtivosVlan, apiFindMonitorAtivosVlan, apiGetAtivosVlan, apiUpdateAtivosVlan } from "./ativos/vlan/VlanService.js";
@@ -383,6 +383,7 @@ export {
   apiFindByIdsProduto,
   apiFindByNomeOrCodigo,
   apiFindByNotaFiscal,
+  apiFindByTipoAndFormulario,
   apiFindCalculoFrete,
   apiFindCartaoPortadorFreteByTipoBusca,
   apiFindCentrosByUserId,

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+import VerticalMenuContent from './VerticalMenuContent'
+import type { NavigationTree } from '@/@types/navigation'
+import {
+    NAV_ITEM_TYPE_COLLAPSE,
+    NAV_ITEM_TYPE_ITEM,
+} from '@/constants/navigation.constant'
+
+const mockNavigationTree: NavigationTree[] = [
+    {
+        key: 'inicio',
+        path: '/inicio',
+        title: 'Início',
+        translateKey: 'nav.inicio',
+        icon: '',
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ['/inicio'],
+        subMenu: [],
+    },
+    {
+        key: 'cadastros',
+        path: '',
+        title: 'Cadastros',
+        translateKey: 'nav.cadastros',
+        icon: '',
+        type: NAV_ITEM_TYPE_COLLAPSE,
+        authority: ['/cadastros'],
+        subMenu: [
+            {
+                key: 'clientes',
+                path: '/cadastros/clientes',
+                title: 'Clientes',
+                translateKey: 'nav.clientes',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/cadastros/clientes'],
+                subMenu: [],
+            },
+            {
+                key: 'fornecedores',
+                path: '/cadastros/fornecedores',
+                title: 'Fornecedores',
+                translateKey: 'nav.fornecedores',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/cadastros/fornecedores'],
+                subMenu: [],
+            },
+        ],
+    },
+    {
+        key: 'relatorios',
+        path: '/relatorios',
+        title: 'Relatórios',
+        translateKey: 'nav.relatorios',
+        icon: 'ChartBarIcon',
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ['/relatorios'],
+        subMenu: [],
+    },
+    {
+        key: 'configuracoes',
+        path: '',
+        title: 'Configurações',
+        translateKey: 'nav.configuracoes',
+        icon: '',
+        type: NAV_ITEM_TYPE_COLLAPSE,
+        authority: ['/configuracoes'],
+        subMenu: [
+            {
+                key: 'perfil',
+                path: '/configuracoes/perfil',
+                title: 'Perfil',
+                translateKey: 'nav.perfil',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/configuracoes/perfil'],
+                subMenu: [],
+            },
+            {
+                key: 'integracoes',
+                path: '',
+                title: 'Integrações',
+                translateKey: 'nav.integracoes',
+                icon: '',
+                type: NAV_ITEM_TYPE_COLLAPSE,
+                authority: ['/configuracoes/integracoes'],
+                subMenu: [
+                    {
+                        key: 'webhooks',
+                        path: '/configuracoes/integracoes/webhooks',
+                        title: 'Webhooks',
+                        translateKey: 'nav.webhooks',
+                        icon: 'WebhookIcon',
+                        type: NAV_ITEM_TYPE_ITEM,
+                        authority: ['/configuracoes/integracoes/webhooks'],
+                        subMenu: [],
+                    },
+                    {
+                        key: 'lorem.ipsum',
+                        path: '/configuracoes/integracoes/lorem-ipsum',
+                        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                        translateKey: 'nav.loremIpsum',
+                        icon: 'LoremIpsumIcon',
+                        type: NAV_ITEM_TYPE_ITEM,
+                        authority: ['/configuracoes/integracoes/lorem-ipsum'],
+                        subMenu: [],
+                    },
+                ],
+            },
+        ],
+    },
+]
+
+const allUserAuthority = [
+    '/inicio',
+    '/cadastros/clientes',
+    '/cadastros/fornecedores',
+    '/relatorios',
+    '/configuracoes/perfil',
+    '/configuracoes/integracoes/webhooks',
+    '/configuracoes/integracoes/lorem-ipsum',
+]
+
+const meta = {
+    title: '@ecme/Template/VerticalMenuContent',
+    component: VerticalMenuContent,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+        ),
+    ],
+    argTypes: {
+        collapsed: {
+            control: 'boolean',
+        },
+        direction: {
+            control: { type: 'select' },
+            options: ['ltr', 'rtl'],
+        },
+        routeKey: {
+            control: 'text',
+        },
+    },
+} satisfies Meta<typeof VerticalMenuContent>
+
+export default meta
+type TStory = StoryObj<typeof meta>
+
+export const Default: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const Collapsed: TStory = {
+    args: {
+        collapsed: true,
+        routeKey: '/cadastros/clientes',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const WithExpandedMenu: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/configuracoes/integracoes/webhooks',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const LimitedAuthority: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: ['/inicio', '/relatorios'],
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const RTLDirection: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'rtl',
+        translationSetup: true,
+    },
+}
+
+export const MinimalNavigation: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: [
+            {
+                key: 'inicio',
+                path: '/inicio',
+                title: 'Início',
+                translateKey: 'nav.inicio',
+                icon: '',
+                type: NAV_ITEM_TYPE_ITEM,
+                authority: ['/inicio'],
+                subMenu: [],
+            },
+        ],
+        userAuthority: ['/inicio'],
+        direction: 'ltr',
+        translationSetup: true,
+    },
+}
+
+export const WithMenuClick: TStory = {
+    args: {
+        collapsed: false,
+        routeKey: '/inicio',
+        navigationTree: mockNavigationTree,
+        userAuthority: allUserAuthority,
+        direction: 'ltr',
+        translationSetup: true,
+        onMenuItemClick: () => alert('Menu item clicked!'),
+    },
+}

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.tsx

@@ -1,192 +1,223 @@
-import { useState, useEffect, useMemo, Fragment } from "react";
-import Menu from "@/components/ui/Menu";
-import VerticalSingleMenuItem from "./VerticalSingleMenuItem";
-import VerticalCollapsedMenuItem from "./VerticalCollapsedMenuItem";
-import { themeConfig } from "@/configs/theme.config";
+import { useState, useEffect, useMemo, Fragment } from 'react'
+import Menu from '@/components/ui/Menu'
+import VerticalSingleMenuItem from './VerticalSingleMenuItem'
+import VerticalCollapsedMenuItem from './VerticalCollapsedMenuItem'
+import { themeConfig } from '@/configs/theme.config'
 import {
-  NAV_ITEM_TYPE_TITLE,
-  NAV_ITEM_TYPE_COLLAPSE,
-  NAV_ITEM_TYPE_ITEM,
-} from "@/constants/navigation.constant";
-import useMenuActive from "@/utils/hooks/useMenuActive";
-import useTranslation from "@/utils/hooks/useTranslation";
-import { Direction } from "@/@types/theme";
-import type { NavigationTree } from "@/@types/navigation";
-import type { TraslationFn } from "@/@types/common";
-import { LinkRenderer } from "@/components/layouts/Layouts";
+    NAV_ITEM_TYPE_TITLE,
+    NAV_ITEM_TYPE_COLLAPSE,
+    NAV_ITEM_TYPE_ITEM,
+} from '@/constants/navigation.constant'
+import useMenuActive from '@/utils/hooks/useMenuActive'
+import useTranslation from '@/utils/hooks/useTranslation'
+import { Direction } from '@/@types/theme'
+import type { NavigationTree } from '@/@types/navigation'
+import type { TraslationFn } from '@/@types/common'
+import { LinkRenderer } from '@/components/layouts/Layouts'
 
 export interface VerticalMenuContentProps {
-  collapsed?: boolean;
-  routeKey: string;
-  navigationTree?: NavigationTree[];
-  onMenuItemClick?: () => void;
-  direction?: Direction;
-  translationSetup?: boolean;
-  userAuthority: string[];
-  linkRenderer?: LinkRenderer;
+    collapsed?: boolean
+    routeKey: string
+    navigationTree?: NavigationTree[]
+    onMenuItemClick?: () => void
+    direction?: Direction
+    translationSetup?: boolean
+    userAuthority: string[]
+    linkRenderer?: LinkRenderer
 }
 
-const { MenuGroup } = Menu;
+const { MenuGroup } = Menu
 
 const findAncestorKeys = (
-  navTree: NavigationTree[],
-  targetKey: string
+    navTree: NavigationTree[],
+    targetKey: string,
 ): string[] | null => {
-  for (const node of navTree) {
-    if (node.key === targetKey) return [];
-    if (node.subMenu && node.subMenu.length > 0) {
-      const found = findAncestorKeys(node.subMenu, targetKey);
-      if (found !== null) return [node.key, ...found];
+    for (const node of navTree) {
+        if (node.key === targetKey) return []
+        if (node.subMenu && node.subMenu.length > 0) {
+            const found = findAncestorKeys(node.subMenu, targetKey)
+            if (found !== null) return [node.key, ...found]
+        }
     }
-  }
-  return null;
-};
+    return null
+}
 
 const filterNavigationByAuthority = (
-  navTree: NavigationTree[],
-  userAuthority: string[]
+    navTree: NavigationTree[],
+    userAuthority: string[],
 ): NavigationTree[] => {
-  return navTree.reduce((acc: NavigationTree[], nav) => {
-    // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
-    if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
-      const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
-        userAuthority.includes(path)
-      );
-      if (shouldExclude) {
-        return acc;
-      }
-    }
+    return navTree.reduce((acc: NavigationTree[], nav) => {
+        // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
+        if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
+            const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
+                userAuthority.includes(path),
+            )
+            if (shouldExclude) {
+                return acc
+            }
+        }
 
-    if (nav.subMenu && nav.subMenu.length > 0) {
-      const filteredSubMenu = filterNavigationByAuthority(
-        nav.subMenu,
-        userAuthority
-      );
-      if (filteredSubMenu.length > 0) {
-        acc.push({ ...nav, subMenu: filteredSubMenu });
-      }
-    } else {
-      if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
-        acc.push(nav);
-      }
-    }
-    return acc;
-  }, []);
-};
+        if (nav.subMenu && nav.subMenu.length > 0) {
+            const filteredSubMenu = filterNavigationByAuthority(
+                nav.subMenu,
+                userAuthority,
+            )
+            if (filteredSubMenu.length > 0) {
+                acc.push({ ...nav, subMenu: filteredSubMenu })
+            }
+        } else {
+            if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
+                acc.push(nav)
+            }
+        }
+        return acc
+    }, [])
+}
+
+const sortNavigationRecursively = (
+    navTree: NavigationTree[],
+): NavigationTree[] => {
+    return [...navTree]
+        .map((nav) => ({
+            ...nav,
+            subMenu: nav.subMenu
+                ? sortNavigationRecursively(nav.subMenu)
+                : nav.subMenu,
+        }))
+        .sort((a, b) => a.title.localeCompare(b.title, 'pt-BR'))
+}
 
 const VerticalMenuContent = (props: VerticalMenuContentProps) => {
-  const {
-    collapsed,
-    routeKey,
-    navigationTree = [],
-    onMenuItemClick,
-    direction = themeConfig.direction,
-    translationSetup,
-    userAuthority,
-    linkRenderer,
-  } = props;
-
-  const { t } = useTranslation(!translationSetup);
-  const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([]);
-  const filteredNavigationTree = useMemo(
-    () => filterNavigationByAuthority(navigationTree, userAuthority),
-    [navigationTree, userAuthority]
-  );
-
-  const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey);
-
-  useEffect(() => {
-    if (activedRoute?.key) {
-      const ancestors = findAncestorKeys(
-        filteredNavigationTree,
-        activedRoute.key
-      );
-      setDefaulExpandKey(ancestors ?? []);
+    const {
+        collapsed,
+        routeKey,
+        navigationTree = [],
+        onMenuItemClick,
+        direction = themeConfig.direction,
+        translationSetup,
+        userAuthority,
+        linkRenderer,
+    } = props
+
+    const { t } = useTranslation(!translationSetup)
+    const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([])
+
+    const filteredNavigationTree = useMemo(() => {
+        const filteredTree = filterNavigationByAuthority(
+            navigationTree,
+            userAuthority,
+        )
+
+        return sortNavigationRecursively(filteredTree)
+    }, [navigationTree, userAuthority])
+
+    console.log('Filtered Navigation Tree:', filteredNavigationTree)
+
+    const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey)
+
+    useEffect(() => {
+        if (activedRoute?.key) {
+            const ancestors = findAncestorKeys(
+                filteredNavigationTree,
+                activedRoute.key,
+            )
+            setDefaulExpandKey(ancestors ?? [])
+        }
+    }, [activedRoute?.key, filteredNavigationTree])
+
+    const handleLinkClick = () => {
+        onMenuItemClick?.()
     }
-  }, [activedRoute?.key, filteredNavigationTree]);
 
-  const handleLinkClick = () => {
-    onMenuItemClick?.();
-  };
+    const renderNavigation = (
+        navTree: NavigationTree[],
+        cascade: number = 0,
+        indent?: boolean,
+    ) => {
+        const nextCascade = cascade + 1
 
-  const renderNavigation = (
-    navTree: NavigationTree[],
-    cascade: number = 0,
-    indent?: boolean
-  ) => {
-    const nextCascade = cascade + 1;
+        return (
+            <>
+                {navTree.map((nav) => (
+                    <Fragment key={nav.key}>
+                        {nav.type === NAV_ITEM_TYPE_ITEM && (
+                            <VerticalSingleMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={indent}
+                                renderAsIcon={cascade <= 0}
+                                showIcon={cascade <= 0}
+                                userAuthority={userAuthority}
+                                showTitle={
+                                    nav.forceShowTitle ??
+                                    (collapsed ? cascade >= 1 : cascade <= 1)
+                                }
+                                t={t as TraslationFn}
+                                onLinkClick={handleLinkClick}
+                                linkRenderer={linkRenderer}
+                            />
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
+                            <VerticalCollapsedMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={nextCascade >= 2}
+                                dotIndent={nextCascade >= 2}
+                                renderAsIcon={nextCascade <= 1}
+                                userAuthority={userAuthority}
+                                t={t as TraslationFn}
+                                onLinkClick={onMenuItemClick}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        nextCascade,
+                                        true,
+                                    )}
+                            </VerticalCollapsedMenuItem>
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_TITLE && (
+                            <MenuGroup
+                                key={nav.key}
+                                label={t(nav.translateKey) || nav.title}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        cascade,
+                                        false,
+                                    )}
+                            </MenuGroup>
+                        )}
+                    </Fragment>
+                ))}
+            </>
+        )
+    }
 
     return (
-      <>
-        {navTree.map((nav) => (
-          <Fragment key={nav.key}>
-            {nav.type === NAV_ITEM_TYPE_ITEM && (
-              <VerticalSingleMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={indent}
-                renderAsIcon={cascade <= 0}
-                showIcon={cascade <= 0}
-                userAuthority={userAuthority}
-                showTitle={
-                  nav.forceShowTitle ??
-                  (collapsed ? cascade >= 1 : cascade <= 1)
-                }
-                t={t as TraslationFn}
-                onLinkClick={handleLinkClick}
-                linkRenderer={linkRenderer}
-              />
-            )}
-            {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
-              <VerticalCollapsedMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={nextCascade >= 2}
-                dotIndent={nextCascade >= 2}
-                renderAsIcon={nextCascade <= 1}
-                userAuthority={userAuthority}
-                t={t as TraslationFn}
-                onLinkClick={onMenuItemClick}
-              >
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, nextCascade, true)}
-              </VerticalCollapsedMenuItem>
-            )}
-            {nav.type === NAV_ITEM_TYPE_TITLE && (
-              <MenuGroup key={nav.key} label={t(nav.translateKey) || nav.title}>
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, cascade, false)}
-              </MenuGroup>
-            )}
-          </Fragment>
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <Menu
-      className="px-4 pb-4"
-      sideCollapsed={collapsed}
-      defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
-      defaultExpandedKeys={defaulExpandKey}
-      defaultCollapseActiveKeys={
-        activedRoute?.parentKey ? [activedRoute.parentKey] : []
-      }
-    >
-      {renderNavigation(filteredNavigationTree, 0)}
-    </Menu>
-  );
-};
-
-export default VerticalMenuContent;
+        <Menu
+            className="px-4 pb-4"
+            sideCollapsed={collapsed}
+            defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
+            defaultExpandedKeys={defaulExpandKey}
+            defaultCollapseActiveKeys={
+                activedRoute?.parentKey ? [activedRoute.parentKey] : []
+            }
+        >
+            {renderNavigation(filteredNavigationTree, 0)}
+        </Menu>
+    )
+}
+
+export default VerticalMenuContent