From c76099dd3d848d12b0b8f8574fca4cc6c08e0bcb Mon Sep 17 00:00:00 2001 From: Petropoulos Evangelos Date: Mon, 30 Jun 2025 19:21:27 +0300 Subject: [PATCH 1/2] refactor scss --- .../app/features/AccountIQ/AccountIQ.scss | 7 +++ .../app/features/AccountIQ/AccountIQ.tsx | 31 ++++++------- .../DateRangePicker/DateRangePicker.scss | 12 +++++ .../DateRangePicker/DateRangePicker.tsx | 40 +++++++---------- .../features/Documentation/Documentation.scss | 5 +++ .../features/Documentation/Documentation.tsx | 24 +++++----- .../features/FetchReports/FetchReport.scss | 6 +++ .../features/FetchReports/FetchReports.tsx | 12 ++--- .../GeneralHealthCard/GeneralHealthCard.scss | 18 ++++++++ .../GeneralHealthCard/GeneralHealthCard.tsx | 43 +++--------------- .../components/StatItem.scss | 12 +++++ .../GeneralHealthCard/components/StatItem.tsx | 27 ++++++++++++ .../DashboardHomePage/DashboardHomePage.tsx | 22 +++++----- .../app/features/PieCharts/PieCharts.scss | 8 ++++ .../app/features/PieCharts/PieCharts.tsx | 25 +++++------ .../app/features/SectionCard/SectionCard.scss | 20 +++++++++ .../app/features/SectionCard/SectionCard.tsx | 20 +++------ .../TransactionsOverView.scss | 28 ++++++++++++ .../components/TransactionsOverViewTable.scss | 17 +++++++ .../components}/TransactionsOverViewTable.tsx | 24 ++++------ .../TransactionsOverview.tsx | 44 ++++--------------- .../TransactionsWaitingApproval.scss | 6 +++ .../TransactionsWaitingApproval.tsx | 4 +- .../app/features/WhatsNew/WhatsNew.scss | 5 +++ payment-iq/app/features/WhatsNew/WhatsNew.tsx | 44 ++++++++++--------- .../sidebar/SidebarLink.interfaces.ts | 2 +- .../features/dashboard/sidebar/sideBar.scss | 38 ++++++++-------- 27 files changed, 318 insertions(+), 226 deletions(-) create mode 100644 payment-iq/app/features/AccountIQ/AccountIQ.scss create mode 100644 payment-iq/app/features/DateRangePicker/DateRangePicker.scss create mode 100644 payment-iq/app/features/Documentation/Documentation.scss create mode 100644 payment-iq/app/features/FetchReports/FetchReport.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/components/StatItem.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx create mode 100644 payment-iq/app/features/PieCharts/PieCharts.scss create mode 100644 payment-iq/app/features/SectionCard/SectionCard.scss create mode 100644 payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss create mode 100644 payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss rename payment-iq/app/features/{TransactionsOverview => TransactionsOverView/components}/TransactionsOverViewTable.tsx (72%) create mode 100644 payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss create mode 100644 payment-iq/app/features/WhatsNew/WhatsNew.scss diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.scss b/payment-iq/app/features/AccountIQ/AccountIQ.scss new file mode 100644 index 0000000..8033663 --- /dev/null +++ b/payment-iq/app/features/AccountIQ/AccountIQ.scss @@ -0,0 +1,7 @@ +.account-iq-wrapper { + .icon { + font-weight: bold; + color: #4ecdc4; + margin-top: 4px; + } +} diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.tsx b/payment-iq/app/features/AccountIQ/AccountIQ.tsx index b909bc9..93fcff4 100644 --- a/payment-iq/app/features/AccountIQ/AccountIQ.tsx +++ b/payment-iq/app/features/AccountIQ/AccountIQ.tsx @@ -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 ( - AIQ} - items={[ - { title: "Automatically reconcile your transactions" }, - { title: "Live wallet balances from providers" }, - { title: "Gaming provider financial overviews" }, - { title: "Learn more" }, - ]} - /> + + AIQ} + items={[ + { title: "Automatically reconcile your transactions" }, + { title: "Live wallet balances from providers" }, + { title: "Gaming provider financial overviews" }, + { title: "Learn more" }, + ]} + /> + ); }; diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss new file mode 100644 index 0000000..2b67dcc --- /dev/null +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss @@ -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); + } + } +} diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx index afb9fa8..fda7ca1 100644 --- a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx @@ -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([ { startDate: new Date(), endDate: new Date(), - key: "selection" - } + key: "selection", + }, ]); - + const [anchorEl, setAnchorEl] = useState(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 ( - + @@ -64,21 +66,11 @@ export const DateRangePicker = () => { - - {format(range[0].startDate ?? new Date(), "PPP")} - {format(range[0].endDate ?? new Date(), "PPP")} + + {format(range[0].startDate ?? new Date(), "PPP")} -{" "} + {format(range[0].endDate ?? new Date(), "PPP")} ); -} \ No newline at end of file +}; diff --git a/payment-iq/app/features/Documentation/Documentation.scss b/payment-iq/app/features/Documentation/Documentation.scss new file mode 100644 index 0000000..e35f626 --- /dev/null +++ b/payment-iq/app/features/Documentation/Documentation.scss @@ -0,0 +1,5 @@ +.documentation-wrapper { + .icon { + height: auto; + } +} diff --git a/payment-iq/app/features/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx index 5932444..c8bc994 100644 --- a/payment-iq/app/features/Documentation/Documentation.tsx +++ b/payment-iq/app/features/Documentation/Documentation.tsx @@ -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 ( - } - items={[ - { title: "Provider Integration Overview" }, - { title: "APIs Introduction" }, - { title: "Documentation Overview" }, - { title: "How-Tos" }, - ]} - /> + + } + items={[ + { title: "Provider Integration Overview" }, + { title: "APIs Introduction" }, + { title: "Documentation Overview" }, + { title: "How-Tos" }, + ]} + /> + ); }; diff --git a/payment-iq/app/features/FetchReports/FetchReport.scss b/payment-iq/app/features/FetchReports/FetchReport.scss new file mode 100644 index 0000000..90601ab --- /dev/null +++ b/payment-iq/app/features/FetchReports/FetchReport.scss @@ -0,0 +1,6 @@ +.fetch-report-paper { + padding: 23px; + margin: 16px; + display: flex; + flex-direction: column; +} diff --git a/payment-iq/app/features/FetchReports/FetchReports.tsx b/payment-iq/app/features/FetchReports/FetchReports.tsx index e79f79b..54cd7dc 100644 --- a/payment-iq/app/features/FetchReports/FetchReports.tsx +++ b/payment-iq/app/features/FetchReports/FetchReports.tsx @@ -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 ( - + Fetch Report diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss new file mode 100644 index 0000000..742315e --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss @@ -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; + } +} diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx index df4778c..223183e 100644 --- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx @@ -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; -}) => ( - - - {label} - - - {value} - - - - {/* */} - {change} - - -); - export const GeneralHealthCard = () => { return ( - + - + General Health - + @@ -61,7 +32,7 @@ export const GeneralHealthCard = () => { - + {stats.map((item, i) => ( ))} diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss new file mode 100644 index 0000000..3282b07 --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss @@ -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; + } +} diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx new file mode 100644 index 0000000..6e176a1 --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx @@ -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; +}) => ( + + + {label} + + + {value} + + + + {/* */} + {change} + + +); diff --git a/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx b/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx index 5b59237..cd2aede 100644 --- a/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx +++ b/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx @@ -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 = () => { - + - ) -} + ); +}; diff --git a/payment-iq/app/features/PieCharts/PieCharts.scss b/payment-iq/app/features/PieCharts/PieCharts.scss new file mode 100644 index 0000000..13ddf83 --- /dev/null +++ b/payment-iq/app/features/PieCharts/PieCharts.scss @@ -0,0 +1,8 @@ +.pie-charts-wrapper { + width: 100%; + height: 300px; + + @media (min-width: 960px) { + width: 60%; + } +} diff --git a/payment-iq/app/features/PieCharts/PieCharts.tsx b/payment-iq/app/features/PieCharts/PieCharts.tsx index 4b59f89..93d57b6 100644 --- a/payment-iq/app/features/PieCharts/PieCharts.tsx +++ b/payment-iq/app/features/PieCharts/PieCharts.tsx @@ -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 ( - + { cy="50%" labelLine={false} label={renderCustomizedLabel} - outerRadius="80%" // Percentage-based radius + outerRadius="80%" // Percentage-based radius fill="#8884d8" dataKey="value" > {data.map((entry, index) => ( - + ))} - + ); -} - +}; diff --git a/payment-iq/app/features/SectionCard/SectionCard.scss b/payment-iq/app/features/SectionCard/SectionCard.scss new file mode 100644 index 0000000..d4743c4 --- /dev/null +++ b/payment-iq/app/features/SectionCard/SectionCard.scss @@ -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; + } + } +} diff --git a/payment-iq/app/features/SectionCard/SectionCard.tsx b/payment-iq/app/features/SectionCard/SectionCard.tsx index add14c1..c67040a 100644 --- a/payment-iq/app/features/SectionCard/SectionCard.tsx +++ b/payment-iq/app/features/SectionCard/SectionCard.tsx @@ -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) => ( - + - - + + {icon} {title} - + @@ -36,12 +35,7 @@ export const SectionCard = ({ title, icon, items }: ISectionCardProps) => ( {items.map((item, index) => ( - + ))} diff --git a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss new file mode 100644 index 0000000..94c08e5 --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss @@ -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; + } + } +} diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss new file mode 100644 index 0000000..0cddcae --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss @@ -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; + } + } +} diff --git a/payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx similarity index 72% rename from payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx rename to payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx index 7dac466..c45bfc1 100644 --- a/payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx @@ -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 ( - + @@ -33,22 +38,11 @@ export const TransactionsOverviewTable = () => { {data1.map((row, i) => ( - + {row.state} diff --git a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx index 0c705c0..a737657 100644 --- a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx +++ b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx @@ -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 ( - + {/* Title and All Transactions Button */} - + Transactions Overview (Last 24h) @@ -44,24 +31,9 @@ export const TransactionsOverview = () => { {/* Chart and Table */} - + - + ); diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss new file mode 100644 index 0000000..6e68250 --- /dev/null +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss @@ -0,0 +1,6 @@ +.transactions-waiting-approval-paper { + padding: 16px; + margin: 16px; + display: flex; + flex-direction: column; +} diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx index e3cfdb3..925e103 100644 --- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx @@ -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 ( diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.scss b/payment-iq/app/features/WhatsNew/WhatsNew.scss new file mode 100644 index 0000000..6125718 --- /dev/null +++ b/payment-iq/app/features/WhatsNew/WhatsNew.scss @@ -0,0 +1,5 @@ +.whats-new-wrapper { + .icon { + height: auto; + } +} diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.tsx b/payment-iq/app/features/WhatsNew/WhatsNew.tsx index 1f3aed3..d775d59 100644 --- a/payment-iq/app/features/WhatsNew/WhatsNew.tsx +++ b/payment-iq/app/features/WhatsNew/WhatsNew.tsx @@ -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 ( - } - 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" }, - ]} - /> + + } + 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" }, + ]} + /> + ); }; diff --git a/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts b/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts index 498ff08..8de910e 100644 --- a/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts +++ b/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts @@ -4,4 +4,4 @@ export interface ISidebarLink { title: string; path: string; icon?: ElementType; -} \ No newline at end of file +} diff --git a/payment-iq/app/features/dashboard/sidebar/sideBar.scss b/payment-iq/app/features/dashboard/sidebar/sideBar.scss index 6f500ae..7fd02c4 100644 --- a/payment-iq/app/features/dashboard/sidebar/sideBar.scss +++ b/payment-iq/app/features/dashboard/sidebar/sideBar.scss @@ -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; } From ae967a7e2d904d5c893604d1fc24d7512ad70928 Mon Sep 17 00:00:00 2001 From: Petropoulos Evangelos Date: Wed, 2 Jul 2025 00:03:42 +0300 Subject: [PATCH 2/2] fix comments --- .../app/components/PageLinks/PageLinks.scss | 39 +++++++++---------- .../app/components/PageLinks/PageLinks.tsx | 6 +-- .../app/features/AccountIQ/AccountIQ.scss | 4 +- .../app/features/AccountIQ/AccountIQ.tsx | 4 +- .../DateRangePicker/DateRangePicker.scss | 4 +- .../DateRangePicker/DateRangePicker.tsx | 7 +++- .../features/Documentation/Documentation.scss | 4 +- .../features/Documentation/Documentation.tsx | 6 ++- .../features/FetchReports/FetchReport.scss | 2 +- .../features/FetchReports/FetchReports.tsx | 2 +- .../GeneralHealthCard/GeneralHealthCard.scss | 8 ++-- .../GeneralHealthCard/GeneralHealthCard.tsx | 8 ++-- .../components/StatItem.scss | 4 +- .../GeneralHealthCard/components/StatItem.tsx | 4 +- .../app/features/PieCharts/PieCharts.scss | 2 +- .../app/features/PieCharts/PieCharts.tsx | 2 +- .../app/features/SectionCard/SectionCard.scss | 8 ++-- .../app/features/SectionCard/SectionCard.tsx | 8 ++-- .../TransactionsOverView.scss | 6 +-- .../components/TransactionsOverViewTable.scss | 6 +-- .../components/TransactionsOverViewTable.tsx | 9 ++--- .../TransactionsOverview.tsx | 6 +-- .../TransactionsWaitingApproval.scss | 2 +- .../TransactionsWaitingApproval.tsx | 6 +-- .../app/features/WhatsNew/WhatsNew.scss | 4 +- payment-iq/app/features/WhatsNew/WhatsNew.tsx | 4 +- .../app/features/dashboard/header/Header.scss | 30 +++++++------- .../app/features/dashboard/header/Header.tsx | 9 +++-- .../dashboard/header/dropDown/DropDown.scss | 12 +++--- .../dashboard/header/dropDown/DropDown.tsx | 2 +- .../features/dashboard/sidebar/Sidebar.tsx | 7 ++-- .../features/dashboard/sidebar/sideBar.scss | 24 ++++++------ 32 files changed, 123 insertions(+), 126 deletions(-) diff --git a/payment-iq/app/components/PageLinks/PageLinks.scss b/payment-iq/app/components/PageLinks/PageLinks.scss index 237f156..59baa21 100644 --- a/payment-iq/app/components/PageLinks/PageLinks.scss +++ b/payment-iq/app/components/PageLinks/PageLinks.scss @@ -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; + } } diff --git a/payment-iq/app/components/PageLinks/PageLinks.tsx b/payment-iq/app/components/PageLinks/PageLinks.tsx index a9785d7..d90e5f9 100644 --- a/payment-iq/app/components/PageLinks/PageLinks.tsx +++ b/payment-iq/app/components/PageLinks/PageLinks.tsx @@ -15,10 +15,10 @@ export default function PageLinks({ icon: Icon, }: IPageLinksProps) { return ( - - + + {Icon && } - {title} + {title} ); diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.scss b/payment-iq/app/features/AccountIQ/AccountIQ.scss index 8033663..827351c 100644 --- a/payment-iq/app/features/AccountIQ/AccountIQ.scss +++ b/payment-iq/app/features/AccountIQ/AccountIQ.scss @@ -1,5 +1,5 @@ -.account-iq-wrapper { - .icon { +.account-iq { + .account-iq__icon { font-weight: bold; color: #4ecdc4; margin-top: 4px; diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.tsx b/payment-iq/app/features/AccountIQ/AccountIQ.tsx index 93fcff4..c218a64 100644 --- a/payment-iq/app/features/AccountIQ/AccountIQ.tsx +++ b/payment-iq/app/features/AccountIQ/AccountIQ.tsx @@ -4,10 +4,10 @@ import "./AccountIQ.scss"; export const AccountIQ = () => { return ( - + AIQ} + icon={
AIQ
} items={[ { title: "Automatically reconcile your transactions" }, { title: "Live wallet balances from providers" }, diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss index 2b67dcc..1c00089 100644 --- a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss @@ -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; diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx index fda7ca1..e5e10e6 100644 --- a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx @@ -40,7 +40,7 @@ export const DateRangePicker = () => { const id = open ? "date-range-popover" : undefined; return ( - + { - + {format(range[0].startDate ?? new Date(), "PPP")} -{" "} {format(range[0].endDate ?? new Date(), "PPP")} diff --git a/payment-iq/app/features/Documentation/Documentation.scss b/payment-iq/app/features/Documentation/Documentation.scss index e35f626..71e4659 100644 --- a/payment-iq/app/features/Documentation/Documentation.scss +++ b/payment-iq/app/features/Documentation/Documentation.scss @@ -1,5 +1,5 @@ -.documentation-wrapper { - .icon { +.documentation { + .documentation__icon { height: auto; } } diff --git a/payment-iq/app/features/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx index c8bc994..f45683d 100644 --- a/payment-iq/app/features/Documentation/Documentation.tsx +++ b/payment-iq/app/features/Documentation/Documentation.tsx @@ -6,10 +6,12 @@ import "./Documentation.scss"; export const Documentation = () => { return ( - + } + icon={ + + } items={[ { title: "Provider Integration Overview" }, { title: "APIs Introduction" }, diff --git a/payment-iq/app/features/FetchReports/FetchReport.scss b/payment-iq/app/features/FetchReports/FetchReport.scss index 90601ab..25398d2 100644 --- a/payment-iq/app/features/FetchReports/FetchReport.scss +++ b/payment-iq/app/features/FetchReports/FetchReport.scss @@ -1,4 +1,4 @@ -.fetch-report-paper { +.fetch-report { padding: 23px; margin: 16px; display: flex; diff --git a/payment-iq/app/features/FetchReports/FetchReports.tsx b/payment-iq/app/features/FetchReports/FetchReports.tsx index 54cd7dc..fffcd60 100644 --- a/payment-iq/app/features/FetchReports/FetchReports.tsx +++ b/payment-iq/app/features/FetchReports/FetchReports.tsx @@ -31,7 +31,7 @@ export const FetchReport = () => { const isDownloadEnabled = state && psp && reportType; return ( - + Fetch Report diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss index 742315e..389d05b 100644 --- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss @@ -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; diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx index 223183e..2a6a0f8 100644 --- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx @@ -16,13 +16,13 @@ const stats = [ export const GeneralHealthCard = () => { return ( - + - + General Health - + @@ -32,7 +32,7 @@ export const GeneralHealthCard = () => { - + {stats.map((item, i) => ( ))} diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss index 3282b07..71aaa1f 100644 --- a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss @@ -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; diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx index 6e176a1..ccf619a 100644 --- a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx @@ -11,14 +11,14 @@ export const StatItem = ({ value: string | number; change: string; }) => ( - + {label} {value} - + {/* */} {change} diff --git a/payment-iq/app/features/PieCharts/PieCharts.scss b/payment-iq/app/features/PieCharts/PieCharts.scss index 13ddf83..aa280e7 100644 --- a/payment-iq/app/features/PieCharts/PieCharts.scss +++ b/payment-iq/app/features/PieCharts/PieCharts.scss @@ -1,4 +1,4 @@ -.pie-charts-wrapper { +.pie-charts { width: 100%; height: 300px; diff --git a/payment-iq/app/features/PieCharts/PieCharts.tsx b/payment-iq/app/features/PieCharts/PieCharts.tsx index 93d57b6..77a3ac8 100644 --- a/payment-iq/app/features/PieCharts/PieCharts.tsx +++ b/payment-iq/app/features/PieCharts/PieCharts.tsx @@ -39,7 +39,7 @@ const renderCustomizedLabel = ({ }; export const PieCharts = () => { return ( - + ( - + - - + + {icon} {title} - + diff --git a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss index 94c08e5..9494eec 100644 --- a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss +++ b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss @@ -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; diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss index 0cddcae..b58bd2b 100644 --- a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss @@ -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%; diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx index c45bfc1..dd16547 100644 --- a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx @@ -21,10 +21,7 @@ const data1 = [ export const TransactionsOverViewTable = () => { return ( - +
@@ -38,9 +35,9 @@ export const TransactionsOverViewTable = () => { {data1.map((row, i) => ( - + { const router = useRouter(); return ( - + {/* Title and All Transactions Button */} - + Transactions Overview (Last 24h) @@ -31,7 +31,7 @@ export const TransactionsOverView = () => { {/* Chart and Table */} - + diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss index 6e68250..d59b128 100644 --- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss @@ -1,4 +1,4 @@ -.transactions-waiting-approval-paper { +.transactions-waiting-approval { padding: 16px; margin: 16px; display: flex; diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx index 925e103..34ddc01 100644 --- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx @@ -118,11 +118,7 @@ const transactions = [ export const TransactionsWaitingApproval = () => { return ( - + diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.scss b/payment-iq/app/features/WhatsNew/WhatsNew.scss index 6125718..f90f636 100644 --- a/payment-iq/app/features/WhatsNew/WhatsNew.scss +++ b/payment-iq/app/features/WhatsNew/WhatsNew.scss @@ -1,5 +1,5 @@ -.whats-new-wrapper { - .icon { +.whats-new { + .whats-new__wifi-icon { height: auto; } } diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.tsx b/payment-iq/app/features/WhatsNew/WhatsNew.tsx index d775d59..28584d1 100644 --- a/payment-iq/app/features/WhatsNew/WhatsNew.tsx +++ b/payment-iq/app/features/WhatsNew/WhatsNew.tsx @@ -5,10 +5,10 @@ import "./WhatsNew.scss"; export const WhatsNew = () => { return ( - + } + icon={} items={[ { title: "Sneak Peek – Discover the New Rules Hub Feature", diff --git a/payment-iq/app/features/dashboard/header/Header.scss b/payment-iq/app/features/dashboard/header/Header.scss index 68bc362..f6ba43f 100644 --- a/payment-iq/app/features/dashboard/header/Header.scss +++ b/payment-iq/app/features/dashboard/header/Header.scss @@ -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; + } + } } diff --git a/payment-iq/app/features/dashboard/header/Header.tsx b/payment-iq/app/features/dashboard/header/Header.tsx index 6c2778f..2da283a 100644 --- a/payment-iq/app/features/dashboard/header/Header.tsx +++ b/payment-iq/app/features/dashboard/header/Header.tsx @@ -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 ( - -
+ +
-
+
diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss index e5f6908..447899b 100644 --- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss +++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss @@ -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); + } } - } } diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx index b1f4596..0e1c793 100644 --- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx +++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx @@ -41,7 +41,7 @@ export default function SidebarDropdown({ onChange }: Props) { > Select a page -
+
{PAGE_LINKS.map((link: ISidebarLink) => ( ))} diff --git a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx index 5c43b0f..381003f 100644 --- a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx +++ b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx @@ -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 ( -