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

add items at homepage

Browse Source
This commit is contained in:
Petropoulos Evangelos 2025-06-20 19:31:34 +03:00
parent d144876b72
commit b85b3294c5
8 changed files with 234 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx Normal file
View File

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

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

@ -1,137 +1,3 @@
// import React from 'react';
// import {
// Table,
// TableBody,
// TableCell,
// TableContainer,
// TableHead,
// TableRow,
// Paper,
// Typography,
// Button,
// Box
// } from '@mui/material';
// import { data1 } from './constants';
// export const TransactionsOverview = () => {
// const data = [
// { state: 'Successful', count: 0, percentage: '0%', color: '#4caf50' }, // green
// { state: 'Waiting', count: 0, percentage: '0%', color: '#ff9800' }, // orange
// { state: 'Failed', count: 0, percentage: '0%', color: '#f44336' }, // red
// { state: 'Cancelled', count: 0, percentage: '0%', color: '#9e9e9e' }, // grey
// ];
// 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 component="th" scope="row">
// <Box sx={{ display: 'flex', alignItems: 'center' }}>
// <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>
// );
// };
// import React from 'react';
// import {
// Table,
// TableBody,
// TableCell,
// TableContainer,
// TableHead,
// TableRow,
// Paper,
// Box,
// Button
// } from '@mui/material';
// import { data1 } from './constants';
// export const TransactionsOverview = () => {
// 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',
// alignItems: 'center',
// justifyContent: 'center'
// }}
// >
// <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>
// );
// };
import React from 'react';
import {
Table,
TableBody,

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

@ -1,47 +1,50 @@
import { useRouter } from 'next/navigation';
import { Box, Button, Paper, Typography } from "@mui/material"
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 (
const router = useRouter();
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' }}>
{/* Title and All Transactions Button */}
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}>
<Typography variant="h6">
Transactions Overview (Last 24h)
</Typography>
{/* 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
}
}}
>
{/* 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>
)
}
</Box>
</Paper>
)
}

111
payment-iq/app/components/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx Normal file
View File

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

4
payment-iq/app/components/dashboard/layout/layoutWrapper.ts
View File

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

15
payment-iq/app/components/pages/homepage/homepage.tsx
View File

@ -1,7 +1,16 @@
import { Box } from "@mui/material"
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard"
import { TransactionsOverview } from "../../TransactionsOverview/TransactionsOverview"
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval"
export const HomePage = () => {
export const HomePage = () => {
return (
<TransactionsOverview />
<>
<Box sx={{ p: 2 }}>
<GeneralHealthCard />
</Box>
<TransactionsOverview />
<TransactionsWaitingApproval />
</>
)
}
}

11
payment-iq/app/dashboard/layout.tsx
View File

@ -6,16 +6,17 @@ import Header from '../components/Dashboard/Header/Header';
import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper';
import SideBar from '../components/Dashboard/SideBar/Sidebar';
const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<LayoutWrapper>
<SideBar />
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
<MainContent>
<Header />
{children}
</MainContent>
</div>
<MainContent>
<Header />
{children}
</MainContent>
</div>
</LayoutWrapper>
);
};

6
payment-iq/app/dashboard/page.tsx
View File

@ -1,14 +1,10 @@
'use client';
import { Box } from "@mui/material";
import { HomePage } from "../components/Pages/HomePage/HomePage";
const DashboardPage = () => {
return (
<Box style={{ maxWidth: '100vw' }}>
<HomePage />
</Box>
<HomePage />
);
};