add items at homepage
This commit is contained in:
Petropoulos Evangelos
parent
d144876b72
commit
b85b3294c5
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
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 (
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<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 */}
|
||||
|
||||
@ -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,5 +4,5 @@ export const LayoutWrapper = styled('div')({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
overflow: 'hidden',
|
||||
// overflow: 'hidden',
|
||||
});
|
||||
@ -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 = () => {
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ p: 2 }}>
|
||||
<GeneralHealthCard />
|
||||
</Box>
|
||||
<TransactionsOverview />
|
||||
<TransactionsWaitingApproval />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -6,6 +6,7 @@ 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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user