Merge branch 'feature/sidebar_permission' into 'develop'

Feature/sidebar permission

See merge request witel3/loan-facilities-expert!41

public/locales/fa/app.json

@@ -19,14 +19,18 @@
   },
   "sidebar": {
     "dashboard": "داشبورد",
-    "passenger-office": "اداره مسافر (توزیع درخواست)",
+    "passenger-office": "اداره مسافر",
     "machinary-office": "ماشین آلات",
-    "passenger-boss": "رئیس مسافر (کارگروه استانی)",
+    "passenger-boss": "رئیس مسافر ",
     "transportation-assistance": "معاونت حمل و نقل",
     "province-manager": "مدیر کل استانی",
     "change-password": "تغییر رمز عبور",
     "edit-profile": "ویرایش پروفایل"
   },
+  "secondary": {
+    "passenger-office": "توزیع درخواست",
+    "passenger-boss": "کارگروه استانی"
+  },
   "Authorization": {
     "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
     "typography_your_access_to_this_page_has_expired_Please_login_again": "دسترسی شما منقضی شده است لطفا دوباره ورود نمایید.",

src/core/data/sidebarMenu.jsx

@@ -13,14 +13,16 @@ const sidebarMenu = [
       route: "/dashboard",
       icon: <SpaceDashboardIcon />,
       selected: false,
+      role: "all",
     },
     {
       key: "sidebar.passenger-office",
+      secondary: "secondary.passenger-office",
       type: "page",
       route: "/dashboard/passenger-office",
       icon: <AirlineSeatReclineNormalIcon />,
       selected: false,
-      role: "passenger-office",
+      role: "passenger_office_chief",
     },
     {
       key: "sidebar.machinary-office",
@@ -28,15 +30,16 @@ const sidebarMenu = [
       route: "/dashboard/machinary-office",
       icon: <DirectionsCarFilledIcon />,
       selected: false,
-      role: "machinary-office",
+      role: "machinery_expert",
     },
     {
       key: "sidebar.passenger-boss",
+      secondary: "secondary.passenger-boss",
       type: "page",
       route: "/dashboard/passenger-boss",
       icon: <AssignmentIndIcon />,
       selected: false,
-      role: "passenger-boss",
+      role: "passenger_office_chief",
     },
     {
       key: "sidebar.transportation-assistance",
@@ -44,7 +47,7 @@ const sidebarMenu = [
       route: "/dashboard/transportation-assistance",
       icon: <DirectionsRailwayIcon />,
       selected: false,
-      role: "transportation-assistance",
+      role: "transportation_assistant",
     },
     {
       key: "sidebar.province-manager",
@@ -52,7 +55,7 @@ const sidebarMenu = [
       route: "/dashboard/province-manager",
       icon: <DesktopWindowsIcon />,
       selected: false,
-      role: "province-manager",
+      role: "province_manager",
     },
   ],
 ];

src/layouts/dashboardLayouts/sidebar/SidebarList.jsx

@@ -1,8 +1,9 @@
 import { Divider, List } from "@mui/material";
-import { Fragment, useEffect, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import SidebarListItem from "./SidebarListItem";
 import sidebarMenu from "@/core/data/sidebarMenu";
 import { useRouter } from "next/router";
+import useUser from "@/lib/app/hooks/useUser";
 
 function reducer(state, action) {
   switch (action.type) {
@@ -29,28 +30,28 @@ function reducer(state, action) {
 
 export default function SidebarList({ handleDrawerToggle }) {
   const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
-
-  // activate current page in menu
+  const { user } = useUser();
   const router = useRouter();
+
   useEffect(() => {
     dispatch({ type: "SELECTED", route: router.pathname });
   }, [router.pathname]);
 
+  const filteredItemMenu = itemMenu[0].filter(
+    (item) => user.role.includes(item.role) || item.role === "all"
+  );
+
   return (
     <List>
-      {itemMenu.map((itemArr, index) => (
-        <Fragment key={index}>
-          {itemArr.map((item) => (
-            <SidebarListItem
-              item={item}
-              dispatch={dispatch}
-              key={item.key}
-              handleDrawerToggle={handleDrawerToggle}
-            />
-          ))}
-          <Divider />
-        </Fragment>
+      {filteredItemMenu.map((item, index) => (
+        <SidebarListItem
+          item={item}
+          dispatch={dispatch}
+          key={item.key}
+          handleDrawerToggle={handleDrawerToggle}
+        />
       ))}
+      {filteredItemMenu.length > 0 && <Divider />}
     </List>
   );
 }

src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx

@@ -6,6 +6,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Typography,
 } from "@mui/material";
 import { useTranslations } from "next-intl";
 import { Fragment } from "react";
@@ -45,7 +46,16 @@ const SidebarListItem = ({ item, dispatch, handleDrawerToggle }) => {
           >
             {item.icon}
           </ListItemIcon>
-          <ListItemText primary={t(item.key)} />
+          <ListItemText
+            primary={t(item.key)}
+            secondary={
+              item.secondary !== undefined ? (
+                <Typography variant="caption" color="textSecondary">
+                  {t(item.secondary)}
+                </Typography>
+              ) : null
+            }
+          />
 
           {item.type == "menu" &&
             (item.showSubItem ? <ExpandLess /> : <ExpandMore />)}