payment-backoffice/payment-iq/app/features/Pages/Approve/Approve.tsx

import React, { useState } from 'react';
import {
  Box,
  TextField,
  IconButton,
  InputAdornment,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Checkbox,
  Paper,
  MenuItem,
  InputLabel,
  Select,
  FormControl,
  SelectChangeEvent
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';

const rows = [
  {
    merchantId: '100987998',
    txId: '1049078821',
    userId: 17,
    userEmail: 'dhkheni1@yopmail.com',
    kycStatus: 'N/A',
  },
  {
    merchantId: '100987998',
    txId: '1049078821',
    userId: 18,
    userEmail: 'dhkheni1@yopmail.com',
    kycStatus: 'N/A',
  },
  {
    merchantId: '100987998',
    txId: '1049078821',
    userId: 19,
    userEmail: 'dhkheni1@yopmail.com',
    kycStatus: 'N/A',
  },
];

export const Approve = () => {
  const [age, setAge] = useState('');
  const [selectedRows, setSelectedRows] = useState<number[]>([]);



  const handleCheckboxChange = (userId: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
    const isChecked = event.target.checked;
    setSelectedRows((prevSelected: number[]) =>
      isChecked
        ? [...prevSelected, userId]
        : prevSelected.filter((id) => id !== userId)
    );
    console.log('Selected IDs:', isChecked
      ? [...selectedRows, userId]
      : selectedRows.filter((id) => id !== userId));
  };

  const handleChangeAge = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box p={2}>
      <Box mb={2} display="flex" justifyContent="space-between" alignItems="center">
        <TextField
          variant="outlined"
          placeholder="Filter by tags or search by keyword"
          size="small"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton>
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            ),
          }}
        />
        <Box sx={{ width: '100px' }}>
          {/* <IconButton onClick={handleMenuOpen}> */}
          {/*   <MoreVertIcon /> */}
          {/* </IconButton> */}
          {/* <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}> */}
          {/*   <MenuItem onClick={handleMenuClose}>Action 1</MenuItem> */}
          {/*   <MenuItem onClick={handleMenuClose}>Action 2</MenuItem> */}
          {/* </Menu> */}
          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">Action</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={age}
              label="Age"
              onChange={handleChangeAge}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Box>

      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead>
            <TableRow>
              <TableCell padding="checkbox"><Checkbox /></TableCell>
              <TableCell>Merchant-id</TableCell>
              <TableCell>Tx-id</TableCell>
              <TableCell>User</TableCell>
              <TableCell>User email</TableCell>
              <TableCell>KYC Status</TableCell>
              <TableCell>KYC PSP</TableCell>
              <TableCell>KYC PSP status</TableCell>
              <TableCell>KYC ID status</TableCell>
              <TableCell>KYC address status</TableCell>
              <TableCell>KYC liveness status</TableCell>
              <TableCell>KYC age status</TableCell>
              <TableCell>KYC peps and sanctions</TableCell>
              <TableCell>Suspected</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, idx) => (
              <TableRow key={idx}>
                <TableCell padding="checkbox">
                  <Checkbox checked={selectedRows.includes(row.userId)}
                    onChange={handleCheckboxChange(row.userId)} /></TableCell>
                <TableCell>{row.merchantId}</TableCell>
                <TableCell>{row.txId}</TableCell>
                <TableCell>
                  <a href={`/user/${row.userId}`} target="_blank" rel="noopener noreferrer">
                    {row.userId}
                  </a>
                </TableCell>
                <TableCell>{row.userEmail}</TableCell>
                <TableCell>{row.kycStatus}</TableCell>
                <TableCell />
                <TableCell />
                <TableCell />
                <TableCell />
                <TableCell />
                <TableCell />
                <TableCell />
                <TableCell />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
}