login, usermanagement, role

2025-01-14 20:31:57 +07:00
parent 2781e9181d
commit 7772062831
19 changed files with 1633 additions and 28 deletions
--- a/src/tdsPages/TopUpApproval.js
+++ b/src/tdsPages/TopUpApproval.js
@ -0,0 +1,142 @@
+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: 'createdDate', label: 'Created Date', minWidth: 100 },
+  {
+    id: 'name',
+    label: '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),
+  },
+];
+
+function createData(id, name, description, population, size) {
+  const today = new Date();
+  return { id, name, description, population, size, createdDate: today.toString()};
+}
+
+const rows = [
+  createData(1,'India', 'IN', 1324171354, 3287263),
+  createData(2,'China', 'CN', 1403500365, 9596961),
+  createData(3,'Italy', 'IT', 60483973, 301340),
+  createData(4,'United States', 'US', 327167434, 9833520),
+  createData(5,'Canada', 'CA', 37602103, 9984670),
+  createData(6,'Australia', 'AU', 25475400, 7692024),
+  createData(7,'Germany', 'DE', 83019200, 357578),
+  createData(8,'Ireland', 'IE', 4857000, 70273),
+  createData(9,'Mexico', 'MX', 126577691, 1972550),
+  createData(10,'Japan', 'JP', 126317000, 377973),
+  createData(11,'France', 'FR', 67022000, 640679),
+  createData(12,'United Kingdom', 'GB', 67545757, 242495),
+  createData(13,'Russia', 'RU', 146793744, 17098246),
+  createData(14,'Nigeria', 'NG', 200962417, 923768),
+  createData(15,'Brazil', 'BR', 210147125, 8515767),
+];
+
+export default function TopUpApproval() {
+  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 Group</Typography>
+      <Box sx={{ padding: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', pr: 2, }}>
+          <Button variant="contained" color="primary">Create New Group</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
+                  .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.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </Paper>
+      </Box>
+    </Box>
+  );
+}