From c4692e22228048b47cea338be745eceefcac56fb Mon Sep 17 00:00:00 2001 From: Mitchell Magro Date: Sun, 29 Jun 2025 08:49:58 +0200 Subject: [PATCH] Fixed a bunch of stuff --- .../app/components/PageLinks/PageLinks.tsx | 2 +- payment-iq/app/dashboard/loading.tsx | 20 ++ .../app/dashboard/transactions/page.tsx | 8 +- .../GeneralHealthCard/GeneralHealthCard.tsx | 5 +- .../Pages/transactions/Transactions.tsx | 209 ++++++++++-------- .../app/features/SectionCard/SectionCard.tsx | 2 +- .../TransactionsOverViewTable.tsx | 4 +- .../TransactionsWaitingApproval.tsx | 4 +- .../header/dropDown/DropDown.styled.ts | 1 + .../dashboard/header/dropDown/DropDown.tsx | 5 +- .../dashboard/layout/layoutWrapper.ts | 11 +- .../features/dashboard/sidebar/Sidebar.tsx | 2 +- .../sidebar}/SidebarLink.constants.ts | 2 +- .../sidebar}/SidebarLink.interfaces.ts | 0 .../app/features/sidebar/SideBarLink.tsx | 41 ---- .../app/features/sidebar/SidebarLayout.tsx | 73 ------ payment-iq/app/utils/defineStyles.ts | 11 + payment-iq/config/ThemeRegistry.tsx | 13 +- 18 files changed, 177 insertions(+), 236 deletions(-) create mode 100644 payment-iq/app/dashboard/loading.tsx rename payment-iq/{constants => app/features/dashboard/sidebar}/SidebarLink.constants.ts (94%) rename payment-iq/{interfaces => app/features/dashboard/sidebar}/SidebarLink.interfaces.ts (100%) delete mode 100644 payment-iq/app/features/sidebar/SideBarLink.tsx delete mode 100644 payment-iq/app/features/sidebar/SidebarLayout.tsx create mode 100644 payment-iq/app/utils/defineStyles.ts diff --git a/payment-iq/app/components/PageLinks/PageLinks.tsx b/payment-iq/app/components/PageLinks/PageLinks.tsx index 12962d8..4f8f670 100644 --- a/payment-iq/app/components/PageLinks/PageLinks.tsx +++ b/payment-iq/app/components/PageLinks/PageLinks.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { styled } from "@mui/system"; -import { ISidebarLink } from "@/interfaces/SidebarLink.interfaces"; +import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces"; const LinkContainer = styled("div")(({ theme }) => ({ display: "flex", diff --git a/payment-iq/app/dashboard/loading.tsx b/payment-iq/app/dashboard/loading.tsx new file mode 100644 index 0000000..eab1584 --- /dev/null +++ b/payment-iq/app/dashboard/loading.tsx @@ -0,0 +1,20 @@ +// app/dashboard/loading.tsx +"use client"; + +import CircularProgress from "@mui/material/CircularProgress"; +import { styled } from "@mui/system"; + +const LoaderWrapper = styled("div")({ + height: "100vh", + display: "flex", + alignItems: "center", + justifyContent: "center", +}); + +export default function Loading() { + return ( + + + + ); +} diff --git a/payment-iq/app/dashboard/transactions/page.tsx b/payment-iq/app/dashboard/transactions/page.tsx index 796f0c0..cd6af40 100644 --- a/payment-iq/app/dashboard/transactions/page.tsx +++ b/payment-iq/app/dashboard/transactions/page.tsx @@ -1,13 +1,13 @@ // This ensures this component is rendered only on the client side -'use client'; +"use client"; -import TransactionTable from '@/app/components/Pages/Transactions/Transactions'; +import TransactionTable from "@/app/features/Pages/transactions/Transactions"; export default function TransactionPage() { return ( -
+
{/* This page will now be rendered on the client-side */}
); -} \ No newline at end of file +} diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx index fc9a446..df4778c 100644 --- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx @@ -3,7 +3,6 @@ import MoreVertIcon from "@mui/icons-material/MoreVert"; import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import { DateRangePicker } from "../DateRangePicker/DateRangePicker"; -// import { ArrowDropUp } from '@mui/icons-material'; const stats = [ { label: "TOTAL", value: 5, change: "-84.85%" }, @@ -63,8 +62,8 @@ export const GeneralHealthCard = () => { - {stats.map((item) => ( - + {stats.map((item, i) => ( + ))} diff --git a/payment-iq/app/features/Pages/transactions/Transactions.tsx b/payment-iq/app/features/Pages/transactions/Transactions.tsx index 43ad416..58f7deb 100644 --- a/payment-iq/app/features/Pages/transactions/Transactions.tsx +++ b/payment-iq/app/features/Pages/transactions/Transactions.tsx @@ -1,110 +1,131 @@ -'use client'; -import { useState } from 'react'; +"use client"; +import { useState } from "react"; import { - Button, Dialog, DialogTitle, DialogContent, DialogActions, - FormControl, Select, MenuItem, FormControlLabel, Checkbox, - Stack, Paper, styled, - TextField -} from '@mui/material'; -import FileUploadIcon from '@mui/icons-material/FileUpload'; -import * as XLSX from 'xlsx'; -import { saveAs } from 'file-saver'; -import { DataGrid } from '@mui/x-data-grid'; -import { columns } from './constants'; -import { rows } from './mockData'; + Button, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + FormControl, + Select, + MenuItem, + FormControlLabel, + Checkbox, + Stack, + Paper, + styled, + TextField, +} from "@mui/material"; +import FileUploadIcon from "@mui/icons-material/FileUpload"; +import * as XLSX from "xlsx"; +import { saveAs } from "file-saver"; +import { DataGrid } from "@mui/x-data-grid"; +import { columns } from "./constants"; +import { rows } from "./mockData"; const paginationModel = { page: 0, pageSize: 50 }; export default function TransactionTable() { - const [open, setOpen] = useState(false); - const [fileType, setFileType] = useState<'csv' | 'xls' | 'xlsx'>('csv'); - const [onlyCurrentTable, setOnlyCurrentTable] = useState(false); + const [open, setOpen] = useState(false); + const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv"); + const [onlyCurrentTable, setOnlyCurrentTable] = useState(false); - const handleExport = () => { - const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows; - const exportData = [ - columns.map(col => col.headerName), - // @ts-expect-error - Dynamic field access from DataGrid columns - ...exportRows.map(row => columns.map(col => row[col.field] ?? '')), - ]; + const handleExport = () => { + const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows; + const exportData = [ + columns.map((col) => col.headerName), + // @ts-expect-error - Dynamic field access from DataGrid columns + ...exportRows.map((row) => columns.map((col) => row[col.field] ?? "")), + ]; - const worksheet = XLSX.utils.aoa_to_sheet(exportData); - const workbook = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(workbook, worksheet, 'Transactions'); + const worksheet = XLSX.utils.aoa_to_sheet(exportData); + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, "Transactions"); - if (fileType === 'csv') { - const csv = XLSX.utils.sheet_to_csv(worksheet); - const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); - saveAs(blob, 'transactions.csv'); - } else { - XLSX.writeFile(workbook, `transactions.${fileType}`, { bookType: fileType }); - } + if (fileType === "csv") { + const csv = XLSX.utils.sheet_to_csv(worksheet); + const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }); + saveAs(blob, "transactions.csv"); + } else { + XLSX.writeFile(workbook, `transactions.${fileType}`, { + bookType: fileType, + }); + } - setOpen(false); - }; + setOpen(false); + }; - return ( - - - console.log(`setSearchQuery(${e.target.value})`)} - sx={{ width: 300 }} - /> - - + return ( + + + console.log(`setSearchQuery(${e.target.value})`)} + sx={{ width: 300 }} + /> + + - + - {/* Export Dialog */} - setOpen(false)}> - Export Transactions - - - - - setOnlyCurrentTable(e.target.checked)} - /> - } - label="Only export the results in the current table" - sx={{ mt: 2 }} - /> - - - - - - - - ); + {/* Export Dialog */} + setOpen(false)}> + Export Transactions + + + + + setOnlyCurrentTable(e.target.checked)} + /> + } + label="Only export the results in the current table" + sx={{ mt: 2 }} + /> + + + + + + + + ); } const StyledPaper = styled(Paper)(() => ({ - height: '90vh', + height: "90vh", })); diff --git a/payment-iq/app/features/SectionCard/SectionCard.tsx b/payment-iq/app/features/SectionCard/SectionCard.tsx index 7e08dda..add14c1 100644 --- a/payment-iq/app/features/SectionCard/SectionCard.tsx +++ b/payment-iq/app/features/SectionCard/SectionCard.tsx @@ -35,7 +35,7 @@ export const SectionCard = ({ title, icon, items }: ISectionCardProps) => ( {items.map((item, index) => ( - + { - {data1.map((row) => ( - + {data1.map((row, i) => ( + { - {transactions.map((tx) => ( - + {transactions.map((tx, i) => ( + {tx.id} {tx.user} {tx.created} diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.styled.ts b/payment-iq/app/features/dashboard/header/dropDown/DropDown.styled.ts index 8de5573..4c53e18 100644 --- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.styled.ts +++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.styled.ts @@ -5,4 +5,5 @@ export const Em = styled("em")(() => ({ alignItems: "center", opacity: 0.7, fontStyle: "normal", + color: "white", })); diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx index adb6138..baecdd4 100644 --- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx +++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx @@ -7,8 +7,8 @@ import { SelectChangeEvent, } from "@mui/material"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; -import { SIDEBAR_LINKS } from "@/constants/SidebarLink.constants"; -import { ISidebarLink } from "@/interfaces/SidebarLink.interfaces"; +import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants"; +import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces"; import { Em } from "./DropDown.styled"; import PageLinks from "../../../../components/PageLinks/PageLinks"; @@ -35,6 +35,7 @@ export default function SidebarDropdown({ onChange }: Props) { MenuProps={{ PaperProps: { style: { + backgroundColor: "rgba(30, 30, 30, 0.7)", // 0.9 opacity maxHeight: 200, }, }, diff --git a/payment-iq/app/features/dashboard/layout/layoutWrapper.ts b/payment-iq/app/features/dashboard/layout/layoutWrapper.ts index 3a9a999..f288979 100644 --- a/payment-iq/app/features/dashboard/layout/layoutWrapper.ts +++ b/payment-iq/app/features/dashboard/layout/layoutWrapper.ts @@ -1,8 +1,7 @@ -import { styled } from '@mui/system'; +import { styled } from "@mui/system"; -export const LayoutWrapper = styled('div')({ - display: 'flex', - width: '100%', - height: '100vh', - // overflow: 'hidden', +export const LayoutWrapper = styled("div")({ + display: "flex", + width: "100%", + height: "100vh", }); diff --git a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx index 11fcd40..7271d47 100644 --- a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx +++ b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx @@ -3,7 +3,7 @@ import React from "react"; import DashboardIcon from "@mui/icons-material/Dashboard"; import { styled } from "@mui/system"; -import { SIDEBAR_LINKS } from "@/constants/SidebarLink.constants"; +import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants"; import PageLinks from "../../../components/PageLinks/PageLinks"; const SideBarContainer = styled("aside")(({ theme }) => ({ diff --git a/payment-iq/constants/SidebarLink.constants.ts b/payment-iq/app/features/dashboard/sidebar/SidebarLink.constants.ts similarity index 94% rename from payment-iq/constants/SidebarLink.constants.ts rename to payment-iq/app/features/dashboard/sidebar/SidebarLink.constants.ts index 2fadf07..38b6a59 100644 --- a/payment-iq/constants/SidebarLink.constants.ts +++ b/payment-iq/app/features/dashboard/sidebar/SidebarLink.constants.ts @@ -8,7 +8,7 @@ import GavelIcon from "@mui/icons-material/Gavel"; import HubIcon from "@mui/icons-material/Hub"; import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; import InsightsIcon from "@mui/icons-material/Insights"; -import { ISidebarLink } from "@/interfaces/SidebarLink.interfaces"; +import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces"; export const SIDEBAR_LINKS: ISidebarLink[] = [ { title: "Home", path: "/dashboard", icon: HomeIcon }, diff --git a/payment-iq/interfaces/SidebarLink.interfaces.ts b/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts similarity index 100% rename from payment-iq/interfaces/SidebarLink.interfaces.ts rename to payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts diff --git a/payment-iq/app/features/sidebar/SideBarLink.tsx b/payment-iq/app/features/sidebar/SideBarLink.tsx deleted file mode 100644 index 17601cf..0000000 --- a/payment-iq/app/features/sidebar/SideBarLink.tsx +++ /dev/null @@ -1,41 +0,0 @@ -'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 ( - - - - {Icon && } - {title} - - - - ); -} diff --git a/payment-iq/app/features/sidebar/SidebarLayout.tsx b/payment-iq/app/features/sidebar/SidebarLayout.tsx deleted file mode 100644 index 1d5e544..0000000 --- a/payment-iq/app/features/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 = ({ children }) => { - return ( - - - - PaymentIQ - - - {SIDEBAR_LINKS.map((link) => ( - - ))} - - {children} {/* Render children here */} - - ); -}; - -export default SideBarLayout; diff --git a/payment-iq/app/utils/defineStyles.ts b/payment-iq/app/utils/defineStyles.ts new file mode 100644 index 0000000..3df26c0 --- /dev/null +++ b/payment-iq/app/utils/defineStyles.ts @@ -0,0 +1,11 @@ +// utils/defineStyles.ts +import type { SxProps, Theme } from "@mui/material/styles"; + +/** + * Helper to define style objects with full key/type inference as SxProps + */ +export function defineStyles>>( + styles: T +): T { + return styles; +} diff --git a/payment-iq/config/ThemeRegistry.tsx b/payment-iq/config/ThemeRegistry.tsx index 19ddc63..6c2b953 100644 --- a/payment-iq/config/ThemeRegistry.tsx +++ b/payment-iq/config/ThemeRegistry.tsx @@ -1,10 +1,13 @@ +"use client"; -'use client'; +import { ThemeProvider, CssBaseline } from "@mui/material"; +import theme from "./theme"; -import { ThemeProvider, CssBaseline } from '@mui/material'; -import theme from './theme'; - -export default function ThemeRegistry({ children }: { children: React.ReactNode }) { +export default function ThemeRegistry({ + children, +}: { + children: React.ReactNode; +}) { return (