s

README.md

@@ -1,2 +0,0 @@
-# paymentIQ
-Payment IQ Back Office

payment-iq/README.md

@@ -1,36 +1,2 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# paymentIQ
-
+Payment IQ Back Office
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

payment-iq/app/components/Sidebar.tsx

@@ -0,0 +1,80 @@
+// components/SidebarLayout.tsx
+import React from 'react';
+import { styled } from '@mui/system';
+import { Box, Typography, Button } from '@mui/material';
+
+// Sidebar Container (styled using MUI System)
+export const Sidebar = styled('div')(({ theme }) => ({
+  width: '240px',
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.common.white,
+  padding: theme.spacing(2),
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+}));
+
+// Main Content Area
+export const MainContent = styled('div')(({ theme }) => ({
+  marginLeft: '240px',
+  padding: theme.spacing(3),
+  backgroundColor: theme.palette.background.paper,
+  minHeight: '100vh',
+}));
+
+// Sidebar Navigation Items
+export const SidebarItem = styled('div')(({ theme }) => ({
+  padding: theme.spacing(1.5),
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.palette.primary.dark,
+  },
+}));
+
+// Page Wrapper that holds Sidebar and Content
+export const LayoutWrapper = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  height: '100vh',
+});
+
+// Sidebar Header
+export const SidebarHeader = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  fontSize: '20px',
+  fontWeight: 600,
+}));
+
+const SidebarLayout = () => { 
+ return (
+    <LayoutWrapper>
+      <Sidebar>
+        <SidebarHeader>Dashboard</SidebarHeader>
+        <SidebarItem>
+          <Typography variant="body1">Home</Typography>
+        </SidebarItem>
+        <SidebarItem>
+          <Typography variant="body1">Settings</Typography>
+        </SidebarItem>
+        <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>
+  );
+}
+
+export default SidebarLayout;

payment-iq/app/page.tsx

@@ -1,95 +1,6 @@
 import Image from "next/image";
-import styles from "./page.module.css";
+import SidebarLayout from '@/app/components/Sidebar';
 
 export default function Home() {
-  return (
+  return <SidebarLayout />;
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
 }

payment-iq/config/theme.ts

@@ -0,0 +1,75 @@
+import { createTheme } from '@mui/material/styles';
+
+// Define your color palette
+const lightPalette = {
+  primary: {
+    main: '#1976d2', // Blue color
+  },
+  secondary: {
+    main: '#d32f2f', // Red color
+  },
+  background: {
+    default: '#fafafa',
+    paper: '#ffffff',
+  },
+  text: {
+    primary: '#000000',
+    secondary: '#555555',
+  },
+};
+
+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: {
+    fontSize: '3rem',
+    fontWeight: 700,
+  },
+  h2: {
+    fontSize: '2.5rem',
+    fontWeight: 700,
+  },
+  body1: {
+    fontSize: '1rem',
+    fontWeight: 400,
+  },
+};
+
+// Create the theme based on the light or dark mode preference
+const theme = createTheme({
+  palette: {
+    mode: 'light', // Change this to 'dark' for dark mode
+    ...(process.env.NODE_ENV === 'development' // Switch for dev mode
+      ? lightPalette
+      : darkPalette),
+  },
+  typography,
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+});
+
+export default theme;

payment-iq/package.json

@@ -11,7 +11,10 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.3"
+    "next": "15.3.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.1.1"
   },
   "devDependencies": {
     "typescript": "^5",