payment-backoffice/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx

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";

import "./TransactionsWaitingApproval.scss";
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",
  },
  {
    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}
      className="transactions-waiting-approval-paper"
      // sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
    >
      <Box sx={{ p: 3 }}>
        <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>
        </Box>

        <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>
              </TableRow>
            </TableHead>
            <TableBody>
              {transactions.map((tx, i) => (
                <TableRow key={tx.id + i}>
                  <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>
  );
};