refactor scss

payment-iq/app/features/AccountIQ/AccountIQ.scss

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

payment-iq/app/features/AccountIQ/AccountIQ.tsx

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

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);
+        }
+    }
+}

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<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',
+          vertical: "bottom",
-          horizontal: 'left',
+          horizontal: "left",
         }}
         transformOrigin={{
-          vertical: 'top',
+          vertical: "top",
-          horizontal: 'left',
+          horizontal: "left",
         }}
       >
         <Paper>
@@ -64,21 +66,11 @@ export const DateRangePicker = () => {
       </Popover>
 
       <Box>
-        <Typography 
+        <Typography onClick={handleClick} className="date-typo">
-          onClick={handleClick}
+          {format(range[0].startDate ?? new Date(), "PPP")} -{" "}
-          sx={{ 
+          {format(range[0].endDate ?? new Date(), "PPP")}
-            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>
       </Box>
     </Box>
   );
-}
+};

payment-iq/app/features/Documentation/Documentation.scss

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

payment-iq/app/features/Documentation/Documentation.tsx

@@ -1,12 +1,15 @@
 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 (
+    <Box className="documentation-wrapper">
       <SectionCard
         title="Documentation"
-      icon={<DescriptionIcon fontSize="small" sx={{ height: "auto" }} />}
+        icon={<DescriptionIcon className="icon" fontSize="small" />}
         items={[
           { title: "Provider Integration Overview" },
           { title: "APIs Introduction" },
@@ -14,5 +17,6 @@ export const Documentation = () => {
           { title: "How-Tos" },
         ]}
       />
+    </Box>
   );
 };

payment-iq/app/features/FetchReports/FetchReport.scss

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

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 (
-    <Paper
+    <Paper className="fetch-report-paper" elevation={3}>
-      elevation={3}
-      sx={{
-        padding: "23px",
-        margin: 2,
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
       <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
         <Typography variant="h6" fontWeight="bold">
           Fetch Report

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;
+    }
+}

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;
-}) => (
-  <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} />
           ))}

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;
+    }
+}

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;
+}) => (
+  <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>
+);

payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx

@@ -1,11 +1,11 @@
-import { Box } from "@mui/material"
+import { Box } from "@mui/material";
-import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard"
+import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard";
-import { TransactionsOverview } from "../../TransactionsOverview/TransactionsOverview"
+import { TransactionsOverView } from "../../TransactionsOverView/TransactionsOverView";
-import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval"
+import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval";
-import { FetchReport } from "../../FetchReports/FetchReports"
+import { FetchReport } from "../../FetchReports/FetchReports";
-import { Documentation } from "../../Documentation/Documentation"
+import { Documentation } from "../../Documentation/Documentation";
-import { AccountIQ } from "../../AccountIQ/AccountIQ"
+import { AccountIQ } from "../../AccountIQ/AccountIQ";
-import { WhatsNew } from "../../WhatsNew/WhatsNew"
+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 />
     </>
-  )
+  );
-}
+};

payment-iq/app/features/PieCharts/PieCharts.scss

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

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"];
@@ -39,12 +39,7 @@ const renderCustomizedLabel = ({
 };
 export const PieCharts = () => {
   return (
-    <Box sx={{
+    <Box className="pie-charts-wrapper">
-      width: {
-        xs: '100%',
-        md: '60%'
-      }, height: '300px'
-    }}>
       <ResponsiveContainer width="100%" height="100%">
         <PieChart>
           <Pie
@@ -58,12 +53,14 @@ export const PieCharts = () => {
             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>
   );
-}
+};
-

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;
+        }
+    }
+}

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) => (
-  <Paper
+  <Paper className="section-card-paper" elevation={3}>
-    elevation={3}
-    sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
-  >
     <CardContent>
-      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
+      <Box className="header">
-        <Box sx={{ display: "flex", gap: 1 }}>
+        <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
+            <ListItemText primary={item.title} secondary={item.date} />
-              primary={item.title}
-              secondary={item.date}
-              primaryTypographyProps={{ fontSize: 14 }}
-              secondaryTypographyProps={{ fontSize: 12 }}
-            />
           </ListItem>
         ))}
       </List>

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;
+        }
+    }
+}

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;
+        }
+    }
+}

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 (
-    <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 className="state-wrapper">
                   <Box
+                    className="state"
                     sx={{
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    alignItems: "center",
-                    mx: "auto", // center the flexbox itself
-                    width: "73px", // consistent width for alignment
-                  }}
-                >
-                  <Box
-                    sx={{
-                      width: 10,
-                      height: 10,
-                      borderRadius: "50%",
                       bgcolor: row.color,
-                      mr: 1,
                     }}
                   />
                   {row.state}

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 (
-    <Paper
+    <Paper className="transaction-overview-paper" elevation={3}>
-      elevation={3}
-      sx={{
-        padding: "23px",
-        margin: 2,
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
       {/* Title and All Transactions Button */}
-      <Box
+      <Box className="header">
-        sx={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          px: 1,
-        }}
-      >
         <Typography variant="h5" fontWeight="bold">
           Transactions Overview (Last 24h)
         </Typography>
@@ -44,24 +31,9 @@ export const TransactionsOverview = () => {
       </Box>
 
       {/* Chart and Table */}
-      <Box
+      <Box className="chart-table-wrapper">
-        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
-          },
-        }}
-      >
         <PieCharts />
-        <TransactionsOverviewTable />
+        <TransactionsOverViewTable />
       </Box>
     </Paper>
   );

payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss

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

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 (
     <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 }}>

payment-iq/app/features/WhatsNew/WhatsNew.scss

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

payment-iq/app/features/WhatsNew/WhatsNew.tsx

@@ -1,11 +1,14 @@
+import { Box } from "@mui/material";
 import { SectionCard } from "../SectionCard/SectionCard";
 import WifiIcon from "@mui/icons-material/Wifi";
+import "./WhatsNew.scss";
 
 export const WhatsNew = () => {
   return (
+    <Box className="whats-new-wrapper">
       <SectionCard
         title="What’s New"
-      icon={<WifiIcon fontSize="small" sx={{ height: "auto" }} />}
+        icon={<WifiIcon className="icon" fontSize="small" />}
         items={[
           {
             title: "Sneak Peek – Discover the New Rules Hub Feature",
@@ -23,5 +26,6 @@ export const WhatsNew = () => {
           { title: "Introducing Our New Status Page", date: "09 Sept 2024" },
         ]}
       />
+    </Box>
   );
 };