Dashboard Client - Portal

frontend/client-portal/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,9 +15,11 @@ 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 NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
+import useAuth from '@/hooks/useAuth';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -42,10 +44,54 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
 
   const { pathname } = useLocation();
 
+  const {user} = useAuth()
+
   const isDesktop = useResponsive('up', 'lg');
 
   const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =
     useCollapseDrawer();
+    const [navConfig, setNavConfig] = useState([]);
+    useEffect(() => {
+      const fetchNavConfig = async () => {
+        try {
+          const response = await axios.get('/navigations');
+          const data = response.data.items;
+
+          // Pastikan user dan user.permissions terdefinisi dan merupakan array
+          const userPermissions = user.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; // Lewati bagian yang tidak memiliki children dengan izin
+              }
+            }
+            // 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('Gagal mengambil konfigurasi navigasi:', error);
+        }
+      };
+
+      fetchNavConfig();
+    }, [user]);
 
   useEffect(() => {
     if (isOpenSidebar) {