From 0df19cb78e13e16a1936fcb562bcddd24703eff5 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 18 Aug 2025 18:21:16 +0530
Subject: [PATCH 1/4] initial setup sidebar menus from backend

---
 src/components/Layout/MenuItemSkeleton.jsx | 36 +++++++++++++++
 src/components/Layout/Sidebar.jsx          | 54 ++++++++++++++--------
 src/hooks/useProfile.js                    | 10 ++++
 src/repositories/AuthRepository.jsx        |  2 +
 4 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Layout/MenuItemSkeleton.jsx

diff --git a/src/components/Layout/MenuItemSkeleton.jsx b/src/components/Layout/MenuItemSkeleton.jsx
new file mode 100644
index 00000000..304c33c3
--- /dev/null
+++ b/src/components/Layout/MenuItemSkeleton.jsx
@@ -0,0 +1,36 @@
+
+const SkeletonLine = ({ height = 50, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+export const MenuItemSkeleton = ({ hasSubmenu = false, submenuCount = 3 }) => {
+    return (
+    <li className="menu-item">
+      <div className="menu-link d-flex align-items-center gap-2 ">
+        {/* icon placeholder */}
+        <SkeletonLine height={25} width="25px" className="rounded" />
+        {/* text placeholder */}
+        <SkeletonLine height={25} width="100%" />
+      </div>
+
+      {/* Submenu skeletons */}
+      {hasSubmenu && (
+        <ul className="menu-sub mt-1 ms-4">
+          {[...Array(submenuCount)].map((_, idx) => (
+            <li key={idx} className="menu-item">
+              <div className="menu-link d-flex align-items-center gap-2">
+                <SkeletonLine height={20} width="20px" className="rounded" />
+                <SkeletonLine height={24} width="100px" />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx
index de754542..2db04c8e 100644
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@@ -2,10 +2,12 @@ import React from "react";
 import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
 import menuData from "../../data/menuData.json";
 import { getCachedProfileData } from "../../slices/apiDataManager";
+import { useSidBarMenu } from "../../hooks/useProfile";
+import { MenuItemSkeleton } from "./MenuItemSkeleton";
 
 const Sidebar = () => {
   const navigate = useNavigate();
-
+  const { data, isError, isLoading, isFetched } = useSidBarMenu();
   return (
     <aside
       id="layout-menu"
@@ -33,33 +35,42 @@ const Sidebar = () => {
       <div className="menu-inner-shadow"></div>
 
       <ul className="menu-inner py-1">
-        {menuData.map((section) => (
-          <React.Fragment key={(Math.random() + 1).toString(36)}>
-            {section.header && (
+        {isLoading && (
+          <>
+            {[...Array(7)].map((_, idx) => (
+              <MenuItemSkeleton
+                key={idx}
+                hasSubmenu={idx % 2 === 1}
+                submenuCount={Math.floor(Math.random() * 3) + 2}
+              />
+            ))}
+          </>
+        )}
+        {data &&
+          data.map((section) => (
+            <React.Fragment key={(Math.random() + 1).toString(36)}>
+              {/* {section.header && (
               <li className="menu-header small text-uppercase">
                 <span className="menu-header-text">{section.header}</span>
               </li>
-            )}
-            {section.items.map(MenuItem)}
-          </React.Fragment>
-        ))}
+            )} */}
+              {section.items.map(MenuItem)}
+            </React.Fragment>
+          ))}
       </ul>
     </aside>
   );
 };
 
 const MenuItem = (item) => {
-  item.id = Math.random();
   const location = useLocation();
   const isActive = location.pathname === item.link;
-  const hasSubmenu = item.submenu && item.submenu.length > 0;
+  const hasSubmenu = Array.isArray(item.submenu) && item.submenu.length > 0;
   const isSubmenuActive =
-    hasSubmenu &&
-    item.submenu.some((subitem) => location.pathname === subitem.link);
+    hasSubmenu && item.submenu.some((sub) => location.pathname === sub.link);
 
   return (
     <li
-      key={(Math.random() + 1).toString(36)}
       className={`menu-item ${isActive || isSubmenuActive ? "active" : ""} ${
         hasSubmenu && isSubmenuActive ? "open" : ""
       }`}
@@ -67,21 +78,24 @@ const MenuItem = (item) => {
       <NavLink
         aria-label={`Navigate to ${item.text} ${!item.available ? "Pro" : ""}`}
         to={item.link}
-        className={`menu-link ${item.submenu ? "menu-toggle" : ""}`}
-        key={(Math.random() + 1).toString(36)}
-        target={item.link.includes("http") ? "_blank" : undefined}
+        className={`menu-link ${hasSubmenu ? "menu-toggle" : ""}`}
+        target={item.link?.includes("http") ? "_blank" : undefined}
       >
         <i className={`menu-icon tf-icons ${item.icon}`}></i>
-        <div>{item.text}</div>{" "}
+        <div>{item.text}</div>
         {item.available === false && (
           <div className="badge bg-label-primary fs-tiny rounded-pill ms-auto">
             Pro
           </div>
         )}
       </NavLink>
-      {item.submenu && (
-        <ul className="menu-sub" key={(Math.random() + 1).toString(36)}>
-          {item.submenu.map(MenuItem)}
+
+      {/* Only render submenu if exists */}
+      {hasSubmenu && (
+        <ul className="menu-sub">
+          {item.submenu.map((sub) => (
+            <MenuItem key={sub.id || sub.link} {...sub} />
+          ))}
         </ul>
       )}
     </li>
diff --git a/src/hooks/useProfile.js b/src/hooks/useProfile.js
index d9efefd1..d1619ed6 100644
--- a/src/hooks/useProfile.js
+++ b/src/hooks/useProfile.js
@@ -99,3 +99,13 @@ export const useProfile = () => {
     refetch,
   };
 };
+
+
+export const useSidBarMenu = ()=>{
+  const userLogged = useSelector((store)=>store.globalVariables.loginUser);
+  return useQuery({
+    queryKey:["AppMenu"],
+    queryFn:async()=> await AuthRepository.appmenu(),
+    enabled: !!userLogged
+  })
+}
\ No newline at end of file
diff --git a/src/repositories/AuthRepository.jsx b/src/repositories/AuthRepository.jsx
index 4df8c89d..55ef3e3e 100644
--- a/src/repositories/AuthRepository.jsx
+++ b/src/repositories/AuthRepository.jsx
@@ -15,6 +15,8 @@ const AuthRepository = {
   logout: (data) => api.post("/api/auth/logout", data),
   profile: () => api.get("/api/user/profile"),
   changepassword: (data) => api.post("/api/auth/change-password", data),
+  appmenu:()=>api.get('/api/AppMenu/sidebar/menu-section')
+
 };
 
 export default AuthRepository;
-- 
2.43.0


From 0a82e0af4282ce762c783eb359bac83a0c6cf741 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 18 Aug 2025 23:27:52 +0530
Subject: [PATCH 2/4] handle run time error

---
 src/components/Employee/EmpAttendance.jsx | 3 ++-
 src/components/Layout/Sidebar.jsx         | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index d3cbe817..b8ff8b83 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -22,6 +22,7 @@ const EmpAttendance = ({ employee }) => {
     data = [],
     isLoading: loading,
     isFetching,
+    isError,
     error,
     refetch,
   } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
@@ -145,7 +146,7 @@ const EmpAttendance = ({ employee }) => {
         </div>
         <div className="table-responsive text-nowrap">
           {!loading && data.length === 0 && <span>No employee logs</span>}
-          {error && <div className="text-center">{error}</div>}
+          {isError && <div className="text-center">{error.message}</div>}
           {loading && !data && <div className="text-center">Loading...</div>}
           {data && data.length > 0 && (
             <table className="table mb-0">
diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx
index 2db04c8e..c6f16e61 100644
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@@ -7,7 +7,8 @@ import { MenuItemSkeleton } from "./MenuItemSkeleton";
 
 const Sidebar = () => {
   const navigate = useNavigate();
-  const { data, isError, isLoading, isFetched } = useSidBarMenu();
+  const { data, isError, isLoading, isFetched,error } = useSidBarMenu();
+  console.log(data)
   return (
     <aside
       id="layout-menu"
@@ -35,6 +36,10 @@ const Sidebar = () => {
       <div className="menu-inner-shadow"></div>
 
       <ul className="menu-inner py-1">
+
+        {isError && (
+          <div className="text-center text-small">{error.message}</div>
+        )}
         {isLoading && (
           <>
             {[...Array(7)].map((_, idx) => (
@@ -47,7 +52,7 @@ const Sidebar = () => {
           </>
         )}
         {data &&
-          data.map((section) => (
+          data?.data.map((section) => (
             <React.Fragment key={(Math.random() + 1).toString(36)}>
               {/* {section.header && (
               <li className="menu-header small text-uppercase">
-- 
2.43.0


From f00e3a1a24ca9f83a0596ef9d09277f005398a8f Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 18 Aug 2025 18:21:16 +0530
Subject: [PATCH 3/4] initial setup sidebar menus from backend

---
 src/components/Layout/MenuItemSkeleton.jsx | 36 +++++++++++++++
 src/components/Layout/Sidebar.jsx          | 54 ++++++++++++++--------
 src/hooks/useProfile.js                    | 10 ++++
 src/repositories/AuthRepository.jsx        |  2 +
 4 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Layout/MenuItemSkeleton.jsx

diff --git a/src/components/Layout/MenuItemSkeleton.jsx b/src/components/Layout/MenuItemSkeleton.jsx
new file mode 100644
index 00000000..304c33c3
--- /dev/null
+++ b/src/components/Layout/MenuItemSkeleton.jsx
@@ -0,0 +1,36 @@
+
+const SkeletonLine = ({ height = 50, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+export const MenuItemSkeleton = ({ hasSubmenu = false, submenuCount = 3 }) => {
+    return (
+    <li className="menu-item">
+      <div className="menu-link d-flex align-items-center gap-2 ">
+        {/* icon placeholder */}
+        <SkeletonLine height={25} width="25px" className="rounded" />
+        {/* text placeholder */}
+        <SkeletonLine height={25} width="100%" />
+      </div>
+
+      {/* Submenu skeletons */}
+      {hasSubmenu && (
+        <ul className="menu-sub mt-1 ms-4">
+          {[...Array(submenuCount)].map((_, idx) => (
+            <li key={idx} className="menu-item">
+              <div className="menu-link d-flex align-items-center gap-2">
+                <SkeletonLine height={20} width="20px" className="rounded" />
+                <SkeletonLine height={24} width="100px" />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx
index de754542..2db04c8e 100644
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@@ -2,10 +2,12 @@ import React from "react";
 import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
 import menuData from "../../data/menuData.json";
 import { getCachedProfileData } from "../../slices/apiDataManager";
+import { useSidBarMenu } from "../../hooks/useProfile";
+import { MenuItemSkeleton } from "./MenuItemSkeleton";
 
 const Sidebar = () => {
   const navigate = useNavigate();
-
+  const { data, isError, isLoading, isFetched } = useSidBarMenu();
   return (
     <aside
       id="layout-menu"
@@ -33,33 +35,42 @@ const Sidebar = () => {
       <div className="menu-inner-shadow"></div>
 
       <ul className="menu-inner py-1">
-        {menuData.map((section) => (
-          <React.Fragment key={(Math.random() + 1).toString(36)}>
-            {section.header && (
+        {isLoading && (
+          <>
+            {[...Array(7)].map((_, idx) => (
+              <MenuItemSkeleton
+                key={idx}
+                hasSubmenu={idx % 2 === 1}
+                submenuCount={Math.floor(Math.random() * 3) + 2}
+              />
+            ))}
+          </>
+        )}
+        {data &&
+          data.map((section) => (
+            <React.Fragment key={(Math.random() + 1).toString(36)}>
+              {/* {section.header && (
               <li className="menu-header small text-uppercase">
                 <span className="menu-header-text">{section.header}</span>
               </li>
-            )}
-            {section.items.map(MenuItem)}
-          </React.Fragment>
-        ))}
+            )} */}
+              {section.items.map(MenuItem)}
+            </React.Fragment>
+          ))}
       </ul>
     </aside>
   );
 };
 
 const MenuItem = (item) => {
-  item.id = Math.random();
   const location = useLocation();
   const isActive = location.pathname === item.link;
-  const hasSubmenu = item.submenu && item.submenu.length > 0;
+  const hasSubmenu = Array.isArray(item.submenu) && item.submenu.length > 0;
   const isSubmenuActive =
-    hasSubmenu &&
-    item.submenu.some((subitem) => location.pathname === subitem.link);
+    hasSubmenu && item.submenu.some((sub) => location.pathname === sub.link);
 
   return (
     <li
-      key={(Math.random() + 1).toString(36)}
       className={`menu-item ${isActive || isSubmenuActive ? "active" : ""} ${
         hasSubmenu && isSubmenuActive ? "open" : ""
       }`}
@@ -67,21 +78,24 @@ const MenuItem = (item) => {
       <NavLink
         aria-label={`Navigate to ${item.text} ${!item.available ? "Pro" : ""}`}
         to={item.link}
-        className={`menu-link ${item.submenu ? "menu-toggle" : ""}`}
-        key={(Math.random() + 1).toString(36)}
-        target={item.link.includes("http") ? "_blank" : undefined}
+        className={`menu-link ${hasSubmenu ? "menu-toggle" : ""}`}
+        target={item.link?.includes("http") ? "_blank" : undefined}
       >
         <i className={`menu-icon tf-icons ${item.icon}`}></i>
-        <div>{item.text}</div>{" "}
+        <div>{item.text}</div>
         {item.available === false && (
           <div className="badge bg-label-primary fs-tiny rounded-pill ms-auto">
             Pro
           </div>
         )}
       </NavLink>
-      {item.submenu && (
-        <ul className="menu-sub" key={(Math.random() + 1).toString(36)}>
-          {item.submenu.map(MenuItem)}
+
+      {/* Only render submenu if exists */}
+      {hasSubmenu && (
+        <ul className="menu-sub">
+          {item.submenu.map((sub) => (
+            <MenuItem key={sub.id || sub.link} {...sub} />
+          ))}
         </ul>
       )}
     </li>
diff --git a/src/hooks/useProfile.js b/src/hooks/useProfile.js
index d9efefd1..d1619ed6 100644
--- a/src/hooks/useProfile.js
+++ b/src/hooks/useProfile.js
@@ -99,3 +99,13 @@ export const useProfile = () => {
     refetch,
   };
 };
+
+
+export const useSidBarMenu = ()=>{
+  const userLogged = useSelector((store)=>store.globalVariables.loginUser);
+  return useQuery({
+    queryKey:["AppMenu"],
+    queryFn:async()=> await AuthRepository.appmenu(),
+    enabled: !!userLogged
+  })
+}
\ No newline at end of file
diff --git a/src/repositories/AuthRepository.jsx b/src/repositories/AuthRepository.jsx
index 4df8c89d..55ef3e3e 100644
--- a/src/repositories/AuthRepository.jsx
+++ b/src/repositories/AuthRepository.jsx
@@ -15,6 +15,8 @@ const AuthRepository = {
   logout: (data) => api.post("/api/auth/logout", data),
   profile: () => api.get("/api/user/profile"),
   changepassword: (data) => api.post("/api/auth/change-password", data),
+  appmenu:()=>api.get('/api/AppMenu/sidebar/menu-section')
+
 };
 
 export default AuthRepository;
-- 
2.43.0


From 50ec338d8a8367f3954d611dd806492d24e8a4c0 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 18 Aug 2025 23:27:52 +0530
Subject: [PATCH 4/4] handle run time error

---
 src/components/Employee/EmpAttendance.jsx | 3 ++-
 src/components/Layout/Sidebar.jsx         | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index d3cbe817..b8ff8b83 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -22,6 +22,7 @@ const EmpAttendance = ({ employee }) => {
     data = [],
     isLoading: loading,
     isFetching,
+    isError,
     error,
     refetch,
   } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
@@ -145,7 +146,7 @@ const EmpAttendance = ({ employee }) => {
         </div>
         <div className="table-responsive text-nowrap">
           {!loading && data.length === 0 && <span>No employee logs</span>}
-          {error && <div className="text-center">{error}</div>}
+          {isError && <div className="text-center">{error.message}</div>}
           {loading && !data && <div className="text-center">Loading...</div>}
           {data && data.length > 0 && (
             <table className="table mb-0">
diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx
index 2db04c8e..c6f16e61 100644
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@@ -7,7 +7,8 @@ import { MenuItemSkeleton } from "./MenuItemSkeleton";
 
 const Sidebar = () => {
   const navigate = useNavigate();
-  const { data, isError, isLoading, isFetched } = useSidBarMenu();
+  const { data, isError, isLoading, isFetched,error } = useSidBarMenu();
+  console.log(data)
   return (
     <aside
       id="layout-menu"
@@ -35,6 +36,10 @@ const Sidebar = () => {
       <div className="menu-inner-shadow"></div>
 
       <ul className="menu-inner py-1">
+
+        {isError && (
+          <div className="text-center text-small">{error.message}</div>
+        )}
         {isLoading && (
           <>
             {[...Array(7)].map((_, idx) => (
@@ -47,7 +52,7 @@ const Sidebar = () => {
           </>
         )}
         {data &&
-          data.map((section) => (
+          data?.data.map((section) => (
             <React.Fragment key={(Math.random() + 1).toString(36)}>
               {/* {section.header && (
               <li className="menu-header small text-uppercase">
-- 
2.43.0