Repair sub menu air dryer and compressor

src/layout/LayoutMenu.jsx

@@ -51,39 +51,58 @@ const allItems = [
         label: 'Dashboard',
         children: [
             {
-                key: 'dashboard-svg-overview',
+                key: 'dashboard-svg-compressor',
                 icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/overview">Overview</Link>,
+                label: 'Compressor',
+                children: [
+                    {
+                        key: 'dashboard-svg-compressor-overview',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/overview-compressor">Overview</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-a',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-b',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
+                    },
+                    {
+                        key: 'dashboard-svg-compressor-compressor-c',
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
+                    },
+                ]
             },
             {
-                key: 'dashboard-svg-compressor-a',
+                key: 'dashboard-svg-airdryer',
                 icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
+                label: 'Air Dryer',
-            },
+                children: [
-            {
+                    {
-                key: 'dashboard-svg-compressor-b',
+                        key: 'dashboard-svg-airdryer-overview',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
+                        label: <Link to="/dashboard-svg/overview-airdryer">Overview</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-compressor-c',
+                        key: 'dashboard-svg-airdryer-airdryer-a',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-airdryer-a',
+                        key: 'dashboard-svg-airdryer-airdryer-b',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
-            },
+                    },
-            {
+                    {
-                key: 'dashboard-svg-airdryer-b',
+                        key: 'dashboard-svg-airdryer-airdryer-c',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
+                        icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
+                        label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
-            },
+                    },
-            {
+                ]
-                key: 'dashboard-svg-airdryer-c',
-                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
-                label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
             },
         ],
     },
@@ -221,37 +240,77 @@ const LayoutMenu = () => {
         // Handle master routes
         if (pathname.startsWith('/master/')) {
             const subPath = pathParts[1];
-            return `master-${subPath}`;
+            // Convert kebab-case to the actual menu keys
+            const masterKeyMap = {
+                'plant-sub-section': 'master-plant-sub-section',
+                'brand-device': 'master-brand-device',
+                'device': 'master-device',
+                'unit': 'master-unit',
+                'tag': 'master-tag',
+                'status': 'master-status',
+                'shift': 'master-shift'
+            };
+            return masterKeyMap[subPath] || `master-${subPath}`;
         }
 
         // Handle dashboard svg routes
         if (pathname.startsWith('/dashboard-svg/')) {
             const subPath = pathParts[1];
+            // Map specific routes to their menu keys
+            if (subPath === 'overview-compressor') return 'dashboard-svg-compressor-overview';
+            if (subPath === 'compressor-a') return 'dashboard-svg-compressor-compressor-a';
+            if (subPath === 'compressor-b') return 'dashboard-svg-compressor-compressor-b';
+            if (subPath === 'compressor-c') return 'dashboard-svg-compressor-compressor-c';
+            if (subPath === 'overview-airdryer') return 'dashboard-svg-airdryer-overview';
+            if (subPath === 'airdryer-a') return 'dashboard-svg-airdryer-airdryer-a';
+            if (subPath === 'airdryer-b') return 'dashboard-svg-airdryer-airdryer-b';
+            if (subPath === 'airdryer-c') return 'dashboard-svg-airdryer-airdryer-c';
+            
             return `dashboard-svg-${subPath}`;
         }
 
         // Handle report routes
         if (pathname.startsWith('/report/')) {
             const subPath = pathParts[1];
-            return `report-${subPath}`;
+            const reportKeyMap = {
+                'trending': 'report-trending',
+                'report': 'report-report'
+            };
+            return reportKeyMap[subPath] || `report-${subPath}`;
         }
 
         // Handle history routes
         if (pathname.startsWith('/history/')) {
             const subPath = pathParts[1];
-            return `history-${subPath}`;
+            const historyKeyMap = {
+                'alarm': 'history-alarm',
+                'event': 'history-event'
+            };
+            return historyKeyMap[subPath] || `history-${subPath}`;
         }
 
         return 'home'; // default
     };
 
-    // Function to get parent key from menu key
+    // Function to get parent keys from menu key
-    const getParentKey = (key) => {
+    const getParentKeys = (key) => {
-        if (key.startsWith('master-')) return 'master';
+        const parentKeys = [];
-        if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
+        
-        if (key.startsWith('report-')) return 'report';
+        if (key.startsWith('dashboard-svg-compressor-')) {
-        if (key.startsWith('history-')) return 'history';
+            parentKeys.push('dashboard-svg', 'dashboard-svg-compressor');
-        return null;
+        } else if (key.startsWith('dashboard-svg-airdryer-')) {
+            parentKeys.push('dashboard-svg', 'dashboard-svg-airdryer');
+        } else if (key.startsWith('dashboard-svg-')) {
+            parentKeys.push('dashboard-svg');
+        } else if (key.startsWith('master-')) {
+            parentKeys.push('master');
+        } else if (key.startsWith('report-')) {
+            parentKeys.push('report');
+        } else if (key.startsWith('history-')) {
+            parentKeys.push('history');
+        }
+        
+        return parentKeys;
     };
 
     // Update selected and open keys when route changes
@@ -259,11 +318,11 @@ const LayoutMenu = () => {
         const currentKey = getMenuKeyFromPath(location.pathname);
         setSelectedKeys([currentKey]);
 
-        const parentKey = getParentKey(currentKey);
+        const parentKeys = getParentKeys(currentKey);
         
-        // If current menu has parent, open it. Otherwise, close all dropdowns
+        // Always keep the parent menus open when a child is selected
-        if (parentKey) {
+        if (parentKeys.length > 0) {
-            setStateOpenKeys([parentKey]);
+            setStateOpenKeys(parentKeys);
         } else {
             setStateOpenKeys([]);
         }
@@ -289,17 +348,30 @@ const LayoutMenu = () => {
 
     const onOpenChange = (openKeys) => {
         const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
+        
+        // If clicking on a menu that was previously closed
         if (currentOpenKey !== undefined) {
             const repeatIndex = openKeys
                 .filter((key) => key !== currentOpenKey)
                 .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
+            
             setStateOpenKeys(
                 openKeys
                     .filter((_, index) => index !== repeatIndex)
                     .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
             );
         } else {
-            setStateOpenKeys(openKeys);
+            // If clicking on a menu that was previously open, close only that menu
+            // but keep other parent menus open if they have active children
+            const currentKey = getMenuKeyFromPath(location.pathname);
+            const necessaryParentKeys = getParentKeys(currentKey);
+            
+            // Filter out only the menus that are necessary to keep open
+            const filteredOpenKeys = openKeys.filter(key => 
+                necessaryParentKeys.includes(key)
+            );
+            
+            setStateOpenKeys(filteredOpenKeys);
         }
     };
 
@@ -310,25 +382,17 @@ const LayoutMenu = () => {
         return allItems
             .filter(
                 (item) => item.key !== 'setting'
-                // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
-                // && item.key !== 'master'
-                // && item.key !== 'master'
             )
             .map((item) => {
                 if (item.key === 'master') {
                     return {
                         ...item,
-                        // buka command dibawah jika terdapat sub menu yang di sembunyikan
-                        // children: item.children.filter(
-                        //     child => child.key !== 'master-product'
-                        // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
-                        //     && child.key !== 'master-service'
-                        // )
                     };
                 }
                 return item;
             });
     };
+    
     const items = isAdmin === 1 ? allItems : karyawan();
 
     return (