Side Menu layer 2 updated

apicalls/cookies/token.tsx

@@ -43,6 +43,15 @@ async function retrieveAvailableEvents() {
   return decrpytAccessObject ? JSON.parse(decrpytAccessObject) : null;
 }
 
+async function retrieveavailablePages() {
+  const cookieStore = await cookies();
+  const encrpytAccessObject = cookieStore.get("availablePages")?.value || "";
+  const decrpytAccessObject = await nextCrypto.decrypt(encrpytAccessObject);
+  return decrpytAccessObject
+    ? JSON.parse(decrpytAccessObject)?.availablePages || []
+    : null;
+}
+
 async function retrieveAvatarInfo() {
   const response = await fetchDataWithToken(
     `${baseUrl}/authentication/avatar`,
@@ -119,4 +128,5 @@ export {
   retrieveAccessObjects,
   retrieveAvailableEvents,
   retrieveUserSelection,
+  retrieveavailablePages,
 };

apicalls/events/available.tsx

@@ -7,23 +7,70 @@ import { PagesInfosAndEndpoints } from "@/apimaps/mappingApi";
 
 const availableEventsURL = `${baseUrl}/access/endpoints/available`;
 
-async function checkPageAvaliablityByEndpoint(availableEvents: any) {
+function iterateOverPageLayers(
-  let availablePages: string[] = [];
+  availableEventsList: any,
-  const availableEventsList: string[] = availableEvents || [];
+  availablePages: any,
-  PagesInfosAndEndpoints.map((page) => {
+  iterLevel: any
-    const pageInfo = page?.pageInfo?.tr || [];
+) {
+  console.log("iterLevel", iterLevel);
+  if (Array.isArray(iterLevel)) {
+    iterLevel.map((page: any) => {
+      const pageInfo = page?.pageInfo?.tr || [];
+      if (pageInfo.length > 0) {
+        pageInfo.map((pageInfoItem: any) => {
+          const endpoint = pageInfoItem?.endpoint || "";
+          if (
+            availableEventsList.includes(endpoint) &&
+            !availablePages.includes(page.name)
+          ) {
+            if (page.name) {
+              availablePages.push(page.name);
+            }
+            return;
+          }
+        });
+      }
+    });
+  } else {
+    const pageInfo = iterLevel?.pageInfo?.tr || [];
     if (pageInfo.length > 0) {
-      pageInfo.map((pageInfoItem) => {
+      pageInfo.map((pageInfoItem: any) => {
         const endpoint = pageInfoItem?.endpoint || "";
         if (
           availableEventsList.includes(endpoint) &&
-          !availablePages.includes(page.name)
+          !availablePages.includes(iterLevel.name)
         ) {
-          availablePages.push(page.name);
+          availablePages.push(iterLevel.name);
           return;
         }
       });
     }
+  }
+}
+
+async function checkPageAvaliablityByEndpoint(availableEvents: any) {
+  let availablePages: string[] = [];
+  const availableEventsList: string[] = availableEvents || [];
+  let pageLayers = null;
+  PagesInfosAndEndpoints.map((page) => {
+    if (page.subCategories) {
+      pageLayers = page?.subCategories;
+      if (pageLayers) {
+        iterateOverPageLayers(availableEventsList, availablePages, pageLayers);
+
+        const nestedLayers = pageLayers.find(
+          (layer) => layer.subCategories
+        )?.subCategories;
+        if (nestedLayers) {
+          iterateOverPageLayers(
+            availableEventsList,
+            availablePages,
+            nestedLayers
+          );
+        }
+      }
+    }
+    iterateOverPageLayers(availableEventsList, availablePages, page);
   });
   return availablePages;
 }
@@ -44,15 +91,22 @@ async function setAvailableEvents() {
     const availableEventDataRes = await checkPageAvaliablityByEndpoint(
       availableEventData
     );
-    console.log("availableEventDataRes", availableEventDataRes);
     const availableEvents = await nextCrypto.encrypt(
       JSON.stringify({ availableEvents: availableEventData })
     );
+    const availablePages = await nextCrypto.encrypt(
+      JSON.stringify({ availablePages: availableEventDataRes })
+    );
     cookieStore.set({
       name: "availableEvents",
       value: availableEvents,
       ...cookieObject,
     });
+    cookieStore.set({
+      name: "availablePages",
+      value: availablePages,
+      ...cookieObject,
+    });
   }
 }
 

src/components/defaultLayout/MainBodyWithHeader.tsx

@@ -7,6 +7,7 @@ import MainPage from "@/components/commons/MainPage";
 
 import { checkServerPageAvaliable } from "@/hooks/serverCheckPageAvailable";
 import { MainPageProps } from "@/schemas/mainPage";
+import { retrieveavailablePages } from "@/apicalls/cookies/token";
 
 interface MainBodyWithHeaderProps {
   children: any;
@@ -18,6 +19,7 @@ const MainBodyWithHeader: React.FC<MainBodyWithHeaderProps> = async ({
   section,
 }) => {
   const user = await checkServerPageAvaliable();
+  const restrictions = await retrieveavailablePages();
   return (
     <div className="flex w-full h-full">
       <Suspense fallback={<div>Loading Profile...</div>}>
@@ -26,7 +28,7 @@ const MainBodyWithHeader: React.FC<MainBodyWithHeaderProps> = async ({
             <SideMenuProfile profileInfo={user} />
           </div>
           <div className="basis-3/4 p-4 border-2 border-black">
-            <SideMenu section={section} lang={user?.lang ?? "tr"} />
+            <SideMenu section={section} lang={user?.lang ?? "tr"} restrictions={restrictions} />
           </div>
         </div>
       </Suspense>

src/components/defaultLayout/SideMenu.tsx

@@ -6,14 +6,19 @@ import { getIconByName } from "@/Icons/icons";
 import { MainPageProps } from "@/schemas/mainPage";
 import { getThreeLayerByPageName } from "@/lib/getPageFromMappings";
 import { LanguagesSelectable } from "@/apimaps/mappingApi";
-import { checkEndpointAvailability } from "@/apimaps/mappingApiFunctions";
+import { FirstLayerMenu, SecondLayerMenu } from "./SideMenuButtons";
 
 interface SideMenuProps {
   lang: string;
   section: MainPageProps;
+  restrictions: Array<string>;
 }
 
-const SideMenu: React.FC<SideMenuProps> = async ({ section, lang }) => {
+const SideMenu: React.FC<SideMenuProps> = async ({
+  section,
+  lang,
+  restrictions,
+}) => {
   const { layer, currentPage, firstLayer, secondLayer, thirdLayer } = section;
   const pages = getThreeLayerByPageName({
     lang,
@@ -25,54 +30,23 @@ const SideMenu: React.FC<SideMenuProps> = async ({ section, lang }) => {
   const firstLayerPage = pages?.firstLayer;
   const secondLayerPage = pages?.secondLayer;
   const thirdLayerPage = pages?.thirdLayer;
+  const fourthLayerPage = pages?.fourthLayer;
   const language = lang as LanguagesSelectable;
 
   if (layer === 1) {
     return (
       <nav className="flex flex-col text-sm">
         {PagesInfosAndEndpoints.map((page) => {
-          const isActive = page.name === currentPage;
+          return (
-          const Icon = getIconByName(page.icon);
+            <FirstLayerMenu
-          if (isActive) {
+              key={page.name}
-            return (
+              page={page}
-              <div>
+              currentPage={currentPage}
-                <Link
+              mappedLayers={pages}
-                  href={page.url}
+              restrictionsList={restrictions}
-                  className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
+              lang={lang as LanguagesSelectable}
-                >
+            />
-                  <Icon />
+          );
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-                <div className="mb-6 mt-3 px-4">
-                  {secondLayerPage.map((subPage: any) => {
-                    const SubIcon = getIconByName(subPage.icon);
-                    return (
-                      <Link
-                        key={subPage.name}
-                        href={subPage.url}
-                        className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
-                      >
-                        <SubIcon />
-                        {subPage.title?.[lang as LanguagesSelectable]}
-                      </Link>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-              </div>
-            );
-          }
         })}
       </nav>
     );
@@ -80,62 +54,16 @@ const SideMenu: React.FC<SideMenuProps> = async ({ section, lang }) => {
     return (
       <nav className="flex flex-col text-sm">
         {PagesInfosAndEndpoints.map((page) => {
-          const isActive = firstLayerPage.name === page.name;
+          return (
-          const Icon = getIconByName(page.icon);
+            <SecondLayerMenu
-          if (isActive) {
+              key={page.name}
-            return (
+              page={page}
-              <div>
+              currentPage={currentPage}
-                <Link
+              mappedLayers={pages}
-                  href={page.url}
+              restrictionsList={restrictions}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
+              lang={lang as LanguagesSelectable}
-                >
+            />
-                  <Icon />
+          );
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-                <div className="mb-6 mt-3 px-4">
-                  {secondLayerPage.map((subPage: any) => {
-                    const SubIcon = getIconByName(subPage.icon);
-                    const isActive = subPage.name === currentPage;
-                    if (isActive) {
-                      return (
-                        <Link
-                          key={subPage.name}
-                          href={subPage.url}
-                          className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
-                        >
-                          <SubIcon />
-                          {subPage.title?.[lang as LanguagesSelectable]}
-                        </Link>
-                      );
-                    } else {
-                      return (
-                        <Link
-                          key={subPage.name}
-                          href={subPage.url}
-                          className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
-                        >
-                          <SubIcon />
-                          {subPage.title?.[lang as LanguagesSelectable]}
-                        </Link>
-                      );
-                    }
-                  })}
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <Link
-                  href={page.url}
-                  className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
-                >
-                  <Icon />
-                  {page.title?.[lang as LanguagesSelectable]}
-                </Link>
-              </div>
-            );
-          }
         })}
       </nav>
     );

src/components/defaultLayout/SideMenuButtons.tsx

@@ -0,0 +1,212 @@
+"use server";
+import Link from "next/link";
+import React from "react";
+import { getIconByName } from "@/Icons/icons";
+
+interface ButtonInterface {
+  url: string;
+  title: string;
+  Icon: React.FC;
+}
+
+interface MappedLayersInterface {
+  firstLayer: any;
+  secondLayer: any;
+  thirdLayer: any;
+  fourthLayer: any;
+}
+
+interface ActiveButtonInterface {
+  key: string;
+  url: string;
+  title: string;
+  Icon: React.FC;
+}
+
+interface RenderMenuInterface {
+  key: string;
+  page: any;
+  currentPage: string;
+  mappedLayers: any | MappedLayersInterface;
+  lang: string;
+  restrictionsList?: any;
+}
+
+const DisableButton: React.FC<ButtonInterface> = ({ url, title, Icon }) => {
+  return (
+    <Link
+      href={url}
+      className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const ActiveButton: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`w-full p-4 my-3  rounded-2xl m-1 flex items-center gap-2 bg-slate-300 hover:bg-slate-500`}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const ActiveButtonLight: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`w-full p-4 rounded-xl m-1 flex items-center gap-2 bg-gray-100 hover:bg-gray-300`}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const LayerButton: React.FC<ActiveButtonInterface> = ({
+  key,
+  url,
+  title,
+  Icon,
+}) => {
+  return (
+    <Link
+      key={key}
+      href={url}
+      className={`px-10 border-gray-100 rounded-xl border-2  m-1 select-none pointer-events-none drag w-full p-4 flex items-center gap-2 "bg-gray-700 `}
+    >
+      <Icon />
+      {title}
+    </Link>
+  );
+};
+
+const FirstLayerMenu: React.FC<RenderMenuInterface> = ({
+  key,
+  page,
+  currentPage,
+  mappedLayers,
+  restrictionsList,
+  lang,
+}) => {
+  if (restrictionsList.includes(String(page.name))) {
+    if (page.name === currentPage) {
+      return (
+        <div key={key}>
+          <DisableButton
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+          <div className="mb-6 mt-3 px-4">
+            {mappedLayers.secondLayer.map((subPage: any) => {
+              if (restrictionsList.includes(String(subPage.name))) {
+                return (
+                  <ActiveButton
+                    key={subPage.name}
+                    url={subPage.url}
+                    title={subPage.title?.[lang]}
+                    Icon={getIconByName(subPage.icon)}
+                  />
+                );
+              }
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (restrictionsList.includes(String(page.name))) {
+      return (
+        <>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+        </>
+      );
+    }
+  }
+};
+
+const SecondLayerMenu: React.FC<RenderMenuInterface> = ({
+  key,
+  page,
+  currentPage,
+  mappedLayers,
+  restrictionsList,
+  lang,
+}) => {
+  if (restrictionsList.includes(String(mappedLayers.firstLayer.name))) {
+    if (mappedLayers.firstLayer.name === page.name) {
+      return (
+        <div key={key}>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+          <div className="mb-6 mt-3 px-4">
+            {mappedLayers.secondLayer.map((subPage: any) => {
+              console.log("subPage", subPage);
+              if (restrictionsList.includes(String(subPage.name))) {
+                if (subPage.name === currentPage) {
+                  return (
+                    <LayerButton
+                      key={subPage.name}
+                      url={subPage.url}
+                      title={subPage.title?.[lang]}
+                      Icon={getIconByName(subPage.icon)}
+                    />
+                  );
+                } else {
+                  return (
+                    <ActiveButton
+                      key={subPage.name}
+                      url={subPage.url}
+                      title={subPage.title?.[lang]}
+                      Icon={getIconByName(subPage.icon)}
+                    />
+                  );
+                }
+              }
+            })}
+          </div>
+        </div>
+      );
+    }
+    if (restrictionsList.includes(String(page.name))) {
+      return (
+        <div>
+          <ActiveButton
+            key={page.name}
+            url={page.url}
+            title={page.title?.[lang]}
+            Icon={getIconByName(page.icon)}
+          />
+        </div>
+      );
+    }
+  }
+};
+
+export { FirstLayerMenu, SecondLayerMenu };

src/lib/getPageFromMappings.ts

@@ -51,8 +51,9 @@ export function getThreeLayerByPageName({
     const thirdLayerPage = retrievePageByComponentName(thirdLayer || "", lang);
     return {
       firstLayer: firstLayerpage,
-      secondLayer: secondLayerPage,
+      secondLayer: firstLayerpage?.subCategories || null,
-      thirdLayer: thirdLayerPage,
+      thirdLayer: secondLayerPage?.subCategories || null,
+      fourthLayer: thirdLayerPage?.subCategories || null,
       layer: 3,
     };
   }

src/pages/LoginSelectEmployee/selectFrom.tsx

@@ -12,7 +12,6 @@ const SelectEmployeeFrom: React.FC<InterfaceSelectEmployeeFrom> = ({
   companyList,
 }) => {
   const router = useRouter();
-  console.log("companyList", companyList);
   function onClick(data: any) {
     loginSelectEmployee({ company_uu_id: data?.uu_id })
       .then((responseData: any) => {