Added initial Sidebar

payment-iq/app/components/sidebar/SideBarLink.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Link from 'next/link';
+import { styled } from '@mui/system';
+import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
+
+const LinkContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '12px 16px',
+//   borderRadius: theme.shape.borderRadius,
+//   color: theme.palette.text.primary,
+  textDecoration: 'none',
+  transition: 'background 0.2s ease-in-out',
+
+  '&:hover': {
+    backgroundColor: 'yellow',
+    // backgroundColor: theme.palette.action.hover,
+    cursor: 'pointer',
+  },
+}));
+
+const LinkText = styled('span')({
+  marginLeft: '12px',
+  fontWeight: 500,
+});
+
+export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
+  return (
+    <Link href={path} passHref legacyBehavior>
+      <a style={{ textDecoration: 'none' }}>
+        <LinkContainer>
+          {Icon && <Icon />}
+          <LinkText>{title}</LinkText>
+        </LinkContainer>
+      </a>
+    </Link>
+  );
+}

payment-iq/app/components/sidebar/Sidebar.tsx

@@ -1,13 +1,16 @@
-// components/SidebarLayout.tsx
+'use client'
+
 import React from 'react';
 import { styled } from '@mui/system';
 import { Box, Typography, Button } from '@mui/material';
+import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
+import SidebarLink from './SideBarLink';
 
 // Sidebar Container (styled using MUI System)
 export const Sidebar = styled('div')(({ theme }) => ({
   width: '240px',
-  backgroundColor: theme.palette.primary.main,
+  backgroundColor: 'black',
-  color: theme.palette.common.white,
+  color: 'white',
   padding: theme.spacing(2),
   height: '100vh',
   display: 'flex',
@@ -19,7 +22,7 @@ export const Sidebar = styled('div')(({ theme }) => ({
 export const MainContent = styled('div')(({ theme }) => ({
   marginLeft: '240px',
   padding: theme.spacing(3),
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: 'green',
   minHeight: '100vh',
 }));
 
@@ -28,7 +31,7 @@ export const SidebarItem = styled('div')(({ theme }) => ({
   padding: theme.spacing(1.5),
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: theme.palette.primary.dark,
+    backgroundColor: 'brown',
   },
 }));
 
@@ -51,28 +54,15 @@ const SidebarLayout = () => {
     <LayoutWrapper>
       <Sidebar>
         <SidebarHeader>Dashboard</SidebarHeader>
-        <SidebarItem>
+        {SIDEBAR_LINKS.map((link) => (
-          <Typography variant="body1">Home</Typography>
+          <SidebarLink
-        </SidebarItem>
+            key={link.path}
-        <SidebarItem>
+            title={link.title}
-          <Typography variant="body1">Settings</Typography>
+            path={link.path}
-        </SidebarItem>
+            icon={link.icon}
-        <SidebarItem>
+          />
-          <Typography variant="body1">Profile</Typography>
+        ))}
-        </SidebarItem>
-        <Button variant="contained" color="secondary" fullWidth>
-          Logout
-        </Button>
       </Sidebar>
-
-      <MainContent>
-        <Typography variant="h4" gutterBottom>
-          Welcome to the Dashboard!
-        </Typography>
-        <Typography variant="body1">
-          This is your main content area.
-        </Typography>
-      </MainContent>
     </LayoutWrapper>
   );
 }

payment-iq/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import SidebarLayout from '@/app/components/Sidebar';
+import SidebarLayout from '@/app/components/sidebar/Sidebar';
 
 export default function Home() {
   return <SidebarLayout />;

payment-iq/constants/SidebarLink.constants.ts

@@ -0,0 +1,33 @@
+import HomeIcon from '@mui/icons-material/Home';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import SearchIcon from '@mui/icons-material/Search';
+import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import PeopleIcon from '@mui/icons-material/People';
+import BarChartIcon from '@mui/icons-material/BarChart';
+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 DescriptionIcon from '@mui/icons-material/Description';
+import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
+
+
+export const SIDEBAR_LINKS: ISidebarLink[] = [
+  { title: 'Home', path: '/', icon: HomeIcon },
+  { title: 'Transaction', path: '/transaction', icon: AccountBalanceWalletIcon },
+  { title: 'Approve', path: '/approve', icon: CheckCircleIcon },
+  { title: 'Investigate', path: '/investigate', icon: SearchIcon },
+  { title: 'KYC', path: '/kyc', icon: VerifiedUserIcon },
+  { title: 'User Accounts', path: '/user-accounts', icon: PeopleIcon },
+  { title: 'Analytics', path: '/analytics', icon: BarChartIcon },
+  { title: 'Rules', path: '/rules', icon: GavelIcon },
+  { title: 'Rules Hub', path: '/rules-hub', icon: HubIcon },
+  { title: 'Admin', path: '/admin', icon: AdminPanelSettingsIcon },
+  { title: 'Account IQ', path: '/account-iq', icon: InsightsIcon },
+  { title: 'Documentation', path: '/documentation', icon: DescriptionIcon },
+  { title: 'Support', path: '/support', icon: SupportAgentIcon },
+  { title: 'System Status', path: '/system-status', icon: WarningAmberIcon },
+];

payment-iq/interfaces/SidebarLink.interfaces.ts

@@ -0,0 +1,7 @@
+import { ElementType } from "react";
+
+export interface ISidebarLink {
+  title: string;
+  path: string;
+  icon?: ElementType;
+}

payment-iq/package.json

@@ -9,20 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^7.1.1"
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "next": "15.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.3",
-    "@eslint/eslintrc": "^3"
+    "typescript": "^5"
   }
 }

payment-iq/yarn.lock

@@ -472,6 +472,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz#43532ccf57be19055eb20e7802508520293cf286"
   integrity sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==
 
+"@mui/icons-material@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-7.1.1.tgz#0e0e9640579da5e4096f0449438337c448bc5a5c"
+  integrity sha512-X37+Yc8QpEnl0sYmz+WcLFy2dWgNRzbswDzLPXG7QU1XDVlP5TPp1HXjdmCupOWLL/I9m1fyhcyZl8/HPpp/Cg==
+  dependencies:
+    "@babel/runtime" "^7.27.1"
+
 "@mui/material@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-7.1.1.tgz#5f75b25936925be14cb34abe0489cda82a6f8413"