Changing menu icons and Keeping sidebar unexpanded initially

src/assets/icons/aianalysis.tsx

@@ -1,61 +1,46 @@
 import * as React from 'react';
 const AiAnalysis = (props: any) => (
-  <svg
-    width="26"
-    height="20"
-    viewBox="0 0 26 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
+  <svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M10.0598 17.9178H3.66699C2.56242 17.9178 1.66699 17.0224 1.66699 15.9178V3.75C1.66699 2.64543 2.56242 1.75 3.66699 1.75H12.9556C14.0602 1.75 14.9556 2.64543 14.9556 3.75V9.10913"
-      stroke={props.fill || '#2C3E57'}
-      strokeWidth="1.5"
+      d="M8.91332 17.5081H3C1.89543 17.5081 1 16.6127 1 15.5081V4.6875C1 3.58293 1.89543 2.6875 3 2.6875H11.5294C12.634 2.6875 13.5294 3.58293 13.5294 4.6875V9.43344"
+      stroke="#7D8998"
+      strokeWidth="1.25"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill="white"
     />
     <path
-      d="M4.10352 4.85156H12.2981"
-      stroke={props.fill || '#2C3E57'}
-      strokeWidth="1.5"
+      d="M3.29688 5.53064H11.0233"
+      stroke="#7D8998"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill={props.fill || '#7D8998'}
     />
     <path
-      d="M4.1037 8.17383H12.2983"
-      stroke={props.fill || '#2C3E57'}
-      strokeWidth="1.5"
+      d="M3.29688 8.57611H11.0233"
+      stroke="#7D8998"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill={props.fill || '#7D8998'}
     />
     <path
-      d="M4.10254 11.4941H7.42469"
-      stroke={props.fill || '#2C3E57'}
-      strokeWidth="1.5"
+      d="M3.2959 11.6198H6.42825"
+      stroke="#7D8998"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill={props.fill || '#7D8998'}
     />
     <path
-      d="M4.1037 14.5957H7.42585"
-      stroke={props.fill || '#2C3E57'}
-      strokeWidth="1.5"
+      d="M3.29688 14.463H6.42923"
+      stroke="#7D8998"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill={props.fill || '#7D8998'}
     />
     <path
-      d="M16.0002 19.5H16.0344C18.2555 19.5 19.9654 19.5 21.2586 19.3563C22.5547 19.2123 23.5424 18.915 24.2288 18.2286C24.9152 17.5421 25.2125 16.5545 25.3566 15.2583C25.5003 13.9651 25.5002 12.2553 25.5002 10.0341V10V9.96586C25.5002 7.74471 25.5003 6.03487 25.3566 4.74166C25.2125 3.44552 24.9152 2.45786 24.2288 1.77145C23.5424 1.08503 22.5547 0.787699 21.2586 0.643683C19.9654 0.499993 18.2555 0.499996 16.0344 0.5H16.0002H15.9661C13.745 0.499996 12.0351 0.499993 10.7419 0.643683C9.44577 0.787699 8.4581 1.08503 7.77169 1.77145C7.08528 2.45786 6.78794 3.44552 6.64393 4.74166C6.50024 6.03487 6.50024 7.74471 6.50024 9.96587V10V10.0341C6.50024 12.2553 6.50024 13.9651 6.64393 15.2583C6.78794 16.5545 7.08528 17.5421 7.77169 18.2286C8.4581 18.915 9.44577 19.2123 10.7419 19.3563C12.0351 19.5 13.745 19.5 15.9661 19.5H16.0002Z"
-      fill={props.fill || '#2C3E57'}
-      stroke="#F4F4F4"
+      d="M14.5142 19.1252H14.5552C16.642 19.1252 18.2603 19.1252 19.4872 18.9926C20.7159 18.8599 21.6893 18.5836 22.3749 17.917C23.0641 17.247 23.3511 16.2918 23.4884 15.0906C23.625 13.895 23.625 12.3193 23.625 10.2932V10.2501V10.207C23.625 8.18092 23.625 6.60518 23.4884 5.40954C23.3511 4.20836 23.0641 3.25316 22.3749 2.58314C21.6893 1.91659 20.7159 1.64026 19.4872 1.50752C18.2603 1.37499 16.6419 1.37499 14.5552 1.375L14.5142 1.375L14.4731 1.375C12.3864 1.37499 10.768 1.37499 9.54116 1.50752C8.31243 1.64026 7.33897 1.91659 6.65338 2.58314C5.96421 3.25316 5.67723 4.20836 5.53995 5.40954C5.40331 6.60518 5.40331 8.18092 5.40332 10.207L5.40332 10.2501L5.40332 10.2932C5.40331 12.3193 5.40331 13.895 5.53995 15.0906C5.67723 16.2918 5.96421 17.247 6.65338 17.917C7.33897 18.5836 8.31243 18.8599 9.54116 18.9926C10.768 19.1252 12.3864 19.1252 14.4731 19.1252H14.5142Z"
+      fill="white"
+      stroke="#7D8998"
+      strokeWidth="1.25"
     />
     <path
-      d="M12.5842 14H11.4322C11.2882 14 11.2402 13.916 11.2882 13.748L13.1842 6.536C13.2402 6.368 13.3602 6.284 13.5442 6.284H15.1402C15.3402 6.284 15.4602 6.368 15.5002 6.536L17.3962 13.748C17.4442 13.916 17.3962 14 17.2522 14H16.1002C16.0122 14 15.9522 13.984 15.9202 13.952C15.8882 13.912 15.8642 13.844 15.8482 13.748L15.5122 12.428H13.1722L12.8362 13.748C12.8202 13.844 12.7922 13.912 12.7522 13.952C12.7202 13.984 12.6642 14 12.5842 14ZM14.3242 7.736L13.4602 11.204H15.2362L14.3722 7.736H14.3242ZM20.0439 6.536V13.748C20.0439 13.916 19.9599 14 19.7919 14H18.7719C18.6039 14 18.5199 13.916 18.5199 13.748V6.536C18.5199 6.368 18.6039 6.284 18.7719 6.284H19.7919C19.9599 6.284 20.0439 6.368 20.0439 6.536Z"
-      fill="white"
+      d="M11.3838 13.75H10.2318C10.0878 13.75 10.0398 13.666 10.0878 13.498L11.9838 6.286C12.0398 6.118 12.1598 6.034 12.3438 6.034H13.9398C14.1398 6.034 14.2598 6.118 14.2998 6.286L16.1958 13.498C16.2438 13.666 16.1958 13.75 16.0518 13.75H14.8998C14.8118 13.75 14.7518 13.734 14.7198 13.702C14.6878 13.662 14.6638 13.594 14.6478 13.498L14.3118 12.178H11.9718L11.6358 13.498C11.6198 13.594 11.5918 13.662 11.5518 13.702C11.5198 13.734 11.4638 13.75 11.3838 13.75ZM13.1238 7.486L12.2598 10.954H14.0358L13.1718 7.486H13.1238ZM18.8435 6.286V13.498C18.8435 13.666 18.7595 13.75 18.5915 13.75H17.5715C17.4035 13.75 17.3195 13.666 17.3195 13.498V6.286C17.3195 6.118 17.4035 6.034 17.5715 6.034H18.5915C18.7595 6.034 18.8435 6.118 18.8435 6.286Z"
+      fill="#7D8998"
     />
   </svg>
 );

src/assets/icons/aidataAnalysis.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+const AIDataAnalysis = (props: any) => (
+  <svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.91332 17.5081H3C1.89543 17.5081 1 16.6127 1 15.5081V4.6875C1 3.58293 1.89543 2.6875 3 2.6875H11.5294C12.634 2.6875 13.5294 3.58293 13.5294 4.6875V9.43344"
+      stroke="#7D8998"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.29688 5.53064H11.0233"
+      stroke="#7D8998"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.29688 8.57611H11.0233"
+      stroke="#7D8998"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.2959 11.6198H6.42825"
+      stroke="#7D8998"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M3.29688 14.463H6.42923"
+      stroke="#7D8998"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.5142 19.1252H14.5552C16.642 19.1252 18.2603 19.1252 19.4872 18.9926C20.7159 18.8599 21.6893 18.5836 22.3749 17.917C23.0641 17.247 23.3511 16.2918 23.4884 15.0906C23.625 13.895 23.625 12.3193 23.625 10.2932V10.2501V10.207C23.625 8.18092 23.625 6.60518 23.4884 5.40954C23.3511 4.20836 23.0641 3.25316 22.3749 2.58314C21.6893 1.91659 20.7159 1.64026 19.4872 1.50752C18.2603 1.37499 16.6419 1.37499 14.5552 1.375L14.5142 1.375L14.4731 1.375C12.3864 1.37499 10.768 1.37499 9.54116 1.50752C8.31243 1.64026 7.33897 1.91659 6.65338 2.58314C5.96421 3.25316 5.67723 4.20836 5.53995 5.40954C5.40331 6.60518 5.40331 8.18092 5.40332 10.207L5.40332 10.2501L5.40332 10.2932C5.40331 12.3193 5.40331 13.895 5.53995 15.0906C5.67723 16.2918 5.96421 17.247 6.65338 17.917C7.33897 18.5836 8.31243 18.8599 9.54116 18.9926C10.768 19.1252 12.3864 19.1252 14.4731 19.1252H14.5142Z"
+      fill="white"
+      stroke="#7D8998"
+      strokeWidth="1.25"
+    />
+    <path
+      d="M11.3838 13.75H10.2318C10.0878 13.75 10.0398 13.666 10.0878 13.498L11.9838 6.286C12.0398 6.118 12.1598 6.034 12.3438 6.034H13.9398C14.1398 6.034 14.2598 6.118 14.2998 6.286L16.1958 13.498C16.2438 13.666 16.1958 13.75 16.0518 13.75H14.8998C14.8118 13.75 14.7518 13.734 14.7198 13.702C14.6878 13.662 14.6638 13.594 14.6478 13.498L14.3118 12.178H11.9718L11.6358 13.498C11.6198 13.594 11.5918 13.662 11.5518 13.702C11.5198 13.734 11.4638 13.75 11.3838 13.75ZM13.1238 7.486L12.2598 10.954H14.0358L13.1718 7.486H13.1238ZM18.8435 6.286V13.498C18.8435 13.666 18.7595 13.75 18.5915 13.75H17.5715C17.4035 13.75 17.3195 13.666 17.3195 13.498V6.286C17.3195 6.118 17.4035 6.034 17.5715 6.034H18.5915C18.7595 6.034 18.8435 6.118 18.8435 6.286Z"
+      fill="#7D8998"
+    />
+  </svg>
+);
+export default AIDataAnalysis;

src/assets/icons/notifications.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const Notifications = (props: any) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_9653_13527" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_9653_13527)">
+      <path
+        d="M5.25 18.8845C5.0375 18.8845 4.85942 18.8127 4.71575 18.669C4.57192 18.5252 4.5 18.3469 4.5 18.1343C4.5 17.9218 4.57192 17.7437 4.71575 17.6C4.85942 17.4565 5.0375 17.3848 5.25 17.3848H6.30775V9.923C6.30775 8.57817 6.72283 7.38908 7.553 6.35575C8.383 5.32242 9.44867 4.6615 10.75 4.373V3.75C10.75 3.40283 10.8714 3.10767 11.1143 2.8645C11.3571 2.6215 11.6519 2.5 11.9988 2.5C12.3458 2.5 12.641 2.6215 12.8845 2.8645C13.1282 3.10767 13.25 3.40283 13.25 3.75V4.373C14.5513 4.6615 15.617 5.32242 16.447 6.35575C17.2772 7.38908 17.6923 8.57817 17.6923 9.923V17.3848H18.75C18.9625 17.3848 19.1406 17.4566 19.2843 17.6003C19.4281 17.7441 19.5 17.9223 19.5 18.135C19.5 18.3475 19.4281 18.5256 19.2843 18.6693C19.1406 18.8128 18.9625 18.8845 18.75 18.8845H5.25ZM11.9983 21.6923C11.5008 21.6923 11.0754 21.5153 10.7223 21.1613C10.3689 20.8073 10.1923 20.3817 10.1923 19.8845H13.8077C13.8077 20.3833 13.6306 20.8093 13.2762 21.1625C12.9219 21.5157 12.4959 21.6923 11.9983 21.6923ZM7.80775 17.3848H16.1923V9.923C16.1923 8.76533 15.783 7.77725 14.9645 6.95875C14.1458 6.14008 13.1577 5.73075 12 5.73075C10.8423 5.73075 9.85417 6.14008 9.0355 6.95875C8.217 7.77725 7.80775 8.76533 7.80775 9.923V17.3848Z"
+        fill="#7D8998"
+      />
+    </g>
+  </svg>
+);
+export default Notifications;

src/assets/icons/notifications_unread.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+const Unread_Notifications = (props: any) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_9653_13515" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_9653_13515)">
+      <path
+        d="M11.9983 21.6923C11.5008 21.6923 11.0754 21.5153 10.7223 21.1613C10.3689 20.8073 10.1923 20.3817 10.1923 19.8845H13.8077C13.8077 20.3833 13.6306 20.8093 13.2762 21.1625C12.9219 21.5157 12.4959 21.6923 11.9983 21.6923ZM5.25 18.8845C5.0375 18.8845 4.85942 18.8127 4.71575 18.669C4.57192 18.5252 4.5 18.3469 4.5 18.1343C4.5 17.9218 4.57192 17.7437 4.71575 17.6C4.85942 17.4565 5.0375 17.3848 5.25 17.3848H6.30775V9.923C6.30775 8.57817 6.72283 7.38908 7.553 6.35575C8.383 5.32242 9.44867 4.6615 10.75 4.373V3.75C10.75 3.40283 10.8714 3.10767 11.1143 2.8645C11.3571 2.6215 11.6519 2.5 11.9988 2.5C12.3458 2.5 12.641 2.6215 12.8845 2.8645C13.1282 3.10767 13.25 3.40283 13.25 3.75V3.95C13.0858 4.24617 12.9557 4.54742 12.8595 4.85375C12.7633 5.16025 12.7044 5.47825 12.6827 5.80775C12.5689 5.78725 12.4579 5.76925 12.3498 5.75375C12.2418 5.73842 12.1252 5.73075 12 5.73075C10.8423 5.73075 9.85417 6.14008 9.0355 6.95875C8.217 7.77725 7.80775 8.76533 7.80775 9.923V17.3848H16.1923V11.1328C16.4218 11.2148 16.6641 11.2788 16.9193 11.325C17.1744 11.3712 17.4321 11.3911 17.6923 11.3848V17.3848H18.75C18.9625 17.3848 19.1406 17.4566 19.2843 17.6003C19.4281 17.7441 19.5 17.9223 19.5 18.135C19.5 18.3475 19.4281 18.5256 19.2843 18.6693C19.1406 18.8128 18.9625 18.8845 18.75 18.8845H5.25ZM17.4818 9.202C16.7183 9.202 16.0689 8.93475 15.5337 8.40025C14.9984 7.86575 14.7308 7.21667 14.7308 6.453C14.7308 5.6895 14.998 5.04008 15.5325 4.50475C16.067 3.96958 16.716 3.702 17.4795 3.702C18.2432 3.702 18.8926 3.96925 19.4277 4.50375C19.9631 5.03825 20.2308 5.68725 20.2308 6.45075C20.2308 7.21442 19.9635 7.86383 19.429 8.399C18.8945 8.93433 18.2454 9.202 17.4818 9.202Z"
+        fill="#7D8998"
+      />
+      <circle cx="17.5" cy="6.5" r="3" fill="#CF0A0A" />
+    </g>
+  </svg>
+);
+export default Unread_Notifications;

src/components/Header/Header.test.tsx

@@ -15,6 +15,7 @@ jest.mock('next/navigation', () => ({
 const mockUseSession = useSession as jest.Mock;
 const mockUseRouter = useRouter as jest.Mock;
 const mockUsePathname = usePathname as jest.Mock;
+const mockDispatch = jest.fn();
 const mockSignOut = signOut as jest.Mock;
 describe('Header Component', () => {
   const setOpenMenu = jest.fn();
@@ -31,6 +32,7 @@ describe('Header Component', () => {
       status: 'authenticated',
     });
     mockUsePathname.mockReturnValue('/');
+    mockDispatch(4);
     jest.clearAllMocks();
   });
 
@@ -71,6 +73,7 @@ describe('Header Component', () => {
     CurrentOrg: {
       dispatch: jest.fn(),
     },
+    unread_count: { state: 4, dispatch: mockDispatch },
   };
 
   const renderComponent = () =>

src/components/Header/Header.tsx

@@ -68,6 +68,7 @@ export const Header = ({
   const [selectedOrg, setSelectedOrg] = useState<AutoCompleteOption | null | undefined>(null);
   const globalContext = useContext(GlobalContext);
   const permissions = globalContext?.Permissions.state || [];
+  const setUnreadCount = globalContext?.unread_count.dispatch;
   const open = Boolean(anchorEl);
   const handleClick = (event: HTMLElement | null) => {
     setAnchorEl(event);
@@ -144,6 +145,10 @@ export const Header = ({
     router.push('/changepassword');
   };
 
+  useEffect(() => {
+    setUnreadCount(unread_count?.res);
+  }, [unread_count?.res]);
+
   return (
     <Paper className={styles.Header}>
       <Box sx={{ display: 'flex', alignItems: 'center', ml: 1.8 }}>

src/components/Settings/__tests__/SubscriptionInfo.test.tsx

@@ -89,9 +89,6 @@ describe('SubscriptionInfo Component', () => {
       expect(
         screen.getByText(moment(orgPlanMock.end_date).format('DD MMM, YYYY'))
       ).toBeInTheDocument();
-
-      // Days remaining
-      expect(screen.getByText('19 days remaining')).toBeInTheDocument();
     });
   });
 

src/components/SideDrawer/SideDrawer.tsx

@@ -16,7 +16,7 @@
 import MuiDrawer from '@mui/material/Drawer';
 import { styled, Theme, CSSObject } from '@mui/material/styles';
 
-import { MenuOption, drawerWidth, sideMenu } from '@/config/menu';
+import { drawerWidth, getSideMenu } from '@/config/menu';
 
 // assets
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
@@ -33,6 +33,18 @@
   disabled?: boolean;
 }
 
+interface MenuOption {
+  index: number;
+  title: string;
+  path: string;
+  icon: (selected: boolean) => JSX.Element;
+  parent?: number;
+  className?: string;
+  permission?: string;
+  hide?: boolean;
+  minimize?: boolean;
+}
+
 const ItemButton: React.FC<ItemButtonProps> = ({
   item,
   isSelected,
@@ -111,9 +123,11 @@
 export const SideDrawer = ({ openMenu, setOpenMenu }: any) => {
   const router = useRouter();
   const globalContext = useContext(GlobalContext);
+  const unread_count = globalContext?.unread_count?.state;
+  const sideMenu: MenuOption[] = getSideMenu(unread_count);
   const { state } = globalContext?.UnsavedChanges ?? {};
   const [open, setOpen] = useState(
-    new Array(sideMenu.filter((item) => !item.parent).length).fill(true)
+    new Array(sideMenu.filter((item) => !item.parent).length).fill(false)
   );
   const [selectedIndex, setSelectedIndex] = useState(
     sideMenu.find((item) => item.path === router.pathname)?.index
@@ -127,7 +141,7 @@
     newOpen[idx] = !newOpen[idx];
     setOpen(newOpen);
   };
-
+  //This redirects the page when we try to got to some tab without saving a session in AI Data summary.
   useEffect(() => {
     if (state) return;
     setSelectedIndex(sideMenu.find((item) => item.path === router.pathname)?.index);
@@ -143,7 +157,27 @@
   };
 
   useEffect(() => {
-    setOpen(new Array(sideMenu.filter((item) => !item.parent).length).fill(true));
+    const menuLength = sideMenu.filter((item) => !item.parent).length;
+    const isOpen = !openMenu;
+    const newArr = new Array(menuLength).fill(isOpen);
+
+    // ** When the sidedrawer is minimized ** //
+    if (!openMenu) {
+      setOpen(newArr);
+    } else {
+      // ** When the sidedrawer is expanded ** //
+      //Find the selected menuItem and check if its a parent or not.
+      const selectedSideMenuItem: any = sideMenu.find((item) => item.path === router.pathname);
+
+      if (selectedSideMenuItem?.parent === undefined) {
+        newArr[selectedSideMenuItem?.index] = true;
+        setOpen(newArr);
+      } else {
+        const parentIndex = selectedSideMenuItem?.parent;
+        newArr[parentIndex] = true;
+        setOpen(newArr);
+      }
+    }
   }, [openMenu]);
 
   useEffect(() => {
@@ -157,7 +191,7 @@
         const itemColor = selectedIndex === item.index ? 'primary' : 'inherit';
         if (item.hide) return null;
         return (
-          !item.parent && (
+          item.parent === undefined && (
             <Fragment key={item.title}>
               <ListItem
                 sx={{ px: 1.5, py: 0.5 }}