GRAB X APOTEK X Hospital PORTAL

frontend/hospital-portal/src/layouts/dashboard/header/AccountPopover.tsx

@@ -10,6 +10,8 @@ import useAuth from '@/hooks/useAuth';
 
 import { getUser } from '@/utils/token';
 
+       // Join the words with a space
+
 // ----------------------------------------------------------------------
 
 const MENU_OPTIONS = [
@@ -34,6 +36,12 @@ export default function AccountPopover() {
   const navigate = useNavigate();
   const { logout } = useAuth();
 
+  const {user} = useAuth();
+  const formattedRoleName = user?.role.name
+  .split('-')        // Split the string by '-'
+  .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
+  .join(' ');
+
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget);
   };
@@ -70,7 +78,7 @@ export default function AccountPopover() {
       >
         <Avatar
           src=""
-          alt="Hospital Portal"
+          alt="Portal"
         />
       </IconButtonAnimate>
 
@@ -90,7 +98,7 @@ export default function AccountPopover() {
       >
         <Box sx={{ my: 1.5, px: 2.5 }}>
           <Typography variant="subtitle2" noWrap>
-            Hospital Admin
+            {formattedRoleName}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
             {storedUser?.email}
@@ -99,7 +107,7 @@ export default function AccountPopover() {
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <Stack sx={{ p: 1 }}>
+        {/* <Stack sx={{ p: 1 }}>
           {MENU_OPTIONS.map((option) => (
             <MenuItem
               key={option.label}
@@ -111,7 +119,7 @@ export default function AccountPopover() {
               {option.label}
             </MenuItem>
           ))}
-        </Stack>
+        </Stack> */}
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 

frontend/hospital-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,10 +15,26 @@ 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 useAuth from '@/hooks/useAuth';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
+import axios from '@/utils/axios';
+import SvgIconStyle from '@/components/SvgIconStyle';
+
+
+const getIcon = (name: string) => (
+    <SvgIconStyle src={`/image/${name}.svg`} sx={{ width: 1, height: 1 }} />
+  );
+
+  const ICONS = {
+    user: getIcon('ic_user'),
+    ecommerce: getIcon('ic_ecommerce'),
+    analytics: getIcon('ic_analytics'),
+    dashboard: getIcon('ic_dashboard'),
+    ic_booking: getIcon('ic_booking'),
+  };
 
 // ----------------------------------------------------------------------
 
@@ -43,11 +59,76 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
 
   const { pathname } = useLocation();
 
+  const {user} = useAuth();
+  const formattedRoleName = user?.full_name
+  .split('-')        // Split the string by '-'
+  .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
+  .join(' ');        // Join the words with a space
+
   const isDesktop = useResponsive('up', 'lg');
 
   const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =
     useCollapseDrawer();
 
+    const [navConfig, setNavConfig] = useState([]);
+    // console.log(navConfig);
+    useEffect(() => {
+      const fetchNavConfig = async () => {
+        try {
+          const response = await axios.get('/navigations');
+          const data = response.data.items;
+        //   console.log(data);
+
+          // Pastikan user dan user.permissions terdefinisi dan merupakan array
+          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; // Lewati bagian yang tidak memiliki children dengan izin
+              }
+            }
+            // Jika tidak ada children, cek izin untuk section itu sendiri
+            // console.log(section.permission);
+            return hasPermission(section.permission) ? section : null;
+          }).filter(section => section !== null);
+
+        // console.log(filteredNavConfig);
+
+        const formattedNavConfig = filteredNavConfig.map(item => ({
+
+            items: [{
+                title: item.title,
+                path: item.path,
+                icon: ICONS[item.icon]
+            }]
+        }));
+
+        setNavConfig(formattedNavConfig);
+
+        } catch (error) {
+          console.error('Gagal mengambil konfigurasi navigasi:', error);
+        }
+      };
+
+      fetchNavConfig();
+    }, [user]);
+    console.log(navConfig);
+
   useEffect(() => {
     if (isOpenSidebar) {
       onCloseSidebar();
@@ -76,10 +157,10 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Stack direction="row" alignItems="center">
               <Logo />
-              <Typography ml={3}>Hospital Portal</Typography>
+              <Typography ml={3}>{formattedRoleName}</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
-          </Stack>) 
+          </Stack>)
         : (
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Logo />