From 48764c779c1a0a25f79d76d2c4fc1c174ac2d7fa Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Fri, 20 Jun 2025 08:16:39 +0200
Subject: [PATCH] Change page routing structure and added header

---
 .../components/dashboard/header/Header.tsx    | 46 ++++++++++++++++
 .../dashboard/layout/layoutWrapper.ts         |  8 +++
 .../dashboard/layout/mainContent.ts           |  8 +++
 .../dashboard/sidebar/SideBarLink.tsx         | 41 ++++++++++++++
 .../components/dashboard/sidebar/Sidebar.tsx  | 55 +++++++++++++++++++
 payment-iq/app/dashboard/kyc/page.tsx         | 15 +++++
 payment-iq/app/dashboard/layout.tsx           | 17 +++++-
 payment-iq/app/dashboard/page.tsx             |  2 +-
 payment-iq/app/page.tsx                       |  5 --
 9 files changed, 189 insertions(+), 8 deletions(-)
 create mode 100644 payment-iq/app/components/dashboard/header/Header.tsx
 create mode 100644 payment-iq/app/components/dashboard/layout/layoutWrapper.ts
 create mode 100644 payment-iq/app/components/dashboard/layout/mainContent.ts
 create mode 100644 payment-iq/app/components/dashboard/sidebar/SideBarLink.tsx
 create mode 100644 payment-iq/app/components/dashboard/sidebar/Sidebar.tsx
 create mode 100644 payment-iq/app/dashboard/kyc/page.tsx
 delete mode 100644 payment-iq/app/page.tsx

diff --git a/payment-iq/app/components/dashboard/header/Header.tsx b/payment-iq/app/components/dashboard/header/Header.tsx
new file mode 100644
index 0000000..12ccf6b
--- /dev/null
+++ b/payment-iq/app/components/dashboard/header/Header.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { AppBar, Toolbar, IconButton, Menu, MenuItem, Button } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+
+const Header = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  // Handle menu open
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  // Handle menu close
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <AppBar position="sticky" color="transparent" elevation={0} sx={{ borderBottom: '1px solid #22242626' }}>
+      <Toolbar>
+        {/* Burger Menu */}
+        <IconButton edge="start" color="inherit" aria-label="menu">
+          <MenuIcon />
+        </IconButton>
+
+        {/* Dropdown Button */}
+        <Button color="inherit" onClick={handleMenuClick}>
+          Options
+        </Button>
+
+        {/* Dropdown Menu */}
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleMenuClose}
+        >
+          <MenuItem onClick={handleMenuClose}>Option 1</MenuItem>
+          <MenuItem onClick={handleMenuClose}>Option 2</MenuItem>
+          <MenuItem onClick={handleMenuClose}>Option 3</MenuItem>
+        </Menu>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;
diff --git a/payment-iq/app/components/dashboard/layout/layoutWrapper.ts b/payment-iq/app/components/dashboard/layout/layoutWrapper.ts
new file mode 100644
index 0000000..7da683a
--- /dev/null
+++ b/payment-iq/app/components/dashboard/layout/layoutWrapper.ts
@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+
+export const LayoutWrapper = styled('div')({
+  display: 'flex',
+  width: '100%',
+  height: '100vh',
+  overflow: 'hidden',
+});
\ No newline at end of file
diff --git a/payment-iq/app/components/dashboard/layout/mainContent.ts b/payment-iq/app/components/dashboard/layout/mainContent.ts
new file mode 100644
index 0000000..39b1395
--- /dev/null
+++ b/payment-iq/app/components/dashboard/layout/mainContent.ts
@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+
+export const MainContent = styled('div')(({ theme }) => ({
+  marginLeft: '240px',
+  padding: theme.spacing(3),
+  minHeight: '100vh',
+  width: 'calc(100% - 240px)', 
+}));
\ No newline at end of file
diff --git a/payment-iq/app/components/dashboard/sidebar/SideBarLink.tsx b/payment-iq/app/components/dashboard/sidebar/SideBarLink.tsx
new file mode 100644
index 0000000..17601cf
--- /dev/null
+++ b/payment-iq/app/components/dashboard/sidebar/SideBarLink.tsx
@@ -0,0 +1,41 @@
+'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 1px',
+  borderRadius: '4px',
+  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,
+    cursor: 'pointer',
+  },
+}));
+
+const LinkText = styled('span')(({ theme }) => ({
+  color: theme.palette.text.tertiary,
+  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>
+  );
+}
diff --git a/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..527f341
--- /dev/null
+++ b/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { styled } from '@mui/system';
+import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
+import SidebarLink from './SideBarLink';
+
+const SidebarContainer = styled('aside')(({ theme }) => ({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: 240,
+  height: '100vh',
+  backgroundColor: theme.palette.background.primary,
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: theme.spacing(2),
+  zIndex: 1100,
+  borderRight: `1px solid ${theme.palette.divider}`,
+}));
+
+const SidebarHeader = styled('div')(({ theme }) => ({
+  fontSize: '20px',
+  fontWeight: 600,
+  marginBottom: theme.spacing(3),
+  display: 'flex',
+  alignItems: 'center',
+  color: theme.palette.text.primary,
+}));
+
+const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const Sidebar = () => {
+  return (
+    <SidebarContainer>
+      <SidebarHeader>
+        PaymentIQ <IconSpacing fontSize="small" />
+      </SidebarHeader>
+       {SIDEBAR_LINKS.map((link) => (
+          <SidebarLink
+            key={link.path}
+            title={link.title}
+            path={link.path}
+            icon={link.icon}
+          />
+        ))}
+    </SidebarContainer>
+  );
+};
+
+export default Sidebar;
diff --git a/payment-iq/app/dashboard/kyc/page.tsx b/payment-iq/app/dashboard/kyc/page.tsx
new file mode 100644
index 0000000..367259b
--- /dev/null
+++ b/payment-iq/app/dashboard/kyc/page.tsx
@@ -0,0 +1,15 @@
+// This ensures this component is rendered only on the client side
+// 'use client';
+
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+export default function KycPage() {
+  return (
+   <div>
+    <Typography variant="h4" gutterBottom>
+        KYC Overview
+      </Typography>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/payment-iq/app/dashboard/layout.tsx b/payment-iq/app/dashboard/layout.tsx
index e9aefe5..77a0a24 100644
--- a/payment-iq/app/dashboard/layout.tsx
+++ b/payment-iq/app/dashboard/layout.tsx
@@ -1,10 +1,23 @@
 'use client';
 
 import React from 'react';
-import SidebarLayout from '../components/sidebar/Sidebar';
+import { MainContent } from '../components/dashboard/layout/mainContent';
+import Header from '../components/dashboard/header/Header';
+import { LayoutWrapper } from '../components/dashboard/layout/layoutWrapper';
+import Sidebar from '@/app/components/dashboard/sidebar/Sidebar';
 
 const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <SidebarLayout>{children}</SidebarLayout>; // Ensure that the sidebar wraps all dashboard pages
+  return (
+    <LayoutWrapper>
+      <Sidebar />
+      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+      <MainContent>
+        <Header />
+        {children}
+      </MainContent>
+       </div>
+    </LayoutWrapper>
+  );
 };
 
 export default DashboardLayout;
diff --git a/payment-iq/app/dashboard/page.tsx b/payment-iq/app/dashboard/page.tsx
index 4520b57..31b5ea4 100644
--- a/payment-iq/app/dashboard/page.tsx
+++ b/payment-iq/app/dashboard/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Typography, Paper } from '@mui/material';
+import { Typography } from '@mui/material';
 
 const DashboardPage = () => {
   return (
diff --git a/payment-iq/app/page.tsx b/payment-iq/app/page.tsx
deleted file mode 100644
index 3915b26..0000000
--- a/payment-iq/app/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SidebarLayout from '@/app/components/sidebar/Sidebar';
-
-export default function Home() {
-  return <SidebarLayout />;
-}