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

refactor scss

Browse Source
This commit is contained in:
Petropoulos Evangelos 2025-06-30 19:21:27 +03:00
parent 9a8d00e8ff
commit c76099dd3d
27 changed files with 318 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
payment-iq/app/features/AccountIQ/AccountIQ.scss Normal file
View File

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

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

@ -1,23 +1,20 @@
import { styled } from "@mui/material";
import { Box } from "@mui/material";
import { SectionCard } from "../SectionCard/SectionCard";
const AccountIQIcon = styled("div")(() => ({
fontWeight: "bold",
color: "#4ecdc4",
marginTop: "4px",
}));
import "./AccountIQ.scss";
export const AccountIQ = () => {
return (
<SectionCard
title="AccountIQ"
icon={<AccountIQIcon>AIQ</AccountIQIcon>}
items={[
{ title: "Automatically reconcile your transactions" },
{ title: "Live wallet balances from providers" },
{ title: "Gaming provider financial overviews" },
{ title: "Learn more" },
]}
/>
<Box className="account-iq-wrapper">
<SectionCard
title="AccountIQ"
icon={<div className="icon">AIQ</div>}
items={[
{ title: "Automatically reconcile your transactions" },
{ title: "Live wallet balances from providers" },
{ title: "Gaming provider financial overviews" },
{ title: "Learn more" },
]}
/>
</Box>
);
};

12
payment-iq/app/features/DateRangePicker/DateRangePicker.scss Normal file
View File

@ -0,0 +1,12 @@
.date-range-picker-wrapper {
.date-typo {
font-size: 0.875rem;
cursor: pointer;
padding: 8px;
border-radius: 4px;
&:hover {
background-color: rgba(0, 0, 0, 0.04);
}
}
}

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

@ -6,18 +6,20 @@ import { format } from "date-fns";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
import "./DateRangePicker.scss";
export const DateRangePicker = () => {
const [range, setRange] = useState<Range[]>([
{
startDate: new Date(),
endDate: new Date(),
key: "selection"
}
key: "selection",
},
]);
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
const handleSelect: DateRangeProps['onChange'] = (ranges) => {
const handleSelect: DateRangeProps["onChange"] = (ranges) => {
if (ranges.selection) {
setRange([ranges.selection]);
if (ranges.selection.endDate !== ranges.selection.startDate) {
@ -35,22 +37,22 @@ export const DateRangePicker = () => {
};
const open = Boolean(anchorEl);
const id = open ? 'date-range-popover' : undefined;
const id = open ? "date-range-popover" : undefined;
return (
<Box>
<Box className="date-range-picker-wrapper">
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
vertical: "bottom",
horizontal: "left",
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
vertical: "top",
horizontal: "left",
}}
>
<Paper>
@ -64,21 +66,11 @@ export const DateRangePicker = () => {
</Popover>
<Box>
<Typography
onClick={handleClick}
sx={{
fontSize: '0.875rem',
cursor: 'pointer',
p: 1,
borderRadius: 1,
'&:hover': {
backgroundColor: 'action.hover',
}
}}
>
{format(range[0].startDate ?? new Date(), "PPP")} - {format(range[0].endDate ?? new Date(), "PPP")}
<Typography onClick={handleClick} className="date-typo">
{format(range[0].startDate ?? new Date(), "PPP")} -{" "}
{format(range[0].endDate ?? new Date(), "PPP")}
</Typography>
</Box>
</Box>
);
}
};

5
payment-iq/app/features/Documentation/Documentation.scss Normal file
View File

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

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

@ -1,18 +1,22 @@
import React from "react";
import DescriptionIcon from "@mui/icons-material/Description";
import { SectionCard } from "../SectionCard/SectionCard";
import { Box } from "@mui/material";
import "./Documentation.scss";
export const Documentation = () => {
return (
<SectionCard
title="Documentation"
icon={<DescriptionIcon fontSize="small" sx={{ height: "auto" }} />}
items={[
{ title: "Provider Integration Overview" },
{ title: "APIs Introduction" },
{ title: "Documentation Overview" },
{ title: "How-Tos" },
]}
/>
<Box className="documentation-wrapper">
<SectionCard
title="Documentation"
icon={<DescriptionIcon className="icon" fontSize="small" />}
items={[
{ title: "Provider Integration Overview" },
{ title: "APIs Introduction" },
{ title: "Documentation Overview" },
{ title: "How-Tos" },
]}
/>
</Box>
);
};

6
payment-iq/app/features/FetchReports/FetchReport.scss Normal file
View File

@ -0,0 +1,6 @@
.fetch-report-paper {
padding: 23px;
margin: 16px;
display: flex;
flex-direction: column;
}

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

@ -16,6 +16,8 @@ import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
import "./FetchReport.scss";
export const FetchReport = () => {
const [state, setState] = useState("");
const [psp, setPsp] = useState("");
@ -29,15 +31,7 @@ export const FetchReport = () => {
const isDownloadEnabled = state && psp && reportType;
return (
<Paper
elevation={3}
sx={{
padding: "23px",
margin: 2,
display: "flex",
flexDirection: "column",
}}
>
<Paper className="fetch-report-paper" elevation={3}>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<Typography variant="h6" fontWeight="bold">
Fetch Report

18
payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss Normal file
View File

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

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

@ -1,8 +1,10 @@
import { Box, Card, CardContent, Typography, IconButton } from "@mui/material";
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 { StatItem } from "./components/StatItem";
import "./GeneralHealthCard.scss";
const stats = [
{ label: "TOTAL", value: 5, change: "-84.85%" },
@ -12,46 +14,15 @@ const stats = [
{ label: "ATV", value: "€0.00", change: "-100%" },
];
const StatItem = ({
label,
value,
change,
}: {
label: string;
value: string | number;
change: string;
}) => (
<Box sx={{ textAlign: "center", px: 2 }}>
<Typography variant="body2" fontWeight="bold" color="text.secondary">
{label}
</Typography>
<Typography variant="h6" fontWeight="bold" mt={0.5}>
{value}
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "error.main",
}}
>
<ArrowDropDownIcon fontSize="small" />
{/* <ArrowDropUp fontSize='small' /> */}
<Typography variant="caption">{change}</Typography>
</Box>
</Box>
);
export const GeneralHealthCard = () => {
return (
<Card sx={{ borderRadius: 3, p: 2 }}>
<Card className="general-health-card-wrapper">
<CardContent>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<Box className="header">
<Typography variant="h5" fontWeight="bold">
General Health
</Typography>
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<Box className="right-side">
<CalendarTodayIcon fontSize="small" />
<Typography variant="body2">
<DateRangePicker />
@ -61,7 +32,7 @@ export const GeneralHealthCard = () => {
</IconButton>
</Box>
</Box>
<Box sx={{ display: "flex", justifyContent: "space-around", mt: 2 }}>
<Box className="stat-items">
{stats.map((item, i) => (
<StatItem key={item.label + i} {...item} />
))}

12
payment-iq/app/features/GeneralHealthCard/components/StatItem.scss Normal file
View File

@ -0,0 +1,12 @@
.static-item-wrapper {
text-align: center;
padding-left: 16px;
padding-right: 16px;
.percentage {
display: flex;
align-items: center;
justify-content: center;
color: red;
}
}

27
payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box, Typography } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import "./StatItem.scss";
export const StatItem = ({
label,
value,
change,
}: {
label: string;
value: string | number;
change: string;
}) => (
<Box className="static-item-wrapper">
<Typography variant="body2" fontWeight="bold" color="text.secondary">
{label}
</Typography>
<Typography variant="h6" fontWeight="bold" mt={0.5}>
{value}
</Typography>
<Box className="percentage">
<ArrowDropDownIcon fontSize="small" />
{/* <ArrowDropUp fontSize='small' /> */}
<Typography variant="caption">{change}</Typography>
</Box>
</Box>
);

22
payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx
View File

@ -1,11 +1,11 @@
import { Box } from "@mui/material"
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard"
import { TransactionsOverview } from "../../TransactionsOverview/TransactionsOverview"
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval"
import { FetchReport } from "../../FetchReports/FetchReports"
import { Documentation } from "../../Documentation/Documentation"
import { AccountIQ } from "../../AccountIQ/AccountIQ"
import { WhatsNew } from "../../WhatsNew/WhatsNew"
import { Box } from "@mui/material";
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard";
import { TransactionsOverView } from "../../TransactionsOverView/TransactionsOverView";
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval";
import { FetchReport } from "../../FetchReports/FetchReports";
import { Documentation } from "../../Documentation/Documentation";
import { AccountIQ } from "../../AccountIQ/AccountIQ";
import { WhatsNew } from "../../WhatsNew/WhatsNew";
export const DashboardHomePage = () => {
return (
@ -13,12 +13,12 @@ export const DashboardHomePage = () => {
<Box sx={{ p: 2 }}>
<GeneralHealthCard />
</Box>
<TransactionsOverview />
<TransactionsOverView />
<FetchReport />
<TransactionsWaitingApproval />
<Documentation />
<AccountIQ />
<WhatsNew />
</>
)
}
);
};

8
payment-iq/app/features/PieCharts/PieCharts.scss Normal file
View File

@ -0,0 +1,8 @@
.pie-charts-wrapper {
width: 100%;
height: 300px;
@media (min-width: 960px) {
width: 60%;
}
}

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

@ -1,12 +1,12 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Box } from "@mui/material";
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
import "./PieCharts.scss";
const data = [
{ name: "Group A", value: 100 },
{ name: "Group B", value: 200 },
{ name: "Group C", value: 400 },
{ name: "Group D", value: 300 }
{ name: "Group D", value: 300 },
];
const COLORS = ["#4caf50", "#ff9800", "#f44336", "#9e9e9e"];
@ -19,7 +19,7 @@ const renderCustomizedLabel = ({
innerRadius,
outerRadius,
percent,
// index
// index
}: any) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
@ -39,12 +39,7 @@ const renderCustomizedLabel = ({
};
export const PieCharts = () => {
return (
<Box sx={{
width: {
xs: '100%',
md: '60%'
}, height: '300px'
}}>
<Box className="pie-charts-wrapper">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
@ -53,17 +48,19 @@ export const PieCharts = () => {
cy="50%"
labelLine={false}
label={renderCustomizedLabel}
outerRadius="80%" // Percentage-based radius
outerRadius="80%" // Percentage-based radius
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</Box >
</Box>
);
}
};

20
payment-iq/app/features/SectionCard/SectionCard.scss Normal file
View File

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

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

@ -13,20 +13,19 @@ import {
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { ISectionCardProps } from "./types";
import "./SectionCard.scss";
export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
<Paper
elevation={3}
sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
>
<Paper className="section-card-paper" elevation={3}>
<CardContent>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<Box sx={{ display: "flex", gap: 1 }}>
<Box className="header">
<Box className="title">
{icon}
<Typography variant="h6" fontWeight="bold">
{title}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<Box className="icon-wrapper">
<IconButton size="small">
<MoreVertIcon fontSize="small" />
</IconButton>
@ -36,12 +35,7 @@ export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
<List dense disablePadding>
{items.map((item, index) => (
<ListItem key={item.title + index} disableGutters>
<ListItemText
primary={item.title}
secondary={item.date}
primaryTypographyProps={{ fontSize: 14 }}
secondaryTypographyProps={{ fontSize: 12 }}
/>
<ListItemText primary={item.title} secondary={item.date} />
</ListItem>
))}
</List>

28
payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss Normal file
View File

@ -0,0 +1,28 @@
.transaction-overview-paper {
padding: 23px;
margin: 16px;
display: flex;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 8px;
padding-right: 8px;
}
.chart-table-wrapper {
padding: 16px;
margin: 16px;
display: flex;
flex-direction: row;
gap: 32px;
flex-wrap: wrap;
@media (min-width: 960px) {
flex-wrap: nowrap;
gap: 0;
}
}
}

17
payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss Normal file
View File

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

24
payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx → payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx
View File

@ -10,6 +10,8 @@ import {
Button,
} from "@mui/material";
import "./TransactionsOverViewTable.scss";
const data1 = [
{ state: "Success", count: 120, percentage: "60%", color: "green" },
{ state: "Pending", count: 50, percentage: "25%", color: "orange" },
@ -17,9 +19,12 @@ const data1 = [
{ state: "Other", count: 10, percentage: "5%", color: "gray" },
];
export const TransactionsOverviewTable = () => {
export const TransactionsOverViewTable = () => {
return (
<TableContainer component={Paper}>
<TableContainer
className="transactions-overview-table-wrapper"
component={Paper}
>
<Table>
<TableHead>
<TableRow>
@ -33,22 +38,11 @@ export const TransactionsOverviewTable = () => {
{data1.map((row, i) => (
<TableRow key={row.state + i}>
<TableCell align="center">
<Box
sx={{
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
mx: "auto", // center the flexbox itself
width: "73px", // consistent width for alignment
}}
>
<Box className="state-wrapper">
<Box
className="state"
sx={{
width: 10,
height: 10,
borderRadius: "50%",
bgcolor: row.color,
mr: 1,
}}
/>
{row.state}

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

@ -3,29 +3,16 @@ import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
import { PieCharts } from "../PieCharts/PieCharts";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { TransactionsOverviewTable } from "./TransactionsOverViewTable";
import { TransactionsOverViewTable } from "./components/TransactionsOverViewTable";
export const TransactionsOverview = () => {
import "./TransactionsOverView.scss";
export const TransactionsOverView = () => {
const router = useRouter();
return (
<Paper
elevation={3}
sx={{
padding: "23px",
margin: 2,
display: "flex",
flexDirection: "column",
}}
>
<Paper className="transaction-overview-paper" elevation={3}>
{/* Title and All Transactions Button */}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
px: 1,
}}
>
<Box className="header">
<Typography variant="h5" fontWeight="bold">
Transactions Overview (Last 24h)
</Typography>
@ -44,24 +31,9 @@ export const TransactionsOverview = () => {
</Box>
{/* Chart and Table */}
<Box
sx={{
padding: 2,
margin: 2,
display: "flex",
flexDirection: "row",
flexWrap: {
xs: "wrap", // Wrap on small screens
md: "nowrap", // No wrap on medium and up
},
gap: {
xs: 4, // Add spacing on small screens
md: 0, // No spacing on larger screens
},
}}
>
<Box className="chart-table-wrapper">
<PieCharts />
<TransactionsOverviewTable />
<TransactionsOverViewTable />
</Box>
</Paper>
);

6
payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss Normal file
View File

@ -0,0 +1,6 @@
.transactions-waiting-approval-paper {
padding: 16px;
margin: 16px;
display: flex;
flex-direction: column;
}

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

@ -16,6 +16,7 @@ import CancelIcon from "@mui/icons-material/Cancel";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import "./TransactionsWaitingApproval.scss";
const transactions = [
{
id: "1049078821",
@ -119,7 +120,8 @@ export const TransactionsWaitingApproval = () => {
return (
<Paper
elevation={3}
sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
className="transactions-waiting-approval-paper"
// sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
>
<Box sx={{ p: 3 }}>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>

5
payment-iq/app/features/WhatsNew/WhatsNew.scss Normal file
View File

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

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

@ -1,27 +1,31 @@
import { Box } from "@mui/material";
import { SectionCard } from "../SectionCard/SectionCard";
import WifiIcon from "@mui/icons-material/Wifi";
import "./WhatsNew.scss";
export const WhatsNew = () => {
return (
<SectionCard
title="What’s New"
icon={<WifiIcon fontSize="small" sx={{ height: "auto" }} />}
items={[
{
title: "Sneak Peek – Discover the New Rules Hub Feature",
date: "13 May 2025",
},
{
title:
"New security measures for anonymizing sensitive configuration values, effective December 2nd",
date: "31 Oct 2024",
},
{
title: "Introducing Our New Transactions and Rule Views",
date: "23 Oct 2024",
},
{ title: "Introducing Our New Status Page", date: "09 Sept 2024" },
]}
/>
<Box className="whats-new-wrapper">
<SectionCard
title="What’s New"
icon={<WifiIcon className="icon" fontSize="small" />}
items={[
{
title: "Sneak Peek – Discover the New Rules Hub Feature",
date: "13 May 2025",
},
{
title:
"New security measures for anonymizing sensitive configuration values, effective December 2nd",
date: "31 Oct 2024",
},
{
title: "Introducing Our New Transactions and Rule Views",
date: "23 Oct 2024",
},
{ title: "Introducing Our New Status Page", date: "09 Sept 2024" },
]}
/>
</Box>
);
};

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

@ -1,27 +1,27 @@
.sidebar-container {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
background-color: var(--background-primary);
color: white;
display: flex;
flex-direction: column;
padding: 16px;
z-index: 1100;
border-right: 1px solid #333;
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
background-color: var(--background-primary);
color: white;
display: flex;
flex-direction: column;
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;
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
display: flex;
align-items: center;
color: white;
}
.sidebar-icon-spacing {
margin-left: 8px;
margin-left: 8px;
}