Mitchell/payment-backoffice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from mitchell131/datapicker

Browse Source 
add date rate
This commit is contained in:
Mitchell Magro 2025-06-27 15:37:43 +02:00 committed by GitHub
commit 9db58a79aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 2386 additions and 936 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
payment-iq/app/components/AccountIQ/AccountIQ.tsx
View File

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

84
payment-iq/app/components/DateRangePicker/DateRangePicker.tsx Normal file
View File

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

16
payment-iq/app/components/Documentation/Documentation.tsx
View File

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

70
payment-iq/app/components/FetchReports/FetchReports.tsx
View File

@ -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';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
} from "@mui/material";
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 [psp, setPsp] = useState('');
const [reportType, setReportType] = useState('');
const [state, setState] = useState("");
const [psp, setPsp] = 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' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
<Paper
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">
<MenuItem value="allTransactionsReport">All Transactions Report</MenuItem>
<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 */}
@ -152,4 +171,3 @@ export const FetchReport = () => {
</Paper>
);
};

67
payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx
View File

@ -1,33 +1,42 @@
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 { Box, Card, CardContent, Typography, IconButton } from "@mui/material";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
// import { 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%' },
{ 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 }}>
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' }}>
<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' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
<Typography variant="subtitle1" fontWeight="bold">
<CardContent>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<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>
<Divider />
<Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
<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>
);
}
};

37
payment-iq/app/components/SectionCard/SectionCard.tsx
View File

@ -1,22 +1,37 @@
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 }) => (
<Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
<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' }}>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<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>
</Box>
</Box >
</Box>
<Divider />
<List dense disablePadding>
{items.map((item, index) => (
@ -33,5 +48,3 @@ export const SectionCard = ({ title, icon, items }) => (
</CardContent>
</Paper>
);

12
payment-iq/app/components/SectionCard/types.ts Normal file
View File

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

27
payment-iq/app/components/TransactionsOverview/TransactionsOverViewTable.tsx
View File

@ -7,14 +7,14 @@ import {
TableRow,
Paper,
Box,
Button
} from '@mui/material';
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' }
{ 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 = () => {
@ -35,20 +35,20 @@ export const TransactionsOverviewTable = () => {
<TableCell align="center">
<Box
sx={{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
mx: 'auto', // center the flexbox itself
width: '73px' // consistent width for alignment
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%',
borderRadius: "50%",
bgcolor: row.color,
mr: 1
mr: 1,
}}
/>
{row.state}
@ -68,4 +68,3 @@ export const TransactionsOverviewTable = () => {
</TableContainer>
);
};

52
payment-iq/app/components/TransactionsOverview/TransactionsOverview.tsx
View File

@ -1,22 +1,40 @@
import { useRouter } from 'next/navigation';
import { Box, Button, IconButton, Paper, Typography } from "@mui/material"
import { PieCharts } from "../PieCharts/PieCharts"
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 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 }}>
<Typography variant="h6">
<Box
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',
flexDirection: 'row',
display: "flex",
flexDirection: "row",
flexWrap: {
xs: 'wrap', // Wrap on small screens
md: 'nowrap' // No wrap on medium and up
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
}
md: 0, // No spacing on larger screens
},
}}
>
<PieCharts />
<TransactionsOverviewTable />
</Box>
</Paper>
)
}
);
};

178
payment-iq/app/components/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx
View File

@ -9,78 +9,162 @@ import {
TableContainer,
TableHead,
TableRow,
Typography
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
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';
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: "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: "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: "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: "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",
},
{
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' }}>
<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">
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
<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><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>
<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>
@ -108,4 +192,4 @@ export const TransactionsWaitingApproval = () => {
</Box>
</Paper>
);
}
};

22
payment-iq/app/components/WhatsNew/WhatsNew.tsx
View File

@ -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: 'Introducing Our New Transactions and Rule Views', date: '23 Oct 2024' },
{ title: 'Introducing Our New Status Page', date: '09 Sept 2024' },
{
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" },
]}
/>
);

4
payment-iq/app/components/pages/DashboardHomePage/DashboardHomePage.tsx
View File

@ -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 />

1460
payment-iq/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
payment-iq/package.json
View File

@ -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",

1255
payment-iq/yarn.lock
View File

File diff suppressed because it is too large Load Diff