Added submenu for admin

payment-iq/app/dashboard/admin/backofficeusers/page.tsx

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+"use client";
+
+import { Approve } from "@/app/features/Pages/Approve/Approve";
+
+export default function BackOfficeUsersPage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <Approve />
+    </div>
+  );
+}

payment-iq/app/dashboard/admin/page.tsx

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+"use client";
+
+import { Approve } from "@/app/features/Pages/Approve/Approve";
+
+export default function BackOfficeUsersPage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      hello
+    </div>
+  );
+}

payment-iq/app/features/dashboard/sidebar/Sidebar.tsx

@@ -1,11 +1,19 @@
 "use client";
 
 import DashboardIcon from "@mui/icons-material/Dashboard";
+import { useState } from "react";
 import { PAGE_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
 import PageLinks from "../../../components/PageLinks/PageLinks";
 import "./sideBar.scss";
+import clsx from "clsx";
 
 const SideBar = () => {
+  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
+
+  const toggleMenu = (title: string) => {
+    setOpenMenus((prev) => ({ ...prev, [title]: !prev[title] }));
+  };
+
   return (
     <aside className="sidebar">
       <div className="sidebar__header">
@@ -14,14 +22,42 @@ const SideBar = () => {
           <DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
         </span>
       </div>
-      {PAGE_LINKS.map((link) => (
+
-        <PageLinks
+      {PAGE_LINKS.map((link) =>
-          key={link.path}
+        link.children ? (
-          title={link.title}
+          <div key={link.title}>
-          path={link.path}
+            <button
-          icon={link.icon}
+              onClick={() => toggleMenu(link.title)}
-        />
+              className="sidebar__dropdown-button"
-      ))}
+            >
+              {link.icon && <link.icon />}
+              <span className="sidebar__text">{link.title}</span>
+              <span className="sidebar__arrow">
+                {openMenus[link.title] ? "▲" : "▼"}
+              </span>
+            </button>
+            {openMenus[link.title] && (
+              <div className="sidebar__submenu">
+                {link.children.map((child) => (
+                  <PageLinks
+                    key={child.path}
+                    title={child.title}
+                    path={child.path}
+                    icon={child.icon}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <PageLinks
+            key={link.path}
+            title={link.title}
+            path={link.path}
+            icon={link.icon}
+          />
+        )
+      )}
     </aside>
   );
 };

payment-iq/app/features/dashboard/sidebar/SidebarLink.constants.ts

@@ -8,6 +8,8 @@ import GavelIcon from "@mui/icons-material/Gavel";
 import HubIcon from "@mui/icons-material/Hub";
 import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
 import InsightsIcon from "@mui/icons-material/Insights";
+import ListAltIcon from "@mui/icons-material/ListAlt";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
 
 export const PAGE_LINKS: ISidebarLink[] = [
@@ -28,7 +30,28 @@ export const PAGE_LINKS: ISidebarLink[] = [
   // { title: 'Analytics', path: '/analytics', icon: BarChartIcon },
   { title: "Rules", path: "/dashboard/rules", icon: GavelIcon },
   { title: "Rules Hub", path: "/dashboard/rules-hub", icon: HubIcon },
-  { title: "Admin", path: "/dashboard/admin", icon: AdminPanelSettingsIcon },
+  {
+    title: "Admin",
+    path: "/dashboard/admin",
+    icon: AdminPanelSettingsIcon,
+    children: [
+      {
+        title: "Manage Users",
+        path: "/admin/users",
+        icon: PeopleIcon,
+      },
+      {
+        title: "Transactions",
+        path: "/admin/transactions",
+        icon: ListAltIcon,
+      },
+      {
+        title: "Settings",
+        path: "/admin/settings",
+        icon: SettingsIcon,
+      },
+    ],
+  },
   { title: "Account IQ", path: "/dashboard/account-iq", icon: InsightsIcon },
   // { title: 'Documentation', path: '/documentation', icon: DescriptionIcon },
   // { title: 'Support', path: '/support', icon: SupportAgentIcon },

payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts

@@ -4,4 +4,5 @@ export interface ISidebarLink {
   title: string;
   path: string;
   icon?: ElementType;
+  children?: ISidebarLink[];
 }

payment-iq/app/features/dashboard/sidebar/sideBar.scss

@@ -1,27 +1,74 @@
 .sidebar {
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    width: 240px;
+  width: 240px;
-    height: 100vh;
+  height: 100vh;
-    background-color: var(--background-primary);
+  background-color: var(--background-primary);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  z-index: 1100;
+  border-right: 1px solid #333;
+
+  &__header {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
     color: white;
+
+    &__icon-spacing {
+      margin-left: 8px;
+    }
+  }
+
+  &__dropdown-button {
+    padding: 10px 0;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    svg {
+      margin-right: 10px;
+    }
+
+    .sidebar__arrow {
+      margin-left: auto;
+      font-size: 12px;
+    }
+  }
+
+  &__submenu {
+    margin-left: 28px;
     display: flex;
     flex-direction: column;
-    padding: 16px;
+    border-left: 2px solid rgba(255, 255, 255, 0.1);
-    z-index: 1100;
+    padding-left: 8px;
-    border-right: 1px solid #333;
 
-    .sidebar__header {
+    a {
-        font-size: 20px;
+      color: white;
-        font-weight: 600;
+      padding: 8px 0;
-        margin-bottom: 24px;
+      font-size: 14px;
-        display: flex;
+      text-decoration: none;
-        align-items: center;
+      transition: color 0.2s ease;
-        color: white;
 
-        .sidebar__icon-spacing {
+      &:hover {
-            margin-left: 8px;
+        color: var(--primary-color); // Define your highlight color in variables
-        }
+      }
     }
+  }
 }