From c9a56fe1551154da6de3d862e6e9dc5a20a4e009 Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Wed, 25 Jun 2025 16:10:43 +0200
Subject: [PATCH] Added Navigate to

---
 payment-iq/README.md                          | 29 ++++++++++++-
 .../components/dashboard/header/DropDown.tsx  | 42 +++++++++++++++++++
 .../components/dashboard/header/Header.tsx    |  8 ++--
 .../components/dashboard/sidebar/Sidebar.tsx  |  2 +-
 payment-iq/app/dashboard/layout.tsx           |  9 ++--
 5 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 payment-iq/app/components/dashboard/header/DropDown.tsx

diff --git a/payment-iq/README.md b/payment-iq/README.md
index 8461975..c90f384 100644
--- a/payment-iq/README.md
+++ b/payment-iq/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/payment-iq/app/components/dashboard/header/DropDown.tsx b/payment-iq/app/components/dashboard/header/DropDown.tsx
new file mode 100644
index 0000000..aaff10d
--- /dev/null
+++ b/payment-iq/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/payment-iq/app/components/dashboard/header/Header.tsx b/payment-iq/app/components/dashboard/header/Header.tsx
index 12ccf6b..875a926 100644
--- a/payment-iq/app/components/dashboard/header/Header.tsx
+++ b/payment-iq/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/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx
index 8914eb1..512714d 100644
--- a/payment-iq/app/components/dashboard/sidebar/Sidebar.tsx
+++ b/payment-iq/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/payment-iq/app/dashboard/layout.tsx b/payment-iq/app/dashboard/layout.tsx
index 3cba5b7..333b9d1 100644
--- a/payment-iq/app/dashboard/layout.tsx
+++ b/payment-iq/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 (