Merge pull request #1 from mitchell131/datapicker

add date rate

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

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

payment-iq/app/components/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Box, Typography, Paper, Popover } from "@mui/material";
+import { DateRange, Range, DateRangeProps } from "react-date-range";
+import { format } from "date-fns";
+
+import "react-date-range/dist/styles.css";
+import "react-date-range/dist/theme/default.css";
+
+export const DateRangePicker = () => {
+  const [range, setRange] = useState<Range[]>([
+    {
+      startDate: new Date(),
+      endDate: new Date(),
+      key: "selection"
+    }
+  ]);
+  
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleSelect: DateRangeProps['onChange'] = (ranges) => {
+    if (ranges.selection) {
+      setRange([ranges.selection]);
+      if (ranges.selection.endDate !== ranges.selection.startDate) {
+        setAnchorEl(null);
+      }
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'date-range-popover' : undefined;
+
+  return (
+    <Box>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <Paper>
+          <DateRange
+            editableDateInputs={true}
+            onChange={handleSelect}
+            moveRangeOnFirstSelection={false}
+            ranges={range}
+          />
+        </Paper>
+      </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>
+      </Box>
+    </Box>
+  );
+}

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

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

payment-iq/app/components/FetchReports/FetchReports.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   Typography,
   FormControl,
@@ -10,45 +10,57 @@ import {
   Box,
   Paper,
   IconButton,
-} from '@mui/material';
+} from "@mui/material";
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
 
 export const FetchReport = () => {
-  const [state, setState] = useState('');
+  const [state, setState] = useState("");
-  const [psp, setPsp] = useState('');
+  const [psp, setPsp] = useState("");
-  const [reportType, setReportType] = useState('');
+  const [reportType, setReportType] = useState("");
 
   const handleDownload = () => {
     // Download logic goes here
-    alert('Report downloaded');
+    alert("Report downloaded");
   };
 
   const isDownloadEnabled = state && psp && reportType;
 
   return (
-    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+    <Paper
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+      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
         </Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <CalendarTodayIcon fontSize="small" />
-          <Typography variant="body2">Last 30 days</Typography>
+          <Typography variant="body2">
+            <DateRangePicker />
+          </Typography>
           <IconButton size="small">
             <MoreVertIcon fontSize="small" />
           </IconButton>
         </Box>
-
       </Box>
 
-
-
       <Stack spacing={2}>
         <FormControl fullWidth>
           <InputLabel>Select state (defaults to All)</InputLabel>
-          <Select value={state} onChange={(e) => setState(e.target.value)} label="Select state (defaults to All)">
+          <Select
+            value={state}
+            onChange={(e) => setState(e.target.value)}
+            label="Select state (defaults to All)"
+          >
             <MenuItem value="successful">Successful</MenuItem>
             <MenuItem value="failed">Failed</MenuItem>
             <MenuItem value="canceled">Canceled</MenuItem>
@@ -59,7 +71,11 @@ export const FetchReport = () => {
 
         <FormControl fullWidth>
           <InputLabel>Select PSPs (defaults to All)</InputLabel>
-          <Select value={psp} onChange={(e) => setPsp(e.target.value)} label="Select PSPs (defaults to All)">
+          <Select
+            value={psp}
+            onChange={(e) => setPsp(e.target.value)}
+            label="Select PSPs (defaults to All)"
+          >
             <MenuItem value="a1">A1</MenuItem>
             <MenuItem value="ahub">AHUB</MenuItem>
             <MenuItem value="aibms">AIBMS</MenuItem>
@@ -105,12 +121,6 @@ export const FetchReport = () => {
             <MenuItem value="ahub">AHUB</MenuItem>
             <MenuItem value="aibms">AIBMS</MenuItem>
 
-
-            <MenuItem value="a1">A1</MenuItem>
-            <MenuItem value="ahub">AHUB</MenuItem>
-            <MenuItem value="aibms">AIBMS</MenuItem>
-
-
             <MenuItem value="a1">A1</MenuItem>
             <MenuItem value="ahub">AHUB</MenuItem>
             <MenuItem value="aibms">AIBMS</MenuItem>
@@ -123,6 +133,9 @@ export const FetchReport = () => {
             <MenuItem value="ahub">AHUB</MenuItem>
             <MenuItem value="aibms">AIBMS</MenuItem>
 
+            <MenuItem value="a1">A1</MenuItem>
+            <MenuItem value="ahub">AHUB</MenuItem>
+            <MenuItem value="aibms">AIBMS</MenuItem>
 
             {/* Add more PSPs */}
           </Select>
@@ -130,8 +143,14 @@ export const FetchReport = () => {
 
         <FormControl fullWidth>
           <InputLabel>Select report type</InputLabel>
-          <Select value={reportType} onChange={(e) => setReportType(e.target.value)} label="Select report type">
+          <Select
-            <MenuItem value="allTransactionsReport">All Transactions Report</MenuItem>
+            value={reportType}
+            onChange={(e) => setReportType(e.target.value)}
+            label="Select report type"
+          >
+            <MenuItem value="allTransactionsReport">
+              All Transactions Report
+            </MenuItem>
             <MenuItem value="depositReport">Deposit Report</MenuItem>
             <MenuItem value="widthdrawReport">WithDraw Report</MenuItem>
             {/* Add more types */}
@@ -152,4 +171,3 @@ export const FetchReport = () => {
     </Paper>
   );
 };
-

payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx

@@ -1,33 +1,42 @@
-import {
+import { Box, Card, CardContent, Typography, IconButton } from "@mui/material";
-  Box,
+import MoreVertIcon from "@mui/icons-material/MoreVert";
-  Card,
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-  CardContent,
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-  Typography,
+import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
-  IconButton,
-  Divider,
-} 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 { ArrowDropUp } from '@mui/icons-material';
 
 const stats = [
-  { label: 'TOTAL', value: 5, change: '-84.85%' },
+  { label: "TOTAL", value: 5, change: "-84.85%" },
-  { label: 'SUCCESSFUL', value: 10, change: '100%' },
+  { label: "SUCCESSFUL", value: 10, change: "100%" },
-  { label: 'ACCEPTANCE RATE', value: '0%', change: '-100%' },
+  { label: "ACCEPTANCE RATE", value: "0%", change: "-100%" },
-  { label: 'AMOUNT', value: '€0.00', change: '-100%' },
+  { label: "AMOUNT", value: "€0.00", change: "-100%" },
-  { label: 'ATV', value: '€0.00', change: '-100%' },
+  { label: "ATV", value: "€0.00", change: "-100%" },
 ];
 
-const StatItem = ({ label, value, change }: { label: string, value: string | number, change: string }) => (
+const StatItem = ({
-  <Box sx={{ textAlign: 'center', px: 2 }}>
+  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' }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "error.main",
+      }}
+    >
       <ArrowDropDownIcon fontSize="small" />
       {/* <ArrowDropUp fontSize='small' /> */}
       <Typography variant="caption">{change}</Typography>
@@ -38,23 +47,22 @@ const StatItem = ({ label, value, change }: { label: string, value: string | num
 export const GeneralHealthCard = () => {
   return (
     <Card sx={{ borderRadius: 3, p: 2 }}>
-      <CardContent sx={{ pb: '16px !important' }}>
+      <CardContent>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+        <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
-          <Typography variant="subtitle1" fontWeight="bold">
+          <Typography variant="h5" fontWeight="bold">
             General Health
           </Typography>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <CalendarTodayIcon fontSize="small" />
-            <Typography variant="body2">Last 24h</Typography>
+            <Typography variant="body2">
+              <DateRangePicker />
+            </Typography>
             <IconButton size="small">
               <MoreVertIcon fontSize="small" />
             </IconButton>
           </Box>
         </Box>
-
+        <Box sx={{ display: "flex", justifyContent: "space-around", mt: 2 }}>
-        <Divider />
-
-        <Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
           {stats.map((item) => (
             <StatItem key={item.label} {...item} />
           ))}
@@ -62,5 +70,4 @@ export const GeneralHealthCard = () => {
       </CardContent>
     </Card>
   );
-}
+};
-

payment-iq/app/components/SectionCard/SectionCard.tsx

@@ -1,17 +1,32 @@
-import { CardContent, Typography, Divider, List, ListItem, ListItemText, Paper, Box, IconButton } from "@mui/material";
+import {
+  CardContent,
+  Typography,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  Paper,
+  Box,
+  IconButton,
+} from "@mui/material";
 
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { ISectionCardProps } from "./types";
 
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
-
+  <Paper
-export const SectionCard = ({ title, icon, items }) => (
+    elevation={3}
-  <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+    sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
+  >
     <CardContent>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{ display: "flex", gap: 1 }}>
           {icon}
-          <Typography variant="subtitle1" fontWeight="bold">{title}</Typography>
+          <Typography variant="h6" fontWeight="bold">
+            {title}
+          </Typography>
         </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           <IconButton size="small">
             <MoreVertIcon fontSize="small" />
           </IconButton>
@@ -33,5 +48,3 @@ export const SectionCard = ({ title, icon, items }) => (
     </CardContent>
   </Paper>
 );
-
-

payment-iq/app/components/SectionCard/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export interface ISectionItem {
+  title: string;
+  date?: string;
+}
+
+export interface ISectionCardProps {
+  title: string;
+  icon: ReactNode;
+  items: ISectionItem[];
+}

payment-iq/app/components/TransactionsOverview/TransactionsOverViewTable.tsx

@@ -7,14 +7,14 @@ import {
   TableRow,
   Paper,
   Box,
-  Button
+  Button,
-} from '@mui/material';
+} from "@mui/material";
 
 const data1 = [
-  { state: 'Success', count: 120, percentage: '60%', color: 'green' },
+  { state: "Success", count: 120, percentage: "60%", color: "green" },
-  { state: 'Pending', count: 50, percentage: '25%', color: 'orange' },
+  { state: "Pending", count: 50, percentage: "25%", color: "orange" },
-  { state: 'Failed', count: 20, percentage: '10%', color: 'red' },
+  { state: "Failed", count: 20, percentage: "10%", color: "red" },
-  { state: 'Other', count: 10, percentage: '5%', color: 'gray' }
+  { state: "Other", count: 10, percentage: "5%", color: "gray" },
 ];
 
 export const TransactionsOverviewTable = () => {
@@ -35,20 +35,20 @@ export const TransactionsOverviewTable = () => {
               <TableCell align="center">
                 <Box
                   sx={{
-                    display: 'flex',
+                    display: "flex",
-                    justifyContent: 'flex-start',
+                    justifyContent: "flex-start",
-                    alignItems: 'center',
+                    alignItems: "center",
-                    mx: 'auto',           // center the flexbox itself
+                    mx: "auto", // center the flexbox itself
-                    width: '73px'        // consistent width for alignment
+                    width: "73px", // consistent width for alignment
                   }}
                 >
                   <Box
                     sx={{
                       width: 10,
                       height: 10,
-                      borderRadius: '50%',
+                      borderRadius: "50%",
                       bgcolor: row.color,
-                      mr: 1
+                      mr: 1,
                     }}
                   />
                   {row.state}
@@ -68,4 +68,3 @@ export const TransactionsOverviewTable = () => {
     </TableContainer>
   );
 };
-

payment-iq/app/components/TransactionsOverview/TransactionsOverview.tsx

@@ -1,22 +1,40 @@
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
-import { Box, Button, IconButton, Paper, Typography } from "@mui/material"
+import { Box, Button, IconButton, Paper, Typography } from "@mui/material";
-import { PieCharts } from "../PieCharts/PieCharts"
+import { PieCharts } from "../PieCharts/PieCharts";
 
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { TransactionsOverviewTable } from "./TransactionsOverViewTable";
 
 export const TransactionsOverview = () => {
   const router = useRouter();
   return (
-    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+    <Paper
-
+      elevation={3}
+      sx={{
+        padding: "23px",
+        margin: 2,
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       {/* Title and All Transactions Button */}
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}>
+      <Box
-        <Typography variant="h6">
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 1,
+        }}
+      >
+        <Typography variant="h5" fontWeight="bold">
           Transactions Overview (Last 24h)
         </Typography>
         <Box>
-          <Button variant="contained" color="primary" onClick={() => router.push('dashboard/transactions')}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => router.push("dashboard/transactions")}
+          >
             All Transactions
           </Button>
           <IconButton size="small">
@@ -30,21 +48,21 @@ export const TransactionsOverview = () => {
         sx={{
           padding: 2,
           margin: 2,
-          display: 'flex',
+          display: "flex",
-          flexDirection: 'row',
+          flexDirection: "row",
           flexWrap: {
-            xs: 'wrap',   // Wrap on small screens
+            xs: "wrap", // Wrap on small screens
-            md: 'nowrap'  // No wrap on medium and up
+            md: "nowrap", // No wrap on medium and up
           },
           gap: {
             xs: 4, // Add spacing on small screens
-            md: 0         // No spacing on larger screens
+            md: 0, // No spacing on larger screens
-          }
+          },
         }}
       >
         <PieCharts />
         <TransactionsOverviewTable />
       </Box>
     </Paper>
-  )
+  );
-}
+};

payment-iq/app/components/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx

@@ -9,78 +9,162 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography
+  Typography,
-} from '@mui/material';
+} from "@mui/material";
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import CancelIcon from '@mui/icons-material/Cancel';
+import CancelIcon from "@mui/icons-material/Cancel";
 
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 
 const transactions = [
-
   {
-    id: '1049078821',
+    id: "1049078821",
-    user: '17',
+    user: "17",
-    created: '2025-06-17 16:45',
+    created: "2025-06-17 16:45",
-    type: 'BestPayWithdrawal',
+    type: "BestPayWithdrawal",
-    amount: '-787.49 TRY',
+    amount: "-787.49 TRY",
-    psp: 'BestPay'
+    psp: "BestPay",
   },
   {
-    id: '1049078822',
+    id: "1049078822",
-    user: '17',
+    user: "17",
-    created: '2025-06-17 16:45',
+    created: "2025-06-17 16:45",
-    type: 'BestPayWithdrawal',
+    type: "BestPayWithdrawal",
-    amount: '-787.49 TRY',
+    amount: "-787.49 TRY",
-    psp: 'BestPay'
+    psp: "BestPay",
   },
   {
-    id: '1049078823',
+    id: "1049078823",
-    user: '17',
+    user: "17",
-    created: '2025-06-17 16:45',
+    created: "2025-06-17 16:45",
-    type: 'BestPayWithdrawal',
+    type: "BestPayWithdrawal",
-    amount: '-787.49 TRY',
+    amount: "-787.49 TRY",
-    psp: 'BestPay'
+    psp: "BestPay",
   },
   {
-    id: '1049078824',
+    id: "1049078824",
-    user: '17',
+    user: "17",
-    created: '2025-06-17 16:45',
+    created: "2025-06-17 16:45",
-    type: 'BestPayWithdrawal',
+    type: "BestPayWithdrawal",
-    amount: '-787.49 TRY',
+    amount: "-787.49 TRY",
-    psp: 'BestPay'
+    psp: "BestPay",
-  }
+  },
+  {
+    id: "1049078821",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078822",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078823",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078824",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078821",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078822",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078823",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
+  {
+    id: "1049078824",
+    user: "17",
+    created: "2025-06-17 16:45",
+    type: "BestPayWithdrawal",
+    amount: "-787.49 TRY",
+    psp: "BestPay",
+  },
 ];
 
 export const TransactionsWaitingApproval = () => {
   return (
-
+    <Paper
-    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+      elevation={3}
-
+      sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
+    >
       <Box sx={{ p: 3 }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+        <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
-          <Typography variant="h6" fontWeight="bold">
+          <Typography variant="h5" fontWeight="bold">
             Transactions Waiting for Approval
           </Typography>
           <Box>
             <Button variant="outlined">All Pending Withdrawals</Button>
-
             <IconButton size="small">
               <MoreVertIcon fontSize="small" />
-            </IconButton>       </Box>
+            </IconButton>{" "}
+          </Box>
         </Box>
 
-        <TableContainer component={Paper}>
+        <TableContainer
+          component={Paper}
+          sx={{
+            maxHeight: 400, // Set desired height
+            overflow: "auto",
+          }}
+        >
           <Table>
             <TableHead>
               <TableRow>
-                <TableCell><strong>ID</strong></TableCell>
+                <TableCell>
-                <TableCell><strong>User</strong></TableCell>
+                  <strong>ID</strong>
-                <TableCell><strong>Created</strong></TableCell>
+                </TableCell>
-                <TableCell><strong>Type</strong></TableCell>
+                <TableCell>
-                <TableCell><strong>Amount</strong></TableCell>
+                  <strong>User</strong>
-                <TableCell><strong>PSP</strong></TableCell>
+                </TableCell>
-                <TableCell><strong>Action</strong></TableCell>
+                <TableCell>
+                  <strong>Created</strong>
+                </TableCell>
+                <TableCell>
+                  <strong>Type</strong>
+                </TableCell>
+                <TableCell>
+                  <strong>Amount</strong>
+                </TableCell>
+                <TableCell>
+                  <strong>PSP</strong>
+                </TableCell>
+                <TableCell>
+                  <strong>Action</strong>
+                </TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -108,4 +192,4 @@ export const TransactionsWaitingApproval = () => {
       </Box>
     </Paper>
   );
-}
+};

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

@@ -1,16 +1,26 @@
 import { SectionCard } from "../SectionCard/SectionCard";
-import WifiIcon from '@mui/icons-material/Wifi';
+import WifiIcon from "@mui/icons-material/Wifi";
 
 export const WhatsNew = () => {
   return (
     <SectionCard
       title="What’s New"
-      icon={<WifiIcon fontSize="small" />}
+      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: "Sneak Peek – Discover the New Rules Hub Feature",
-        { title: 'Introducing Our New Transactions and Rule Views', date: '23 Oct 2024' },
+          date: "13 May 2025",
-        { title: 'Introducing Our New Status Page', date: '09 Sept 2024' },
+        },
+        {
+          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" },
       ]}
     />
   );

payment-iq/app/components/pages/DashboardHomePage/DashboardHomePage.tsx

@@ -7,8 +7,6 @@ import { Documentation } from "../../Documentation/Documentation"
 import { AccountIQ } from "../../AccountIQ/AccountIQ"
 import { WhatsNew } from "../../WhatsNew/WhatsNew"
 
-
-
 export const DashboardHomePage = () => {
   return (
     <>
@@ -16,8 +14,8 @@ export const DashboardHomePage = () => {
         <GeneralHealthCard />
       </Box>
       <TransactionsOverview />
-      <TransactionsWaitingApproval />
       <FetchReport />
+      <TransactionsWaitingApproval />
       <Documentation />
       <AccountIQ />
       <WhatsNew />

payment-iq/package.json

@@ -12,11 +12,15 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.1.1",
-    "@mui/material": "^7.1.1",
+    "@mui/material": "^7.1.2",
     "@mui/x-data-grid": "^8.5.2",
+    "@mui/x-date-pickers": "^8.5.3",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
     "file-saver": "^2.0.5",
     "next": "15.3.3",
     "react": "^19.0.0",
+    "react-date-range": "^2.0.1",
     "react-dom": "^19.0.0",
     "recharts": "^2.15.3",
     "xlsx": "^0.18.5"
@@ -26,6 +30,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^19",
+    "@types/react-date-range": "^1.4.10",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.3",