352 lines
11 KiB
JavaScript
352 lines
11 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Menu, Typography, Image } from 'antd';
|
|
import { getSessionData } from '../components/Global/Formatter';
|
|
import {
|
|
HomeOutlined,
|
|
DatabaseOutlined,
|
|
SettingOutlined,
|
|
UserOutlined,
|
|
AntDesignOutlined,
|
|
ShoppingCartOutlined,
|
|
ShoppingOutlined,
|
|
HistoryOutlined,
|
|
DollarOutlined,
|
|
RollbackOutlined,
|
|
ProductOutlined,
|
|
TagOutlined,
|
|
AppstoreOutlined,
|
|
MobileOutlined,
|
|
WarningOutlined,
|
|
LineChartOutlined,
|
|
FileTextOutlined,
|
|
BellOutlined,
|
|
AlertOutlined,
|
|
SafetyOutlined,
|
|
TeamOutlined,
|
|
ClockCircleOutlined,
|
|
CalendarOutlined,
|
|
DesktopOutlined,
|
|
NodeExpandOutlined,
|
|
GroupOutlined,
|
|
SlidersOutlined,
|
|
SnippetsOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const allItems = [
|
|
{
|
|
key: 'home',
|
|
icon: <HomeOutlined style={{ fontSize: '19px' }} />,
|
|
label: (
|
|
<Link to="/dashboard/home" className="fontMenus">
|
|
Home
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: 'dashboard-svg',
|
|
icon: <GroupOutlined style={{ fontSize: '19px' }} />,
|
|
label: 'Dashboard',
|
|
children: [
|
|
{
|
|
key: 'dashboard-svg-overview',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/overview">Overview</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-compressor-a',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-compressor-b',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-compressor-c',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-airdryer-a',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-airdryer-b',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
|
|
},
|
|
{
|
|
key: 'dashboard-svg-airdryer-c',
|
|
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'master',
|
|
icon: <DatabaseOutlined style={{ fontSize: '19px' }} />,
|
|
label: 'Master',
|
|
children: [
|
|
{
|
|
key: 'master-plant-sub-section',
|
|
icon: <ProductOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/plant-sub-section">Plant Sub Section</Link>,
|
|
},
|
|
{
|
|
key: 'master-brand-device',
|
|
icon: <AntDesignOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/brand-device">Brand Device</Link>,
|
|
},
|
|
{
|
|
key: 'master-device',
|
|
icon: <MobileOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/device">Device</Link>,
|
|
},
|
|
{
|
|
key: 'master-unit',
|
|
icon: <AppstoreOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/unit">Unit</Link>,
|
|
},
|
|
{
|
|
key: 'master-tag',
|
|
icon: <TagOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/tag">Tag</Link>,
|
|
},
|
|
{
|
|
key: 'master-status',
|
|
icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/status">Status</Link>,
|
|
},
|
|
{
|
|
key: 'master-shift',
|
|
icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/master/shift">Shift</Link>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'report',
|
|
icon: <SnippetsOutlined style={{ fontSize: '19px' }} />,
|
|
label: 'Report',
|
|
children: [
|
|
{
|
|
key: 'report-trending',
|
|
icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/report/trending">Trending</Link>,
|
|
},
|
|
{
|
|
key: 'report-report',
|
|
icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/report/report">Report</Link>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'history',
|
|
icon: <HistoryOutlined style={{ fontSize: '19px' }} />,
|
|
label: 'History',
|
|
children: [
|
|
{
|
|
key: 'history-alarm',
|
|
icon: <AlertOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/history/alarm">Alarm</Link>,
|
|
},
|
|
{
|
|
key: 'history-event',
|
|
icon: <SlidersOutlined style={{ fontSize: '19px' }} />,
|
|
label: <Link to="/history/event">Event</Link>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'notification',
|
|
icon: <BellOutlined style={{ fontSize: '19px' }} />,
|
|
label: (
|
|
<Link to="/notification" className="fontMenus">
|
|
Notification
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: 'role',
|
|
icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
|
|
label: (
|
|
<Link to="/role" className="fontMenus">
|
|
Role
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: 'user',
|
|
icon: <UserOutlined style={{ fontSize: '19px' }} />,
|
|
label: (
|
|
<Link to="/user" className="fontMenus">
|
|
User
|
|
</Link>
|
|
),
|
|
},
|
|
{
|
|
key: 'jadwal-shift',
|
|
icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
|
|
label: (
|
|
<Link to="/jadwal-shift" className="fontMenus">
|
|
Jadwal Shift
|
|
</Link>
|
|
),
|
|
},
|
|
];
|
|
|
|
const LayoutMenu = () => {
|
|
const location = useLocation();
|
|
const [stateOpenKeys, setStateOpenKeys] = useState(['home']);
|
|
const [selectedKeys, setSelectedKeys] = useState(['home']);
|
|
|
|
// Function to get menu key from current path
|
|
const getMenuKeyFromPath = (pathname) => {
|
|
// Remove leading slash and split path
|
|
const pathParts = pathname.replace(/^\//, '').split('/');
|
|
|
|
// Handle different route patterns
|
|
if (pathname === '/dashboard/home') return 'home';
|
|
if (pathname === '/user') return 'user';
|
|
if (pathname === '/role') return 'role';
|
|
if (pathname === '/notification') return 'notification';
|
|
if (pathname === '/jadwal-shift') return 'jadwal-shift';
|
|
|
|
// Handle master routes
|
|
if (pathname.startsWith('/master/')) {
|
|
const subPath = pathParts[1];
|
|
return `master-${subPath}`;
|
|
}
|
|
|
|
// Handle dashboard svg routes
|
|
if (pathname.startsWith('/dashboard-svg/')) {
|
|
const subPath = pathParts[1];
|
|
return `dashboard-svg-${subPath}`;
|
|
}
|
|
|
|
// Handle report routes
|
|
if (pathname.startsWith('/report/')) {
|
|
const subPath = pathParts[1];
|
|
return `report-${subPath}`;
|
|
}
|
|
|
|
// Handle history routes
|
|
if (pathname.startsWith('/history/')) {
|
|
const subPath = pathParts[1];
|
|
return `history-${subPath}`;
|
|
}
|
|
|
|
return 'home'; // default
|
|
};
|
|
|
|
// Function to get parent key from menu key
|
|
const getParentKey = (key) => {
|
|
if (key.startsWith('master-')) return 'master';
|
|
if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
|
|
if (key.startsWith('report-')) return 'report';
|
|
if (key.startsWith('history-')) return 'history';
|
|
return null;
|
|
};
|
|
|
|
// Update selected and open keys when route changes
|
|
useEffect(() => {
|
|
const currentKey = getMenuKeyFromPath(location.pathname);
|
|
setSelectedKeys([currentKey]);
|
|
|
|
const parentKey = getParentKey(currentKey);
|
|
|
|
// If current menu has parent, open it. Otherwise, close all dropdowns
|
|
if (parentKey) {
|
|
setStateOpenKeys([parentKey]);
|
|
} else {
|
|
setStateOpenKeys([]);
|
|
}
|
|
}, [location.pathname]);
|
|
|
|
const getLevelKeys = (items1) => {
|
|
const key = {};
|
|
const func = (items2, level = 1) => {
|
|
items2.forEach((item) => {
|
|
if (item.key) {
|
|
key[item.key] = level;
|
|
}
|
|
if (item.children) {
|
|
func(item.children, level + 1);
|
|
}
|
|
});
|
|
};
|
|
func(items1);
|
|
return key;
|
|
};
|
|
|
|
const levelKeys = getLevelKeys(allItems);
|
|
|
|
const onOpenChange = (openKeys) => {
|
|
const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
|
|
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);
|
|
}
|
|
};
|
|
|
|
const session = getSessionData();
|
|
const isAdmin = session?.user?.user_id;
|
|
|
|
const karyawan = () => {
|
|
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 (
|
|
<Menu
|
|
mode="inline"
|
|
items={items}
|
|
selectedKeys={selectedKeys}
|
|
openKeys={stateOpenKeys}
|
|
onOpenChange={onOpenChange}
|
|
style={{
|
|
background: 'transparent',
|
|
color: 'white',
|
|
border: 'none',
|
|
}}
|
|
theme="dark"
|
|
className="custom-orange-menu"
|
|
/>
|
|
);
|
|
};
|
|
export default LayoutMenu;
|