User access dan user role dinamis

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -1,5 +1,8 @@
+import React, { useEffect, useState } from 'react';
+
 // components
 import SvgIconStyle from '../../../components/SvgIconStyle';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -19,8 +22,6 @@ export const accessGroup = {
   admin: ["/report/logs"]
 }
 
-
-
 const navConfig = [
   // GENERAL
   // ----------------------------------------------------------------------
@@ -117,8 +118,8 @@ const navConfig = [
       {
         title: 'USER MANAGEMENT',
         children: [
-          { title: 'User Access', path: '/master/diagnosis' },
-          { title: 'User Role', path: '/master/diagnosis' },
+          { title: 'User Role', path: '/user-role' },
+          { title: 'User Access', path: '/user-access' },
         ],
       },
       {

frontend/dashboard/src/layouts/dashboard/navbar/NavbarVertical.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 // @mui
 import { styled, useTheme } from '@mui/material/styles';
@@ -15,11 +15,12 @@ import Logo from '../../../components/Logo';
 import Scrollbar from '../../../components/Scrollbar';
 import { NavSectionVertical } from '../../../components/nav-section';
 //
-import navConfig from './NavConfig';
+// import navConfig from './NavConfig';
 import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
 import useAuth from '@/hooks/useAuth';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -48,7 +49,49 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
   const isDesktop = useResponsive('up', 'lg');
 
   const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =
-    useCollapseDrawer();
+  useCollapseDrawer();
+
+  const [navConfig, setNavConfig] = useState([]);
+  useEffect(() => {
+    const fetchNavConfig = async () => {
+      try {
+        const response = await axios.get('/navigations');
+        const data = response.data.items;
+        // Ambil data izin pengguna dari user state atau API
+        const userPermissions = user.permissions.map(permission => permission.name);
+        
+        // Fungsi untuk memeriksa apakah pengguna memiliki izin untuk item tertentu
+        const hasPermission = (permission) => {
+          return userPermissions.includes(permission);
+        };
+      // Filter data berdasarkan izin pengguna
+      const filteredNavConfig = data.map(section => {
+        if (section.children && section.children.length > 0) {
+          // Cek apakah ada satu atau lebih children yang memiliki izin
+          const filteredChildren = section.children.filter(child => hasPermission(child.permission));
+          
+          if (filteredChildren.length > 0) {
+            return {
+              ...section,
+              children: filteredChildren
+            };
+          } else {
+            return null; // Skip sections where no children have permissions
+          }
+        }
+        // Jika tidak ada children, cek izin untuk section itu sendiri
+        return hasPermission(section.permission) ? section : null;
+      }).filter(section => section !== null);
+
+      setNavConfig([{ items: filteredNavConfig }]);
+      } catch (error) {
+        console.error('Failed to fetch nav config:', error);
+      }
+    };
+  
+    fetchNavConfig();
+  }, [user]);
+  
 
   useEffect(() => {
     if (isOpenSidebar) {
@@ -57,15 +100,15 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
-  const filteredItems = navConfig.filter(section => {
-      return section.items.some(item => {
-          return item.title === 'E-PRESCRIPTION';
-      });
-  });
+  // const filteredItems = navConfig.filter(section => {
+  //     return section.items.some(item => {
+  //         return item.title === 'E-PRESCRIPTION';
+  //     });
+  // });
 
-  const filteredData = filteredItems.map(section => ({
-      items: section.items.filter(item => item.title === "E-PRESCRIPTION")
-  }));
+  // const filteredData = filteredItems.map(section => ({
+  //     items: section.items.filter(item => item.title === "E-PRESCRIPTION")
+  // }));
 
   const renderContent = (
     <Scrollbar
@@ -101,7 +144,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
         <NavbarAccount isCollapse={isCollapse} />
       </Stack>
 
-      <NavSectionVertical navConfig={user.role_id == 5 ? filteredData : navConfig} isCollapse={isCollapse} />
+      <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
 
       <Box sx={{ flexGrow: 1 }} />