add badge for sidebar

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx

@@ -0,0 +1,22 @@
+import { getValueByPath } from "@/core/utils/getValueByPath";
+import { useSidebarBadge } from "@/lib/hooks/useSidebarBadge"
+import { Chip } from "@mui/material"
+import { useEffect, useState } from "react";
+
+const SidebarBadge = ({ badge, chipProps = {} }) => {
+    const { data } = useSidebarBadge()
+    const [value, setValue] = useState()
+
+    useEffect(() => {
+        setValue(getValueByPath(data, badge))
+    }, [data, badge])
+
+
+    if (!data) return null
+    if (!value) return null
+
+    return (
+        <Chip label={(value).toLocaleString("fa-IR")} size="small" {...chipProps} />
+    )
+}
+export default SidebarBadge

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx

@@ -1,6 +1,7 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
 import Link from "next/link";
+import SidebarBadge from "./SidebarBadge";
 import SidebarSubitems from "./SidebarSubitems";
 
 const SidebarListItems = ({ menuItem, dispatch }) => {
@@ -29,6 +30,11 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
                         {menuItem.icon}
                     </ListItemIcon>
                     <ListItemText primary={menuItem.label} />
+                    {menuItem.badges && (
+                        <Stack direction={'row'} sx={{ px: .5 }} spacing={.5}>
+                            {menuItem.badges.map((badge, i) => <SidebarBadge chipProps={{ color: 'primary' }} key={i} badge={badge} />)}
+                        </Stack>
+                    )}
                     {menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
                 </ListItemButton>
             </ListItem>

src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx

@@ -1,6 +1,7 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
 import Link from "next/link";
+import SidebarBadge from "./SidebarBadge";
 
 const SidebarSubitems = ({ subitem, dispatch }) => {
     return (
@@ -27,7 +28,12 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
                         {subitem.icon}
                     </ListItemIcon>
                     <ListItemText primary={subitem.label} />
-                    {subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
+                    {subitem.badges && (
+                        <Stack direction={'row'} sx={{ px: .5 }} spacing={.5}>
+                            {subitem.badges.map((badge, i) => <SidebarBadge key={i} badge={badge} />)}
+                        </Stack>
+                    )}
+                    {subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : <Box sx={{ width: 29 }} />}
                 </ListItemButton>
             </ListItem>
             <Collapse in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>

src/core/utils/getValueByPath.js

@@ -0,0 +1,14 @@
+export const getValueByPath = (obj, path) => {
+    const keys = path.split(".");
+
+    let value = obj;
+
+    for (const key of keys) {
+        if (value === undefined) {
+            return undefined;
+        }
+        value = value[key];
+    }
+
+    return value;
+}

src/core/utils/pageMenu.js

@@ -91,6 +91,7 @@ export const pageMenu = [
         type: "menu",
         icon: <FactCheckIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
+        badges: ['road_items.total'],
         Subitems: [
             {
                 id: "roadItemManagmentSupervisor",
@@ -98,6 +99,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_items.supervise_cnt'],
                 Subitems: [
                     {
                         id: "roadItemManagmentSupervisorCartable",
@@ -117,6 +119,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_items.operation_cnt'],
                 Subitems: [
                     {
                         id: "roadItemManagmentOparationCreate",
@@ -166,6 +169,7 @@ export const pageMenu = [
         type: "menu",
         icon: <FireTruckIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
+        badges: ['road_patrols.total'],
         Subitems: [
             {
                 id: "roadPatrolManagmentSupervisor",
@@ -173,6 +177,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_patrols.supervise_cnt'],
                 Subitems: [
                     {
                         id: "roadPatrolManagmentSupervisorCartable",
@@ -192,6 +197,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_patrols.operation_cnt'],
                 Subitems: [
                     {
                         id: "roadPatrolManagmentOparationCreate",
@@ -271,6 +277,7 @@ export const pageMenu = [
         type: "menu",
         icon: <RouteIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
+        badges: ['safety_and_privacy.step_one', 'safety_and_privacy.step_two'],
         Subitems: [
             {
                 id: "safetyAndPrivacyManagmentOparation",
@@ -333,6 +340,7 @@ export const pageMenu = [
         type: "menu",
         icon: <ElectricBoltIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
+        badges: ['road_observations.total'],
         Subitems: [
             {
                 id: "roadObservationsManagmentSupervisor",
@@ -340,6 +348,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_observations.supervise_cnt'],
                 Subitems: [
                     {
                         id: "roadObservationsManagmentSupervisorCartable",
@@ -364,6 +373,7 @@ export const pageMenu = [
                 type: "menu",
                 icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
                 hasSubitems: true,
+                badges: ['road_observations.operation_cnt'],
                 Subitems: [
                     {
                         id: "roadObservationsManagmentOparationCartable",

src/core/utils/routes.js

@@ -4,5 +4,6 @@ export const GET_USER_ROUTE = api + "/webapi/user/get-permission";
 export const GET_LOGIN_ROUTE = api + "/login_dev";
 export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi";
 export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
+export const GET_SIDEBAR_BADGE_ROUTE = api + "/v2/activity_statistics";
 
 export const SET_INQUIRE_PRIVACY_FENCING = api + "/api/v3/harim/divarkeshi/store";

src/lib/hooks/useSidebarBadge.js

@@ -0,0 +1,18 @@
+import { GET_SIDEBAR_BADGE_ROUTE } from "@/core/utils/routes";
+import useSWR from "swr";
+import useRequest from "./useRequest";
+
+export const useSidebarBadge = () => {
+    const request = useRequest();
+
+    const fetcher = async (url) => {
+        try {
+            const response = await request(url);
+            return response.data;
+        } catch (error) {
+            throw new Error();
+        }
+    };
+
+    return useSWR(GET_SIDEBAR_BADGE_ROUTE, fetcher, { keepPreviousData: true });
+};