From 69fbd6d5e189e098a9e9c3627b5d77d6a66702c2 Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Wed, 25 Jun 2025 15:35:28 +0200
Subject: [PATCH] Added Navigate To DropDown

---
 README.md                                    | 29 +++++++-
 app/components/dashboard/header/DropDown.tsx | 42 +++++++++++
 app/components/dashboard/header/Header.tsx   |  8 ++-
 app/components/dashboard/sidebar/Sidebar.tsx |  2 +-
 app/components/sidebar/SidebarLayout.tsx     | 73 --------------------
 app/dashboard/layout.tsx                     |  9 ++-
 6 files changed, 79 insertions(+), 84 deletions(-)
 create mode 100644 app/components/dashboard/header/DropDown.tsx
 delete mode 100644 app/components/sidebar/SidebarLayout.tsx

diff --git a/README.md b/README.md
index 8461975..c90f384 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,27 @@
-# paymentIQ
-Payment IQ Back Office
+# 🛠️ Backoffice Admin Panel
+
+A modern backoffice admin panel built with [Next.js](https://nextjs.org/) and [React](https://react.dev), providing a scalable and maintainable foundation for managing internal tools, content, and operations.
+
+---
+
+## 🚀 Tech Stack
+
+- [Next.js](https://nextjs.org/) – App Router with SSR support
+- [React](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Material UI](https://mui.com/) – UI component library
+- [Axios](https://axios-http.com/) – API client
+- [Jest](https://jestjs.io/) / [React Testing Library](https://testing-library.com/) – Unit & integration testing
+- [ESLint](https://eslint.org/) / [Prettier](https://prettier.io/) – Code quality & formatting
+- [dotenv](https://github.com/motdotla/dotenv) – Environment variable management
+
+---
+
+## 📦 Getting Started
+
+
+```bash
+git clone https://git.luckyigaming.com/Mitchell/payment-backoffice.git
+cd backoffice
+
+yarn run dev
diff --git a/app/components/dashboard/header/DropDown.tsx b/app/components/dashboard/header/DropDown.tsx
new file mode 100644
index 0000000..aaff10d
--- /dev/null
+++ b/app/components/dashboard/header/DropDown.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
+
+interface Props {
+  onChange?: (event: SelectChangeEvent<string>) => void;
+}
+
+export default function SidebarDropdown({ onChange }: Props) {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent<string>) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+
+  return (
+    <FormControl fullWidth variant="outlined"  sx={{ maxWidth: 200 }}>
+      <InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>
+      <Select
+        labelId="sidebar-dropdown-label"
+        value={value}
+        onChange={handleChange}
+        label="Navigate To"
+      >
+        {SIDEBAR_LINKS.map((link:any) => (
+          <MenuItem key={link.path} value={link.path}>
+            <ListItemText primary={link.title} />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
diff --git a/app/components/dashboard/header/Header.tsx b/app/components/dashboard/header/Header.tsx
index 12ccf6b..875a926 100644
--- a/app/components/dashboard/header/Header.tsx
+++ b/app/components/dashboard/header/Header.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { AppBar, Toolbar, IconButton, Menu, MenuItem, Button } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
+import Dropdown from './DropDown';
 
 const Header = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -15,6 +16,9 @@ const Header = () => {
     setAnchorEl(null);
   };
 
+  const handleChange = (e:any) => {
+  };
+
   return (
     <AppBar position="sticky" color="transparent" elevation={0} sx={{ borderBottom: '1px solid #22242626' }}>
       <Toolbar>
@@ -24,9 +28,7 @@ const Header = () => {
         </IconButton>
 
         {/* Dropdown Button */}
-        <Button color="inherit" onClick={handleMenuClick}>
-          Options
-        </Button>
+        <Dropdown onChange={handleChange}/>
 
         {/* Dropdown Menu */}
         <Menu
diff --git a/app/components/dashboard/sidebar/Sidebar.tsx b/app/components/dashboard/sidebar/Sidebar.tsx
index 8914eb1..512714d 100644
--- a/app/components/dashboard/sidebar/Sidebar.tsx
+++ b/app/components/dashboard/sidebar/Sidebar.tsx
@@ -38,7 +38,7 @@ const SideBar = () => {
   return (
     <SideBarContainer>
       <SidebarHeader>
-        PaymentIQ <IconSpacing fontSize="small" />
+        <span style={{color: '#fff'}}>Betrise cashir <IconSpacing fontSize="small" /></span>
       </SidebarHeader>
        {SIDEBAR_LINKS.map((link) => (
           <SidebarLink
diff --git a/app/components/sidebar/SidebarLayout.tsx b/app/components/sidebar/SidebarLayout.tsx
deleted file mode 100644
index 1d5e544..0000000
--- a/app/components/sidebar/SidebarLayout.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client';
-
-import React from 'react';
-import { styled } from '@mui/system';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-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.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 }) => ({
-  flexGrow: 1,
-  padding: theme.spacing(4),
-  backgroundColor: theme.palette.background.default,
-  minHeight: '100vh',
-  overflowY: 'auto',
-}));
-
-// SideBar Header
-export const SideBarHeader = styled('div')(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-  fontSize: '20px',
-  fontWeight: 600,
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-// Page Wrapper that holds SideBar and Content
-export const LayoutWrapper = styled('div')({
-  display: 'flex',
-  flexDirection: 'row',
-  height: '100vh',
-});
-
-interface SideBarLayoutProps {
-  children: React.ReactNode; // Add children to accept passed content
-}
-
-const SideBarLayout: React.FC<SideBarLayoutProps> = ({ children }) => {
-  return (
-    <LayoutWrapper>
-      <SideBar>
-        <SideBarHeader>
-          PaymentIQ
-          <DashboardIcon sx={{ marginLeft: 0.5 }} />
-        </SideBarHeader>
-        {SIDEBAR_LINKS.map((link) => (
-          <SideBarLink
-            key={link.path}
-            title={link.title}
-            path={link.path}
-            icon={link.icon}
-          />
-        ))}
-      </SideBar>
-      <MainContent>{children}</MainContent> {/* Render children here */}
-    </LayoutWrapper>
-  );
-};
-
-export default SideBarLayout;
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 3cba5b7..333b9d1 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import React from 'react';
-import { MainContent } from '../components/Dashboard/Layout/mainContent';
-import Header from '../components/Dashboard/Header/Header';
-import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper';
-import SideBar from '../components/Dashboard/SideBar/Sidebar';
-
+import { LayoutWrapper } from '../components/dashboard/layout/layoutWrapper';
+import { MainContent } from '../components/dashboard/layout/mainContent';
+import SideBar from '../components/dashboard/sidebar/Sidebar';
+import Header from '../components/dashboard/header/Header';
 
 const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (