homepage

payment-iq/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' },
+      ]}
+    />
+  )
+}

payment-iq/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' },
+      ]}
+    />
+  );
+};

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

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

payment-iq/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>
+);
+
+

payment-iq/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' },
+      ]}
+    />
+  );
+};

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

@@ -2,6 +2,10 @@ 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"
 
 
 
@@ -13,6 +17,10 @@ export const DashboardHomePage = () => {
       </Box>
       <TransactionsOverview />
       <TransactionsWaitingApproval />
+      <FetchReport />
+      <Documentation />
+      <AccountIQ />
+      <WhatsNew />
     </>
   )
 }

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

payment-iq/app/dashboard/investigate/page.tsx

@@ -10,4 +10,4 @@ export default function InvestigatePage() {
       <h1>Investigate</h1>
     </div>
   );
-}
+}

payment-iq/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 },