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

// 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,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Box,
  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' }
];

export const TransactionsOverviewTable = () => {
  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',
                    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%',
                      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>
  );
};