Added Approve Page

app/components/AccountIQ/AccountIQ.tsx

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material"
+import { SectionCard } from "../SectionCard/SectionCard"
+
+const AccountIQIcon = styled('div')(({ theme }) => ({
+  fontWeight: 'bold',
+  color: '#4ecdc4',
+  fontSize: '1rem',
+  marginRight: theme.spacing(1),
+}));
+
+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' },
+      ]}
+    />
+  )
+}

app/components/Documentation/Documentation.tsx

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

app/components/FetchReports/FetchReports.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Button,
+  Stack,
+  Box,
+  Paper,
+  IconButton,
+} from '@mui/material';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+export const FetchReport = () => {
+  const [state, setState] = useState('');
+  const [psp, setPsp] = useState('');
+  const [reportType, setReportType] = useState('');
+
+  const handleDownload = () => {
+    // Download logic goes here
+    alert('Report downloaded');
+  };
+
+  const isDownloadEnabled = state && psp && reportType;
+
+  return (
+    <Paper elevation={3} sx={{ padding: 2, 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 }}>
+          <CalendarTodayIcon fontSize="small" />
+          <Typography variant="body2">Last 30 days</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)">
+            <MenuItem value="successful">Successful</MenuItem>
+            <MenuItem value="failed">Failed</MenuItem>
+            <MenuItem value="canceled">Canceled</MenuItem>
+
+            {/* Add more states */}
+          </Select>
+        </FormControl>
+
+        <FormControl fullWidth>
+          <InputLabel>Select PSPs (defaults to All)</InputLabel>
+          <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>
+
+            <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>
+
+            <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>
+
+            <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>
+
+            <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>
+            <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>
+
+            <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>
+
+
+            <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>
+
+            <MenuItem value="a1">A1</MenuItem>
+            <MenuItem value="ahub">AHUB</MenuItem>
+            <MenuItem value="aibms">AIBMS</MenuItem>
+
+
+            {/* Add more PSPs */}
+          </Select>
+        </FormControl>
+
+        <FormControl fullWidth>
+          <InputLabel>Select report type</InputLabel>
+          <Select 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 */}
+          </Select>
+        </FormControl>
+
+        <Box textAlign="center" mt={2}>
+          <Button
+            variant="outlined"
+            onClick={handleDownload}
+            disabled={!isDownloadEnabled}
+            sx={{ minWidth: 200 }}
+          >
+            Download Report
+          </Button>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+};
+

app/components/GeneralHealthCard/GeneralHealthCard.tsx

@@ -0,0 +1,66 @@
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  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: 'SUCCESSFUL', value: 10, change: '100%' },
+  { label: 'ACCEPTANCE RATE', value: '0%', change: '-100%' },
+  { label: 'AMOUNT', value: '€0.00', change: '-100%' },
+  { 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 }}>
+      <CardContent sx={{ pb: '16px !important' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+          <Typography variant="subtitle1" fontWeight="bold">
+            General Health
+          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <CalendarTodayIcon fontSize="small" />
+            <Typography variant="body2">Last 24h</Typography>
+            <IconButton size="small">
+              <MoreVertIcon fontSize="small" />
+            </IconButton>
+          </Box>
+        </Box>
+
+        <Divider />
+
+        <Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
+          {stats.map((item) => (
+            <StatItem key={item.label} {...item} />
+          ))}
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}
+

app/components/PieCharts/PieCharts.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box } from "@mui/material";
+import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
+
+const data = [
+  { name: "Group A", value: 100 },
+  { name: "Group B", value: 200 },
+  { name: "Group C", value: 400 },
+  { name: "Group D", value: 300 }
+];
+
+const COLORS = ["#4caf50", "#ff9800", "#f44336", "#9e9e9e"];
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+//   index
+}: any) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="white"
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="central"
+    >
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+export const PieCharts = () => {
+  return (
+    <Box sx={{
+      width: {
+        xs: '100%',
+        md: '60%'
+      }, height: '300px'
+    }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={renderCustomizedLabel}
+            outerRadius="80%"  // Percentage-based radius
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+    </Box >
+  );
+}
+

app/components/SectionCard/SectionCard.tsx

@@ -0,0 +1,37 @@
+import { CardContent, Typography, Divider, List, ListItem, ListItemText, Paper, Box, IconButton } from "@mui/material";
+
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+export const SectionCard = ({ title, icon, items }) => (
+  <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+    <CardContent>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+        <Box sx={{ display: 'flex' }}>
+          {icon}
+          <Typography variant="subtitle1" fontWeight="bold">{title}</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <IconButton size="small">
+            <MoreVertIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      </Box >
+      <Divider />
+      <List dense disablePadding>
+        {items.map((item, index) => (
+          <ListItem key={index} disableGutters>
+            <ListItemText
+              primary={item.title}
+              secondary={item.date}
+              primaryTypographyProps={{ fontSize: 14 }}
+              secondaryTypographyProps={{ fontSize: 12 }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </CardContent>
+  </Paper>
+);
+
+

app/components/TransactionsOverview/TransactionsOverViewTable.tsx

@@ -0,0 +1,71 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Box,
+  Button
+} from '@mui/material';
+
+const data1 = [
+  { state: 'Success', count: 120, percentage: '60%', color: 'green' },
+  { state: 'Pending', count: 50, percentage: '25%', color: 'orange' },
+  { state: 'Failed', count: 20, percentage: '10%', color: 'red' },
+  { state: 'Other', count: 10, percentage: '5%', color: 'gray' }
+];
+
+export const TransactionsOverviewTable = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">State</TableCell>
+            <TableCell align="center">Count</TableCell>
+            <TableCell align="center">Percentage</TableCell>
+            <TableCell align="center">Action</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data1.map((row) => (
+            <TableRow key={row.state}>
+              <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
+                    sx={{
+                      width: 10,
+                      height: 10,
+                      borderRadius: '50%',
+                      bgcolor: row.color,
+                      mr: 1
+                    }}
+                  />
+                  {row.state}
+                </Box>
+              </TableCell>
+              <TableCell align="center">{row.count}</TableCell>
+              <TableCell align="center">{row.percentage}</TableCell>
+              <TableCell align="center">
+                <Button variant="outlined" size="small">
+                  View
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+

app/components/TransactionsOverview/TransactionsOverview.tsx

@@ -0,0 +1,50 @@
+import { useRouter } from 'next/navigation';
+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";
+
+export const TransactionsOverview = () => {
+  const router = useRouter();
+  return (
+    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+
+      {/* Title and All Transactions Button */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}>
+        <Typography variant="h6">
+          Transactions Overview (Last 24h)
+        </Typography>
+        <Box>
+          <Button variant="contained" color="primary" onClick={() => router.push('dashboard/transactions')}>
+            All Transactions
+          </Button>
+          <IconButton size="small">
+            <MoreVertIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      </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
+          }
+        }}
+      >
+        <PieCharts />
+        <TransactionsOverviewTable />
+      </Box>
+    </Paper>
+  )
+}

app/components/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx

@@ -0,0 +1,111 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+const transactions = [
+
+  {
+    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 elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
+
+      <Box sx={{ p: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+          <Typography variant="h6" fontWeight="bold">
+            Transactions Waiting for Approval
+          </Typography>
+          <Box>
+            <Button variant="outlined">All Pending Withdrawals</Button>
+
+            <IconButton size="small">
+              <MoreVertIcon fontSize="small" />
+            </IconButton>       </Box>
+        </Box>
+
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell><strong>ID</strong></TableCell>
+                <TableCell><strong>User</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>
+              {transactions.map((tx) => (
+                <TableRow key={tx.id}>
+                  <TableCell>{tx.id}</TableCell>
+                  <TableCell>{tx.user}</TableCell>
+                  <TableCell>{tx.created}</TableCell>
+                  <TableCell>{tx.type}</TableCell>
+                  <TableCell>{tx.amount}</TableCell>
+                  <TableCell>{tx.psp}</TableCell>
+                  <TableCell>
+                    <IconButton color="success">
+                      <CheckCircleIcon />
+                    </IconButton>
+                    <IconButton color="error">
+                      <CancelIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </Paper>
+  );
+}

app/components/WhatsNew/WhatsNew.tsx

@@ -0,0 +1,17 @@
+import { SectionCard } from "../SectionCard/SectionCard";
+import WifiIcon from '@mui/icons-material/Wifi';
+
+export const WhatsNew = () => {
+  return (
+    <SectionCard
+      title="What’s New"
+      icon={<WifiIcon 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' },
+      ]}
+    />
+  );
+};

app/components/dashboard/layout/layoutWrapper.ts

@@ -4,5 +4,5 @@ export const LayoutWrapper = styled('div')({
   display: 'flex',
   width: '100%',
   height: '100vh',
-  overflow: 'hidden',
+  // overflow: 'hidden',
 });

app/components/dashboard/sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ import { styled } from '@mui/system';
 import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
 import SidebarLink from './SideBarLink';
 
-const SidebarContainer = styled('aside')(({ theme }) => ({
+const SideBarContainer = styled('aside')(({ theme }) => ({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -34,9 +34,9 @@ const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
   marginLeft: theme.spacing(1),
 }));
 
-const Sidebar = () => {
+const SideBar = () => {
   return (
-    <SidebarContainer>
+    <SideBarContainer>
       <SidebarHeader>
         PaymentIQ <IconSpacing fontSize="small" />
       </SidebarHeader>
@@ -48,8 +48,8 @@ const Sidebar = () => {
             icon={link.icon}
           />
         ))}
-    </SidebarContainer>
+    </SideBarContainer>
   );
 };
 
-export default Sidebar;
+export default SideBar;

app/components/pages/Approve/Approve.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  TextField,
+  IconButton,
+  InputAdornment,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Checkbox,
+  Paper,
+  MenuItem,
+  InputLabel,
+  Select,
+  FormControl,
+  SelectChangeEvent
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+
+const rows = [
+  {
+    merchantId: '100987998',
+    txId: '1049078821',
+    userId: 17,
+    userEmail: 'dhkheni1@yopmail.com',
+    kycStatus: 'N/A',
+  },
+  {
+    merchantId: '100987998',
+    txId: '1049078821',
+    userId: 18,
+    userEmail: 'dhkheni1@yopmail.com',
+    kycStatus: 'N/A',
+  },
+  {
+    merchantId: '100987998',
+    txId: '1049078821',
+    userId: 19,
+    userEmail: 'dhkheni1@yopmail.com',
+    kycStatus: 'N/A',
+  },
+];
+
+export const Approve = () => {
+  const [age, setAge] = useState('');
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+
+
+  const handleCheckboxChange = (userId: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = event.target.checked;
+    setSelectedRows((prevSelected: number[]) =>
+      isChecked
+        ? [...prevSelected, userId]
+        : prevSelected.filter((id) => id !== userId)
+    );
+    console.log('Selected IDs:', isChecked
+      ? [...selectedRows, userId]
+      : selectedRows.filter((id) => id !== userId));
+  };
+
+  const handleChangeAge = (event: SelectChangeEvent) => {
+    setAge(event.target.value as string);
+  };
+
+  return (
+    <Box p={2}>
+      <Box mb={2} display="flex" justifyContent="space-between" alignItems="center">
+        <TextField
+          variant="outlined"
+          placeholder="Filter by tags or search by keyword"
+          size="small"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton>
+                  <SearchIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Box sx={{ width: '100px' }}>
+          {/* <IconButton onClick={handleMenuOpen}> */}
+          {/*   <MoreVertIcon /> */}
+          {/* </IconButton> */}
+          {/* <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}> */}
+          {/*   <MenuItem onClick={handleMenuClose}>Action 1</MenuItem> */}
+          {/*   <MenuItem onClick={handleMenuClose}>Action 2</MenuItem> */}
+          {/* </Menu> */}
+          <FormControl fullWidth>
+            <InputLabel id="demo-simple-select-label">Action</InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={age}
+              label="Age"
+              onChange={handleChangeAge}
+            >
+              <MenuItem value={10}>Ten</MenuItem>
+              <MenuItem value={20}>Twenty</MenuItem>
+              <MenuItem value={30}>Thirty</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell padding="checkbox"><Checkbox /></TableCell>
+              <TableCell>Merchant-id</TableCell>
+              <TableCell>Tx-id</TableCell>
+              <TableCell>User</TableCell>
+              <TableCell>User email</TableCell>
+              <TableCell>KYC Status</TableCell>
+              <TableCell>KYC PSP</TableCell>
+              <TableCell>KYC PSP status</TableCell>
+              <TableCell>KYC ID status</TableCell>
+              <TableCell>KYC address status</TableCell>
+              <TableCell>KYC liveness status</TableCell>
+              <TableCell>KYC age status</TableCell>
+              <TableCell>KYC peps and sanctions</TableCell>
+              <TableCell>Suspected</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row, idx) => (
+              <TableRow key={idx}>
+                <TableCell padding="checkbox">
+                  <Checkbox checked={selectedRows.includes(row.userId)}
+                    onChange={handleCheckboxChange(row.userId)} /></TableCell>
+                <TableCell>{row.merchantId}</TableCell>
+                <TableCell>{row.txId}</TableCell>
+                <TableCell>
+                  <a href={`/user/${row.userId}`} target="_blank" rel="noopener noreferrer">
+                    {row.userId}
+                  </a>
+                </TableCell>
+                <TableCell>{row.userEmail}</TableCell>
+                <TableCell>{row.kycStatus}</TableCell>
+                <TableCell />
+                <TableCell />
+                <TableCell />
+                <TableCell />
+                <TableCell />
+                <TableCell />
+                <TableCell />
+                <TableCell />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}
+

app/components/pages/DashboardHomePage/DashboardHomePage.tsx

@@ -0,0 +1,26 @@
+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 (
+    <>
+      <Box sx={{ p: 2 }}>
+        <GeneralHealthCard />
+      </Box>
+      <TransactionsOverview />
+      <TransactionsWaitingApproval />
+      <FetchReport />
+      <Documentation />
+      <AccountIQ />
+      <WhatsNew />
+    </>
+  )
+}

app/components/sidebar/SideBarLink.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Link from 'next/link';
+import { styled } from '@mui/system';
+import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
+
+const LinkContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '12px 1px',
+  borderRadius: '4px',
+  color: theme.palette.text.tertiary,
+  textDecoration: 'none',
+  transition: 'background 0.2s ease-in-out',
+
+  '&:hover': {
+    color: 'rgb(255, 255, 255)',
+    background: 'rgba(255, 255, 255, 0.08)',
+    backgroundColor: theme.palette.action.hover,
+    cursor: 'pointer',
+  },
+}));
+
+const LinkText = styled('span')(({ theme }) => ({
+  color: theme.palette.text.tertiary,
+  marginLeft: '12px',
+  fontWeight: 500,
+}));
+
+export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
+  return (
+    <Link href={path} passHref legacyBehavior>
+      <a style={{ textDecoration: 'none' }}>
+        <LinkContainer>
+          {Icon && <Icon />}
+          <LinkText>{title}</LinkText>
+        </LinkContainer>
+      </a>
+    </Link>
+  );
+}

app/components/sidebar/SidebarLayout.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { styled } from '@mui/system';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
+import SideBarLink from './SideBarLink';
+
+// SideBar Container (styled using MUI System)
+export const SideBar = styled('div')(({ theme }) => ({
+  width: '240px',
+  backgroundColor: theme.palette.background.primary,
+  color: 'white',
+  padding: theme.spacing(2),
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  transition: 'width 0.3s ease', // Transition for resizing
+}));
+
+// Main Content Area
+export const MainContent = styled('div')(({ theme }) => ({
+  flexGrow: 1,
+  padding: theme.spacing(4),
+  backgroundColor: theme.palette.background.default,
+  minHeight: '100vh',
+  overflowY: 'auto',
+}));
+
+// SideBar Header
+export const SideBarHeader = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  fontSize: '20px',
+  fontWeight: 600,
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+// Page Wrapper that holds SideBar and Content
+export const LayoutWrapper = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  height: '100vh',
+});
+
+interface SideBarLayoutProps {
+  children: React.ReactNode; // Add children to accept passed content
+}
+
+const SideBarLayout: React.FC<SideBarLayoutProps> = ({ children }) => {
+  return (
+    <LayoutWrapper>
+      <SideBar>
+        <SideBarHeader>
+          PaymentIQ
+          <DashboardIcon sx={{ marginLeft: 0.5 }} />
+        </SideBarHeader>
+        {SIDEBAR_LINKS.map((link) => (
+          <SideBarLink
+            key={link.path}
+            title={link.title}
+            path={link.path}
+            icon={link.icon}
+          />
+        ))}
+      </SideBar>
+      <MainContent>{children}</MainContent> {/* Render children here */}
+    </LayoutWrapper>
+  );
+};
+
+export default SideBarLayout;

app/dashboard/approve/page.tsx

@@ -1,13 +1,13 @@
 // This ensures this component is rendered only on the client side
 'use client';
 
-import React from 'react';
+import { Approve } from '@/app/components/Pages/Approve/Approve';
 
 export default function ApprovePage() {
   return (
     <div>
       {/* This page will now be rendered on the client-side */}
-      <h1>Approve</h1>
+      <Approve />
     </div>
   );
 }

app/dashboard/layout.tsx

@@ -1,15 +1,16 @@
 'use client';
 
 import React from 'react';
-import { MainContent } from '../components/dashboard/layout/mainContent';
+import { MainContent } from '../components/Dashboard/Layout/mainContent';
-import Header from '../components/dashboard/header/Header';
+import Header from '../components/Dashboard/Header/Header';
-import { LayoutWrapper } from '../components/dashboard/layout/layoutWrapper';
+import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper';
-import Sidebar from '@/app/components/dashboard/sidebar/Sidebar';
+import SideBar from '../components/Dashboard/SideBar/Sidebar';
+
 
 const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <LayoutWrapper>
-      <Sidebar />
+      <SideBar />
       <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
         <MainContent>
           <Header />

app/dashboard/page.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import React from 'react';
+import { DashboardHomePage } from "../components/Pages/DashboardHomePage/DashboardHomePage";
-import { Typography } from '@mui/material';
 
 const DashboardPage = () => {
   return (
-    <div  style={{ width: '100vh' }}>
+    <DashboardHomePage />
-      <Typography variant="h4" gutterBottom>
-        Dashboard Overview
-      </Typography>
-      {/* Add your dashboard content here */}
-  </div>
   );
 };
 

app/dashboard/transactions/page.tsx

@@ -1,7 +1,7 @@
 // This ensures this component is rendered only on the client side
 'use client';
 
-import TransactionTable from '@/app/components/pages/transactions/Transactions';
+import TransactionTable from '@/app/components/Pages/Transactions/Transactions';
 
 export default function TransactionPage() {
   return (

constants/SidebarLink.constants.ts

@@ -19,7 +19,7 @@ export const SIDEBAR_LINKS: ISidebarLink[] = [
   { title: 'Home', path: '/dashboard', icon: HomeIcon },
   { title: 'Transaction', path: '/dashboard/transactions', icon: AccountBalanceWalletIcon },
   { title: 'Approve', path: '/dashboard/approve', icon: CheckCircleIcon },
-  { title: 'Investigate', path: '/investigate', icon: SearchIcon },
+  { title: 'Investigate', path: '/dashboard/investigate', icon: SearchIcon },
   { title: 'KYC', path: '/kyc', icon: VerifiedUserIcon },
   { title: 'User Accounts', path: '/user-accounts', icon: PeopleIcon },
   { title: 'Analytics', path: '/analytics', icon: BarChartIcon },

package.json

@@ -18,6 +18,7 @@
     "next": "15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "recharts": "^2.15.3",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

yarn.lock

@@ -693,6 +693,57 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/d3-array@^3.0.3":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.1.tgz#f632b380c3aca1dba8e34aa049bcd6a4af23df8a"
+  integrity sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.9.tgz#57a2f707242e6fe1de81ad7bfcccaaf606179afb"
+  integrity sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.7.tgz#2b7b423dc2dfe69c8c93596e673e37443348c555"
+  integrity sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
+  integrity sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
 "@types/estree@^1.0.6":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
@@ -1201,7 +1252,7 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.1.1:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -1279,6 +1330,77 @@ csstype@^3.0.2, csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1325,6 +1447,11 @@ debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0:
   dependencies:
     ms "^2.1.3"
 
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -1731,11 +1858,21 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^4.0.1:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^5.0.1:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.2.2.tgz#885d7bfb079fac0ce0e8450374bce29e9b742484"
+  integrity sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==
+
 fast-glob@3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
@@ -2023,6 +2160,11 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
@@ -2342,6 +2484,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -2632,11 +2779,25 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-is@^19.1.0:
   version "19.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b"
   integrity sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==
 
+react-smooth@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-4.0.4.tgz#a5875f8bb61963ca61b819cedc569dc2453894b4"
+  integrity sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==
+  dependencies:
+    fast-equals "^5.0.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -2652,6 +2813,27 @@ react@^19.0.0:
   resolved "https://registry.yarnpkg.com/react/-/react-19.1.0.tgz#926864b6c48da7627f004795d6cce50e90793b75"
   integrity sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.15.3:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.15.3.tgz#b94d05e91e3a5df1b02368ef64400dec9e9a77d4"
+  integrity sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==
+  dependencies:
+    clsx "^2.0.0"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.21"
+    react-is "^18.3.1"
+    react-smooth "^4.0.4"
+    recharts-scale "^0.4.4"
+    tiny-invariant "^1.3.1"
+    victory-vendor "^36.6.8"
+
 reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
@@ -3024,6 +3206,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tiny-invariant@^1.3.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
 tinyglobby@^0.2.13:
   version "0.2.14"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.14.tgz#5280b0cf3f972b050e74ae88406c0a6a58f4079d"
@@ -3170,6 +3357,26 @@ use-sync-external-store@^1.5.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
   integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
 
+victory-vendor@^36.6.8:
+  version "36.9.2"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.9.2.tgz#668b02a448fa4ea0f788dbf4228b7e64669ff801"
+  integrity sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"