add items at homepage

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

payment-iq/app/components/TransactionsOverview/TransactionsOverViewTable.tsx

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

payment-iq/app/components/TransactionsOverview/TransactionsOverview.tsx

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

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

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

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

@@ -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 />
+    </>
   )
 }

payment-iq/app/dashboard/layout.tsx

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

payment-iq/app/dashboard/page.tsx

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