Mitchell/payment-backoffice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix comments

Browse Source
This commit is contained in:
Petropoulos Evangelos 2025-07-02 00:03:42 +03:00
parent c76099dd3d
commit ae967a7e2d
32 changed files with 123 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
payment-iq/app/components/PageLinks/PageLinks.scss
View File

@ -1,23 +1,20 @@
/* PageLinks.scss */
.page-link__container {
display: flex;
align-items: center;
padding: 12px 1px;
border-radius: 4px;
color: var(--text-tertiary);
text-decoration: none;
transition: background 0.2s ease-in-out;
.link-container {
display: flex;
align-items: center;
padding: 12px 1px;
border-radius: 4px;
color: var(--text-tertiary);
text-decoration: none;
transition: background 0.2s ease-in-out;
&:hover {
color: #fff;
background-color: var(--hover-color);
cursor: pointer;
}
}
.link-text {
color: var(--text-tertiary);
margin-left: 12px;
font-weight: 500;
&:hover {
color: #fff;
background-color: var(--hover-color);
cursor: pointer;
}
.page-link__text {
color: var(--text-tertiary);
margin-left: 12px;
font-weight: 500;
}
}

6
payment-iq/app/components/PageLinks/PageLinks.tsx
View File

@ -15,10 +15,10 @@ export default function PageLinks({
icon: Icon,
}: IPageLinksProps) {
return (
<Link href={path} passHref legacyBehavior>
<a className={clsx("link-container")}>
<Link href={path} passHref legacyBehavior className="page-link">
<a className={clsx("page-link__container")}>
{Icon && <Icon />}
<span className="link-text">{title}</span>
<span className="page-link__text">{title}</span>
</a>
</Link>
);

4
payment-iq/app/features/AccountIQ/AccountIQ.scss
View File

@ -1,5 +1,5 @@
.account-iq-wrapper {
.icon {
.account-iq {
.account-iq__icon {
font-weight: bold;
color: #4ecdc4;
margin-top: 4px;

4
payment-iq/app/features/AccountIQ/AccountIQ.tsx
View File

@ -4,10 +4,10 @@ import "./AccountIQ.scss";
export const AccountIQ = () => {
return (
<Box className="account-iq-wrapper">
<Box className="account-iq">
<SectionCard
title="AccountIQ"
icon={<div className="icon">AIQ</div>}
icon={<div className="account-iq__icon">AIQ</div>}
items={[
{ title: "Automatically reconcile your transactions" },
{ title: "Live wallet balances from providers" },

4
payment-iq/app/features/DateRangePicker/DateRangePicker.scss
View File

@ -1,5 +1,5 @@
.date-range-picker-wrapper {
.date-typo {
.date-range-picker {
.date-range-picker__date-typo {
font-size: 0.875rem;
cursor: pointer;
padding: 8px;

7
payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
View File

@ -40,7 +40,7 @@ export const DateRangePicker = () => {
const id = open ? "date-range-popover" : undefined;
return (
<Box className="date-range-picker-wrapper">
<Box className="date-range-picker">
<Popover
id={id}
open={open}
@ -66,7 +66,10 @@ export const DateRangePicker = () => {
</Popover>
<Box>
<Typography onClick={handleClick} className="date-typo">
<Typography
onClick={handleClick}
className="date-range-picker__date-typo"
>
{format(range[0].startDate ?? new Date(), "PPP")} -{" "}
{format(range[0].endDate ?? new Date(), "PPP")}
</Typography>

4
payment-iq/app/features/Documentation/Documentation.scss
View File

@ -1,5 +1,5 @@
.documentation-wrapper {
.icon {
.documentation {
.documentation__icon {
height: auto;
}
}

6
payment-iq/app/features/Documentation/Documentation.tsx
View File

@ -6,10 +6,12 @@ import "./Documentation.scss";
export const Documentation = () => {
return (
<Box className="documentation-wrapper">
<Box className="documentation">
<SectionCard
title="Documentation"
icon={<DescriptionIcon className="icon" fontSize="small" />}
icon={
<DescriptionIcon className="documentation__icon" fontSize="small" />
}
items={[
{ title: "Provider Integration Overview" },
{ title: "APIs Introduction" },

2
payment-iq/app/features/FetchReports/FetchReport.scss
View File

@ -1,4 +1,4 @@
.fetch-report-paper {
.fetch-report {
padding: 23px;
margin: 16px;
display: flex;

2
payment-iq/app/features/FetchReports/FetchReports.tsx
View File

@ -31,7 +31,7 @@ export const FetchReport = () => {
const isDownloadEnabled = state && psp && reportType;
return (
<Paper className="fetch-report-paper" elevation={3}>
<Paper className="fetch-report" elevation={3}>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<Typography variant="h6" fontWeight="bold">
Fetch Report

8
payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss
View File

@ -1,16 +1,16 @@
.general-health-card-wrapper {
.header {
.general-health-card {
.general-health-card__header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.right-side {
.general-health-card__right-side {
display: flex;
align-items: center;
}
}
.stat-items {
.general-health-card__stat-items {
display: flex;
justify-content: space-around;
margin-top: 16px;

8
payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
View File

@ -16,13 +16,13 @@ const stats = [
export const GeneralHealthCard = () => {
return (
<Card className="general-health-card-wrapper">
<Card className="general-health-card">
<CardContent>
<Box className="header">
<Box className="general-health-card__header">
<Typography variant="h5" fontWeight="bold">
General Health
</Typography>
<Box className="right-side">
<Box className="general-health-card__right-side">
<CalendarTodayIcon fontSize="small" />
<Typography variant="body2">
<DateRangePicker />
@ -32,7 +32,7 @@ export const GeneralHealthCard = () => {
</IconButton>
</Box>
</Box>
<Box className="stat-items">
<Box className="general-health-card__stat-items">
{stats.map((item, i) => (
<StatItem key={item.label + i} {...item} />
))}

4
payment-iq/app/features/GeneralHealthCard/components/StatItem.scss
View File

@ -1,9 +1,9 @@
.static-item-wrapper {
.static-item {
text-align: center;
padding-left: 16px;
padding-right: 16px;
.percentage {
.static-item__percentage {
display: flex;
align-items: center;
justify-content: center;

4
payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx
View File

@ -11,14 +11,14 @@ export const StatItem = ({
value: string | number;
change: string;
}) => (
<Box className="static-item-wrapper">
<Box className="static-item">
<Typography variant="body2" fontWeight="bold" color="text.secondary">
{label}
</Typography>
<Typography variant="h6" fontWeight="bold" mt={0.5}>
{value}
</Typography>
<Box className="percentage">
<Box className="static-item__percentage">
<ArrowDropDownIcon fontSize="small" />
{/* <ArrowDropUp fontSize='small' /> */}
<Typography variant="caption">{change}</Typography>

2
payment-iq/app/features/PieCharts/PieCharts.scss
View File

@ -1,4 +1,4 @@
.pie-charts-wrapper {
.pie-charts {
width: 100%;
height: 300px;

2
payment-iq/app/features/PieCharts/PieCharts.tsx
View File

@ -39,7 +39,7 @@ const renderCustomizedLabel = ({
};
export const PieCharts = () => {
return (
<Box className="pie-charts-wrapper">
<Box className="pie-charts">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie

8
payment-iq/app/features/SectionCard/SectionCard.scss
View File

@ -1,17 +1,17 @@
.section-card-paper {
.section-card {
padding: 16px;
margin: 16px;
display: flex;
flex-direction: column;
.header {
.section-card__header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.title {
.section-card__title {
display: flex;
gap: 16px;
}
.icon-wrapper {
.section-card__icon-wrapper {
display: flex;
align-items: center;
gap: 16px;

8
payment-iq/app/features/SectionCard/SectionCard.tsx
View File

@ -16,16 +16,16 @@ import { ISectionCardProps } from "./types";
import "./SectionCard.scss";
export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
<Paper className="section-card-paper" elevation={3}>
<Paper className="section-card" elevation={3}>
<CardContent>
<Box className="header">
<Box className="title">
<Box className="section-card__header">
<Box className="section-card__title">
{icon}
<Typography variant="h6" fontWeight="bold">
{title}
</Typography>
</Box>
<Box className="icon-wrapper">
<Box className="section-card__icon-wrapper">
<IconButton size="small">
<MoreVertIcon fontSize="small" />
</IconButton>

6
payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss
View File

@ -1,10 +1,10 @@
.transaction-overview-paper {
.transaction-overview {
padding: 23px;
margin: 16px;
display: flex;
flex-direction: column;
.header {
.transaction-overview__header {
display: flex;
justify-content: space-between;
align-items: center;
@ -12,7 +12,7 @@
padding-right: 8px;
}
.chart-table-wrapper {
.transaction-overview__chart-table {
padding: 16px;
margin: 16px;
display: flex;

6
payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss
View File

@ -1,5 +1,5 @@
.transactions-overview-table-wrapper {
.state-wrapper {
.transactions-overview-table {
.transactions-overview-table__state-wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
@ -7,7 +7,7 @@
margin-right: auto;
width: 73px;
.state {
.transactions-overview-table__state {
width: 10px;
height: 10px;
border-radius: 50%;

9
payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx
View File

@ -21,10 +21,7 @@ const data1 = [
export const TransactionsOverViewTable = () => {
return (
<TableContainer
className="transactions-overview-table-wrapper"
component={Paper}
>
<TableContainer className="transactions-overview-table" component={Paper}>
<Table>
<TableHead>
<TableRow>
@ -38,9 +35,9 @@ export const TransactionsOverViewTable = () => {
{data1.map((row, i) => (
<TableRow key={row.state + i}>
<TableCell align="center">
<Box className="state-wrapper">
<Box className="transactions-overview-table__state-wrapper">
<Box
className="state"
className="transactions-overview-table__state"
sx={{
bgcolor: row.color,
}}

6
payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx
View File

@ -10,9 +10,9 @@ import "./TransactionsOverView.scss";
export const TransactionsOverView = () => {
const router = useRouter();
return (
<Paper className="transaction-overview-paper" elevation={3}>
<Paper className="transaction-overview" elevation={3}>
{/* Title and All Transactions Button */}
<Box className="header">
<Box className="transaction-overview__header">
<Typography variant="h5" fontWeight="bold">
Transactions Overview (Last 24h)
</Typography>
@ -31,7 +31,7 @@ export const TransactionsOverView = () => {
</Box>
{/* Chart and Table */}
<Box className="chart-table-wrapper">
<Box className="transaction-overview__chart-table">
<PieCharts />
<TransactionsOverViewTable />
</Box>

2
payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss
View File

@ -1,4 +1,4 @@
.transactions-waiting-approval-paper {
.transactions-waiting-approval {
padding: 16px;
margin: 16px;
display: flex;

6
payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx
View File

@ -118,11 +118,7 @@ const transactions = [
export const TransactionsWaitingApproval = () => {
return (
<Paper
elevation={3}
className="transactions-waiting-approval-paper"
// sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
>
<Paper elevation={3} className="transactions-waiting-approval">
<Box sx={{ p: 3 }}>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<Typography variant="h5" fontWeight="bold">

4
payment-iq/app/features/WhatsNew/WhatsNew.scss
View File

@ -1,5 +1,5 @@
.whats-new-wrapper {
.icon {
.whats-new {
.whats-new__wifi-icon {
height: auto;
}
}

4
payment-iq/app/features/WhatsNew/WhatsNew.tsx
View File

@ -5,10 +5,10 @@ import "./WhatsNew.scss";
export const WhatsNew = () => {
return (
<Box className="whats-new-wrapper">
<Box className="whats-new">
<SectionCard
title="What’s New"
icon={<WifiIcon className="icon" fontSize="small" />}
icon={<WifiIcon className="whats-new__wifi-icon" fontSize="small" />}
items={[
{
title: "Sneak Peek – Discover the New Rules Hub Feature",

30
payment-iq/app/features/dashboard/header/Header.scss
View File

@ -1,17 +1,19 @@
.header-toolbar {
display: flex;
align-items: center;
.header {
.header__toolbar {
display: flex;
align-items: center;
.left-group {
width: 100px;
display: flex;
align-items: center;
gap: 12px; // optional spacing between menu and dropdown
}
.header__left-group {
width: 100px;
display: flex;
align-items: center;
gap: 12px; // optional spacing between menu and dropdown
}
.right-group {
margin-left: auto; // pushes it to the far right
display: flex;
align-items: center;
}
.header__right-group {
margin-left: auto; // pushes it to the far right
display: flex;
align-items: center;
}
}
}

9
payment-iq/app/features/dashboard/header/Header.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { AppBar, Toolbar, IconButton, Menu, MenuItem } from "@mui/material";
import { AppBar, Toolbar, IconButton } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import Dropdown from "./dropDown/DropDown";
import AccountMenu from "./accountMenu/AccountMenu";
@ -22,20 +22,21 @@ const Header = () => {
return (
<AppBar
className="header"
position="sticky"
color="transparent"
elevation={0}
sx={{ borderBottom: "1px solid #22242626" }}
>
<Toolbar className="header-toolbar">
<div className="left-group">
<Toolbar className="header__toolbar">
<div className="header__left-group">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Dropdown onChange={handleChange} />
</div>
<div className="right-group">
<div className="header__right-group">
<AccountMenu />
</div>
</Toolbar>

12
payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
View File

@ -1,8 +1,8 @@
.dropdown-container {
.link-container {
color: var(--text-secondary);
.link-text {
color: var(--text-primary);
.sidebar-dropdown__container {
.page-link__container {
color: var(--text-secondary);
.page-link__text {
color: var(--text-primary);
}
}
}
}

2
payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
View File

@ -41,7 +41,7 @@ export default function SidebarDropdown({ onChange }: Props) {
>
<em className="em">Select a page</em>
<MenuItem value="" disabled></MenuItem>
<div className="dropdown-container">
<div className="sidebar-dropdown__container">
{PAGE_LINKS.map((link: ISidebarLink) => (
<PageLinks key={link.path} title={link.title} path={link.path} />
))}

7
payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
View File

@ -1,6 +1,5 @@
"use client";
import React from "react";
import DashboardIcon from "@mui/icons-material/Dashboard";
import { PAGE_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
import PageLinks from "../../../components/PageLinks/PageLinks";
@ -8,11 +7,11 @@ import "./sideBar.scss";
const SideBar = () => {
return (
<aside className="sidebar-container">
<div className="sidebar-header">
<aside className="sidebar">
<div className="sidebar__header">
<span>
Betrise cashir{" "}
<DashboardIcon fontSize="small" className="sidebar-icon-spacing" />
<DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
</span>
</div>
{PAGE_LINKS.map((link) => (

24
payment-iq/app/features/dashboard/sidebar/sideBar.scss
View File

@ -1,4 +1,4 @@
.sidebar-container {
.sidebar {
position: fixed;
top: 0;
left: 0;
@ -11,17 +11,17 @@
padding: 16px;
z-index: 1100;
border-right: 1px solid #333;
}
.sidebar-header {
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
display: flex;
align-items: center;
color: white;
}
.sidebar__header {
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
display: flex;
align-items: center;
color: white;
.sidebar-icon-spacing {
margin-left: 8px;
.sidebar__icon-spacing {
margin-left: 8px;
}
}
}