revenue-fe/src/pages/ManageAccount.js

import * as React from 'react';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import { Box, Typography, Button, TextField } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';

const columns = [
  { id: 'id', label: 'ID', minWidth: 50 },
  { id: 'name', label: 'Name', minWidth: 100 },
  {
    id: 'description',
    label: 'Description',
    minWidth: 100,
    align: 'right',
    format: (value) => value.toLocaleString('en-US'),
  },
  {
    id: 'systemAccount',
    label: 'System Account',
    minWidth: 170,
    align: 'right',
  },
  { id: 'createdDate', label: 'Created Date', minWidth: 100 },
  {
    id: 'action',
    label: 'Action',
    minWidth: 170,
    align: 'right',
    format: (value) => value.toFixed(2),
  },
];

function generateData(data, column) {
  if (column === 'systemAccount') return data ? 'true' : 'false';
  return data;
}

const rows = {
  "recordsFiltered": 5,
  "data": [
      {
          "createdDate": "2019-12-05T09:18:06.000+0000",
          "creditLimit": null,
          "currency": null,
          "description": "Rekening Member eMoney",
          "formattedCreatedDate": "2019-12-05 18:18:06",
          "formattedCreditLimit": null,
          "formattedLowerCreditLimit": null,
          "formattedUpperCreditLimit": null,
          "group": null,
          "id": 1,
          "lowerCreditLimit": null,
          "name": "eMoney Account",
          "systemAccount": false,
          "upperCreditLimit": null
      },
      {
          "createdDate": "2019-12-11T07:44:29.000+0000",
          "creditLimit": null,
          "currency": null,
          "description": "Topup Account",
          "formattedCreatedDate": "2019-12-11 16:44:29",
          "formattedCreditLimit": null,
          "formattedLowerCreditLimit": null,
          "formattedUpperCreditLimit": null,
          "group": null,
          "id": 24,
          "lowerCreditLimit": null,
          "name": "Topup Account",
          "systemAccount": true,
          "upperCreditLimit": null
      },
      {
          "createdDate": "2019-12-05T09:19:19.000+0000",
          "creditLimit": null,
          "currency": null,
          "description": "Rekening Merchant",
          "formattedCreatedDate": "2019-12-05 18:19:19",
          "formattedCreditLimit": null,
          "formattedLowerCreditLimit": null,
          "formattedUpperCreditLimit": null,
          "group": null,
          "id": 39,
          "lowerCreditLimit": null,
          "name": "Merchant Account",
          "systemAccount": false,
          "upperCreditLimit": null
      },
      {
          "createdDate": "2019-12-05T09:19:25.000+0000",
          "creditLimit": null,
          "currency": null,
          "description": "Rekening Deposit",
          "formattedCreatedDate": "2019-12-05 18:19:25",
          "formattedCreditLimit": null,
          "formattedLowerCreditLimit": null,
          "formattedUpperCreditLimit": null,
          "group": null,
          "id": 40,
          "lowerCreditLimit": null,
          "name": "Deposit Account",
          "systemAccount": false,
          "upperCreditLimit": null
      },
      {
          "createdDate": "2021-04-13T16:45:13.000+0000",
          "creditLimit": null,
          "currency": null,
          "description": "Pooling account to maintain cash in/out member to bank",
          "formattedCreatedDate": "2021-04-14 01:45:13",
          "formattedCreditLimit": null,
          "formattedLowerCreditLimit": null,
          "formattedUpperCreditLimit": null,
          "group": null,
          "id": 41,
          "lowerCreditLimit": null,
          "name": "Cash out/in account to bank",
          "systemAccount": true,
          "upperCreditLimit": null
      }
  ],
  "recordsTotal": 5
};

export default function ManageGroups() {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <Box sx={{ padding: 3 }}>
      <Typography sx={{ color: 'gray', size: 'xl' }}>Manage Account</Typography>
      <Box sx={{ padding: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', pr: 2, }}>
          <Button variant="contained" color="primary">Create New Member</Button>
        </Box>
        <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', pr: 2, }}>
          <TextField id="standard-basic" label="Search" variant="standard" />
          <IconButton type="button" sx={{ p: '10px' }} aria-label="search">
            <SearchIcon />
          </IconButton>
        </Box>
        <Paper sx={{ width: '100%', overflow: 'hidden' }}>
          <TableContainer sx={{ maxHeight: 440 }}>
            <Table stickyHeader aria-label="sticky table">
              <TableHead>
                <TableRow>
                  {columns.map((column) => (
                    <TableCell
                      key={column.id}
                      align={column.align}
                      style={{ minWidth: column.minWidth }}
                    >
                      {column.label}
                    </TableCell>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.data
                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((row) => {
                    return (
                      <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
                        {columns.map((column) => {
                          const value = row[column.id];
                          return (
                            <TableCell key={column.id} align={column.align}>
                              {
                                column.id === 'action' ? (
                                  <Button>Details</Button>
                                ) : generateData(value, column.id)
                              }
                            </TableCell>
                          );
                        })}
                      </TableRow>
                    );
                  })}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[10, 25, 100]}
            component="div"
            count={rows.data.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        </Paper>
      </Box>
    </Box>
  );
}