s

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

@@ -8,23 +8,24 @@ const LinkContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: '12px 1px',
-//   borderRadius: theme.shape.borderRadius,s
+  borderRadius: '4px',
-//   color: theme.palette.text.primary,
+  color: theme.palette.text.tertiary,
   textDecoration: 'none',
   transition: 'background 0.2s ease-in-out',
 
   '&:hover': {
     color: 'rgb(255, 255, 255)',
     background: 'rgba(255, 255, 255, 0.08)',
-    // backgroundColor: theme.palette.action.hover,
+    backgroundColor: theme.palette.action.hover,
     cursor: 'pointer',
   },
 }));
-// background-color: rgb(69, 190, 171);
+
-const LinkText = styled('span')({
+const LinkText = styled('span')(({ theme }) => ({
+  color: theme.palette.text.tertiary,
   marginLeft: '12px',
   fontWeight: 500,
-});
+}));
 
 export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
   return (

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

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import React from 'react';
 import { styled } from '@mui/system';
@@ -9,30 +9,32 @@ import SidebarLink from './SideBarLink';
 // Sidebar Container (styled using MUI System)
 export const Sidebar = styled('div')(({ theme }) => ({
   width: '240px',
-  backgroundColor: 'rgb(69, 190, 171)',
+  backgroundColor: theme.palette.background.primary,
   color: 'white',
   padding: theme.spacing(2),
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
+  transition: 'width 0.3s ease', // Transition for resizing
 }));
 
 // Main Content Area
 export const MainContent = styled('div')(({ theme }) => ({
-  marginLeft: '240px',
+  flexGrow: 1,
-  padding: theme.spacing(3),
+  padding: theme.spacing(4),
-  backgroundColor: 'green',
+  backgroundColor: theme.palette.background.default,
   minHeight: '100vh',
+  overflowY: 'auto',
 }));
 
-// Sidebar Navigation Items
+// Sidebar Header
-export const SidebarItem = styled('div')(({ theme }) => ({
+export const SidebarHeader = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1.5),
+  marginBottom: theme.spacing(2),
-  cursor: 'pointer',
+  fontSize: '20px',
-  '&:hover': {
+  fontWeight: 600,
-    backgroundColor: 'brown',
+  display: 'flex',
-  },
+  alignItems: 'center',
 }));
 
 // Page Wrapper that holds Sidebar and Content
@@ -42,18 +44,18 @@ export const LayoutWrapper = styled('div')({
   height: '100vh',
 });
 
-// Sidebar Header
+interface SidebarLayoutProps {
-export const SidebarHeader = styled('div')(({ theme }) => ({
+  children: React.ReactNode; // Add children to accept passed content
-  marginBottom: theme.spacing(2),
+}
-  fontSize: '20px',
-  fontWeight: 600,
-}));
 
-const SidebarLayout = () => { 
+const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
- return (
+  return (
     <LayoutWrapper>
       <Sidebar>
-        <SidebarHeader>PaymentIQ<DashboardIcon sx={{ marginLeft: 0.5 }}/></SidebarHeader>
+        <SidebarHeader>
+          PaymentIQ
+          <DashboardIcon sx={{ marginLeft: 0.5 }} />
+        </SidebarHeader>
         {SIDEBAR_LINKS.map((link) => (
           <SidebarLink
             key={link.path}
@@ -63,8 +65,9 @@ const SidebarLayout = () => {
           />
         ))}
       </Sidebar>
+      <MainContent>{children}</MainContent> {/* Render children here */}
     </LayoutWrapper>
   );
-}
+};
 
 export default SidebarLayout;

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

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

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

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+'use client';
+
+import React from 'react';
+
+export default function InvestigatePage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <h1>Investigate</h1>
+    </div>
+  );
+}

payment-iq/app/dashboard/layout.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+import SidebarLayout from '../components/sidebar/Sidebar';
+
+const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <SidebarLayout>{children}</SidebarLayout>; // Ensure that the sidebar wraps all dashboard pages
+};
+
+export default DashboardLayout;

payment-iq/app/dashboard/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import { Typography, Paper } from '@mui/material';
+
+const DashboardPage = () => {
+  return (
+    <div  style={{ width: '100vh' }}>
+      <Typography variant="h4" gutterBottom>
+        Dashboard Overview
+      </Typography>
+      {/* Add your dashboard content here */}
+  </div>
+  );
+};
+
+export default DashboardPage;

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

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+'use client';
+
+import React from 'react';
+
+export default function TransactionPage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <h1>Transactions</h1>
+    </div>
+  );
+}

payment-iq/app/layout.tsx

@@ -1,31 +1,16 @@
-import type { Metadata } from "next";
+import ThemeRegistry from '@/config/ThemeRegistry';
-import { Geist, Geist_Mono } from "next/font/google";
+import type { Metadata } from 'next';
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: 'Your App',
-  description: "Generated by create next app",
+  description: 'Generated by Next.js',
 };
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: React.ReactNode }) {
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body>
-        {children}
+        <ThemeRegistry>{children}</ThemeRegistry>
       </body>
     </html>
   );

payment-iq/app/page.tsx

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

payment-iq/config/ThemeRegistry.tsx

@@ -0,0 +1,14 @@
+
+'use client';
+
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import theme from './theme';
+
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}

payment-iq/config/theme.ts

@@ -1,41 +1,27 @@
 import { createTheme } from '@mui/material/styles';
 
-// Define your color palette
+const palette = {
-const lightPalette = {
   primary: {
-    main: '#1976d2', // Blue color
+    main: '#1976d2', 
   },
   secondary: {
-    main: '#d32f2f', // Red color
+    main: '#d32f2f',
   },
   background: {
     default: '#fafafa',
     paper: '#ffffff',
+    primary: 'rgb(69, 190, 171)',
   },
   text: {
     primary: '#000000',
     secondary: '#555555',
+    tertiary: '#fff',
+  },
+  action: {
+    hover: 'rgba(0, 0, 0, 0.08)',
   },
 };
 
-const darkPalette = {
-  primary: {
-    main: '#90caf9', // Light blue
-  },
-  secondary: {
-    main: '#f48fb1', // Light pink
-  },
-  background: {
-    default: '#121212',
-    paper: '#1d1d1d',
-  },
-  text: {
-    primary: '#ffffff',
-    secondary: '#bbbbbb',
-  },
-};
-
-// Typography customization
 const typography = {
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   h1: {
@@ -56,11 +42,9 @@ const typography = {
 const theme = createTheme({
   palette: {
     mode: 'light', // Change this to 'dark' for dark mode
-    ...(process.env.NODE_ENV === 'development' // Switch for dev mode
+   ...palette
-      ? lightPalette
-      : darkPalette),
   },
-  typography,
+  // typography,
   breakpoints: {
     values: {
       xs: 0,

payment-iq/constants/SidebarLink.constants.ts

@@ -16,9 +16,9 @@ import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
 
 
 export const SIDEBAR_LINKS: ISidebarLink[] = [
-  { title: 'Home', path: '/', icon: HomeIcon },
+  { title: 'Home', path: '/dashboard', icon: HomeIcon },
-  { title: 'Transaction', path: '/transaction', icon: AccountBalanceWalletIcon },
+  { title: 'Transaction', path: '/dashboard/transactions', icon: AccountBalanceWalletIcon },
-  { title: 'Approve', path: '/approve', icon: CheckCircleIcon },
+  { title: 'Approve', path: '/dashboard/approve', icon: CheckCircleIcon },
   { title: 'Investigate', path: '/investigate', icon: SearchIcon },
   { title: 'KYC', path: '/kyc', icon: VerifiedUserIcon },
   { title: 'User Accounts', path: '/user-accounts', icon: PeopleIcon },