From ecdbb764d50e35e6895ca763c18731aa62fedf0d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 23 Dec 2025 12:09:49 +0700
Subject: [PATCH] feat(FE-331): only show menu if user has the permission

---
 src/components/molecules/SidebarMenu.tsx | 27 ++++++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/SidebarMenu.tsx b/src/components/molecules/SidebarMenu.tsx
index 6a217dcc..4b85c2c8 100644
--- a/src/components/molecules/SidebarMenu.tsx
+++ b/src/components/molecules/SidebarMenu.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import Menu from '@/components/menu/Menu';
 import { Icon } from '@iconify/react';
 import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
 
 export interface SidebarMenuItem {
   type?: 'item' | 'title';
@@ -9,6 +10,7 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
+  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -22,8 +24,17 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
   const isItemActive = isPathActive(activeLink, item.link);
 
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
   const menuItemWithoutSubmenu = (
     <li>
       <Link
@@ -78,13 +89,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => (
-        <SidebarMenuItem
-          key={menuIdx}
-          item={menuItem}
-          activeLink={activeLink}
-        />
-      ))}
+      {menu.map((menuItem, menuIdx) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
     </Menu>
   );
 };