tpay client

2025-01-07 16:25:37 +07:00
parent 6f1eac180a
commit cabc5be6a3
40 changed files with 4186 additions and 106 deletions
--- a/src/pages/ManageAccess.js
+++ b/src/pages/ManageAccess.js
@ -0,0 +1,156 @@
+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: 'internalName',
+    label: 'Internal Name',
+    minWidth: 100,
+    align: 'right',
+    format: (value) => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'description',
+    label: 'Description',
+    minWidth: 170,
+    align: 'right',
+    format: (value) => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'action',
+    label: 'Action',
+    minWidth: 170,
+    align: 'right',
+    format: (value) => value.toFixed(2),
+  },
+];
+
+const rows = {
+  "recordsFiltered": 5,
+  "data": [
+      {
+          "description": "Default PIN Credential",
+          "id": 1,
+          "internalName": "pin_credential",
+          "name": "PIN Credential"
+      },
+      {
+          "description": "Partner Secret Auth Credential",
+          "id": 2,
+          "internalName": "secret_auth",
+          "name": "Secret Auth"
+      },
+      {
+          "description": "Partner API Key",
+          "id": 3,
+          "internalName": "api_key",
+          "name": "APIKey"
+      },
+      {
+          "description": "Web Access Credential",
+          "id": 4,
+          "internalName": "web_credential",
+          "name": "Web Credential"
+      },
+      {
+          "description": "One To Many Transfers",
+          "id": 5,
+          "internalName": "otm_tpay",
+          "name": "OTM TPay"
+      }
+  ],
+  "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 Access</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>
+                                ) : value
+                              }
+                            </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>
+  );
+}