tpay client
This commit is contained in:
unknown
56
src/pages/Dashboard.css
Normal file
56
src/pages/Dashboard.css
Normal file
@ -0,0 +1,56 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
17
src/pages/Dashboard.js
Normal file
17
src/pages/Dashboard.js
Normal file
@ -0,0 +1,17 @@
|
||||
// import logo from "./logo.svg";
|
||||
import "./Dashboard.css";
|
||||
import Chart from "chart.js/auto";
|
||||
import { CategoryScale } from "chart.js";
|
||||
import Summary from "../components/Summary";
|
||||
|
||||
Chart.register(CategoryScale);
|
||||
|
||||
function Dasboard() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Summary />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dasboard;
|
||||
79
src/pages/Login.js
Normal file
79
src/pages/Login.js
Normal file
@ -0,0 +1,79 @@
|
||||
import React, { useState } from "react";
|
||||
import { TextField, Button, Box, Typography, Grid, Paper } from "@mui/material";
|
||||
import {Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
const LoginPage = () => {
|
||||
// State for email and password
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (email && password) {
|
||||
// Handle login logic here, for example, API call
|
||||
console.log("Logged in with:", { email, password });
|
||||
localStorage.setItem('authToken', email)
|
||||
navigate('/');
|
||||
} else {
|
||||
alert("Please fill in both fields.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
style={{ minHeight: "100vh", backgroundColor: "#f4f6f8" }}
|
||||
>
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Paper elevation={3} sx={{ padding: 3 }}>
|
||||
<Typography variant="h5" align="center" gutterBottom>
|
||||
Login
|
||||
</Typography>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Box mb={2}>
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<TextField
|
||||
label="Password"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mt={2} textAlign="center">
|
||||
<Button>
|
||||
<Link to="/register">Register</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
type="submit"
|
||||
fullWidth
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
156
src/pages/ManageAccess.js
Normal file
156
src/pages/ManageAccess.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
211
src/pages/ManageAccount.js
Normal file
211
src/pages/ManageAccount.js
Normal file
@ -0,0 +1,211 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
113
src/pages/ManageCredential.js
Normal file
113
src/pages/ManageCredential.js
Normal file
@ -0,0 +1,113 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem
|
||||
} from "@mui/material";
|
||||
|
||||
const SettingPage = () => {
|
||||
// State for form fields
|
||||
const [accessType, setAccessType] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [credential, setCredential] = useState("");
|
||||
const [confirmCredential, setConfirmCredential] = useState("");
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (credential !== confirmCredential) {
|
||||
alert("Credentials do not match!");
|
||||
return;
|
||||
}
|
||||
if (accessType && username && credential && setConfirmCredential) {
|
||||
// Handle registration logic, like calling an API to create the user
|
||||
console.log("Registered with:", { accessType, username, credential });
|
||||
} else {
|
||||
alert("Please fill in all fields.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Typography sx={{ color: 'gray', size: 'xl' }}>Access</Typography>
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
|
||||
<Typography sx={{ color: 'gray', size: 'xl' }}>Manage Member Credential</Typography>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Box mb={2} m={2}>
|
||||
<InputLabel id="demo-simple-select-label">Access Type</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={accessType}
|
||||
label="Access Type"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
required
|
||||
onChange={(e) => setAccessType(e.target.value)}
|
||||
>
|
||||
<MenuItem value={10}>Ten</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
{/* <TextField
|
||||
label="Access Type"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={accessType}
|
||||
onChange={(e) => setAccessType(e.target.value)}
|
||||
required
|
||||
/> */}
|
||||
</Box>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Credential"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={credential}
|
||||
onChange={(e) => setCredential(e.target.value)}
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Confirm Credential"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={confirmCredential}
|
||||
onChange={(e) => setConfirmCredential(e.target.value)}
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mt={2} mb={2} textAlign="center">
|
||||
<Button style={{ marginRight: '5px'}} variant="contained">Edit</Button>
|
||||
<Button variant="contained" color="success">Submit</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingPage;
|
||||
128
src/pages/ManageCurrency.js
Normal file
128
src/pages/ManageCurrency.js
Normal file
@ -0,0 +1,128 @@
|
||||
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: 'code', label: 'Code', minWidth: 100 },
|
||||
{ id: 'prefix', label: 'Prefix', minWidth: 100 },
|
||||
{ id: 'trailer', label: 'Trailer', minWidth: 100 },
|
||||
{ id: 'format', label: 'Format', minWidth: 100 },
|
||||
{ id: 'grouping', label: 'Grouping Separator', minWidth: 100 },
|
||||
{ id: 'decimal', label: 'Decimal Separator', minWidth: 100 },
|
||||
{
|
||||
id: 'action',
|
||||
label: 'Action',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
format: (value) => value.toFixed(2),
|
||||
},
|
||||
];
|
||||
|
||||
const rows = {
|
||||
"recordsFiltered": 1,
|
||||
"data": [
|
||||
{
|
||||
"code": "USD",
|
||||
"decimal": ".",
|
||||
"format": "#,##0.00",
|
||||
"grouping": ",",
|
||||
"id": 2,
|
||||
"name": "Dollar",
|
||||
"prefix": "$",
|
||||
"trailer": ""
|
||||
}
|
||||
],
|
||||
"recordsTotal": 1
|
||||
};
|
||||
|
||||
export default function ManageCurrency() {
|
||||
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 Currency</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.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>
|
||||
);
|
||||
}
|
||||
142
src/pages/ManageGroups.js
Normal file
142
src/pages/ManageGroups.js
Normal file
@ -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 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 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>
|
||||
);
|
||||
}
|
||||
240
src/pages/ManageMembers.js
Normal file
240
src/pages/ManageMembers.js
Normal file
@ -0,0 +1,240 @@
|
||||
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: 'username', label: 'Username', minWidth: 100 },
|
||||
{
|
||||
id: 'group',
|
||||
label: 'Group',
|
||||
minWidth: 100,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
label: 'Name',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
label: 'Email',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'createdDate',
|
||||
label: 'Created Date',
|
||||
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": 35023,
|
||||
"data": [
|
||||
{
|
||||
"createdDate": "2024-12-29 15:56:00",
|
||||
"groupID": 36871,
|
||||
"name": "Tomas Pinto Amaral",
|
||||
"id": 36871,
|
||||
"msisdn": "67074546696",
|
||||
"email": "tomasamaral1302@gmail.com",
|
||||
"username": "67074546696",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-28 23:15:00",
|
||||
"groupID": 36870,
|
||||
"name": "Eleioterio Jeronimo Dos Santos Belmonte",
|
||||
"id": 36870,
|
||||
"msisdn": "67074677364",
|
||||
"email": "Ellebambros6@gmail.con",
|
||||
"username": "67074677364",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-28 06:52:00",
|
||||
"groupID": 36869,
|
||||
"name": "Joao de Brito ximenes ",
|
||||
"id": 36869,
|
||||
"msisdn": "67073650842",
|
||||
"email": "ximenesjhon42@gmail.com",
|
||||
"username": "67073650842",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-28 03:44:00",
|
||||
"groupID": 36868,
|
||||
"name": "nelson da costa moniz calau",
|
||||
"id": 36868,
|
||||
"msisdn": "67078525938",
|
||||
"email": "calaunelson842@gmail.com",
|
||||
"username": "67078525938",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-27 10:35:00",
|
||||
"groupID": 36867,
|
||||
"name": "Arcenia Maria Martins",
|
||||
"id": 36867,
|
||||
"msisdn": "67078601536",
|
||||
"email": "arceniamartins04@gmail.com",
|
||||
"username": "67078601536",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-26 22:29:00",
|
||||
"groupID": 36866,
|
||||
"name": "Yakov",
|
||||
"id": 36866,
|
||||
"msisdn": "79604742286",
|
||||
"email": "makarevichyakov2004@gmail.com",
|
||||
"username": "79604742286",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-23 15:44:00",
|
||||
"groupID": 36865,
|
||||
"name": "Juliao Baptista",
|
||||
"id": 36865,
|
||||
"msisdn": "67078248108",
|
||||
"email": "juliao.baptista.1988@gmail.com",
|
||||
"username": "67078248108",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-20 15:48:00",
|
||||
"groupID": 36864,
|
||||
"name": "Celicia A. Lina da Silva Pereira",
|
||||
"id": 36864,
|
||||
"msisdn": "67073565079",
|
||||
"email": "abulinadasilva@gamail.com",
|
||||
"username": "67073565079",
|
||||
"group": "PREMIUM"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-19 23:26:00",
|
||||
"groupID": 36863,
|
||||
"name": "Noe Afonso guterres",
|
||||
"id": 36863,
|
||||
"msisdn": "67077775543",
|
||||
"email": "noeguterres9@gmail.com",
|
||||
"username": "67077775543",
|
||||
"group": "REGULER"
|
||||
},
|
||||
{
|
||||
"createdDate": "2024-12-19 20:08:00",
|
||||
"groupID": 36862,
|
||||
"name": "Leandro Simões De Araújo ",
|
||||
"id": 36862,
|
||||
"msisdn": "67073854248",
|
||||
"email": "leoandroaraujo016@gmail.com",
|
||||
"username": "67073854248",
|
||||
"group": "REGULER"
|
||||
}
|
||||
],
|
||||
"recordsTotal": 35023
|
||||
};
|
||||
|
||||
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 Member</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>
|
||||
);
|
||||
}
|
||||
142
src/pages/ManageMenu.js
Normal file
142
src/pages/ManageMenu.js
Normal file
@ -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 ManageMenus() {
|
||||
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 Menu</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
|
||||
.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>
|
||||
);
|
||||
}
|
||||
141
src/pages/ManageNotifications.js
Normal file
141
src/pages/ManageNotifications.js
Normal file
@ -0,0 +1,141 @@
|
||||
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,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'moduleURL',
|
||||
label: 'Destination Module',
|
||||
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": 2,
|
||||
"data": [
|
||||
{
|
||||
"enabled": false,
|
||||
"id": 1,
|
||||
"moduleURL": "https://tpay.tl/middle-tpay/notif/sender",
|
||||
"name": "notifSender",
|
||||
"notificationType": null,
|
||||
"transferTypeID": null
|
||||
},
|
||||
{
|
||||
"enabled": false,
|
||||
"id": 2,
|
||||
"moduleURL": "https://tpay.tl/middle-tpay/notif/receiver",
|
||||
"name": "notifBenefeciary",
|
||||
"notificationType": null,
|
||||
"transferTypeID": null
|
||||
}
|
||||
],
|
||||
"recordsTotal": 2
|
||||
}
|
||||
|
||||
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 Notification</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.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
257
src/pages/ManageTransfers.js
Normal file
257
src/pages/ManageTransfers.js
Normal file
@ -0,0 +1,257 @@
|
||||
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,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{ id: 'fromAccountName', label: 'From Account', minWidth: 100 },
|
||||
{ id: 'toAccountName', label: 'To Account', minWidth: 100 },
|
||||
{
|
||||
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": 21,
|
||||
"data": [
|
||||
{
|
||||
"description": "Transaction for Payment Mytelkomcel",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 58,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Payment Mytelkomcel",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Disburse transaction EDTL from user to Agent",
|
||||
"fromAccountName": "Merchant Account",
|
||||
"fromAccounts": 39,
|
||||
"id": 57,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.00,
|
||||
"name": "Disburse transaction EDTL",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Transaction for payment EDTL",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 56,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Sosa Token EDTL",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Disburs myloja to agent",
|
||||
"fromAccountName": "Merchant Account",
|
||||
"fromAccounts": 39,
|
||||
"id": 55,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Disburs myloja to agent",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Purchase Pulsa",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 54,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.00,
|
||||
"name": "Rekarga Pulsa",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Transaction for payment MyLoja",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 53,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Payment MyLoja",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Cashout Member to Bank Account",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 52,
|
||||
"maxAmount": 300.00,
|
||||
"maxCount": 10,
|
||||
"minAmount": 1.00,
|
||||
"name": "Dada Osan P24",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Cash out/in account to bank",
|
||||
"toAccounts": 41
|
||||
},
|
||||
{
|
||||
"description": "Topup Member e-money from Bank",
|
||||
"fromAccountName": "Cash out/in account to bank",
|
||||
"fromAccounts": 41,
|
||||
"id": 51,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 1.00,
|
||||
"name": "Top up P24",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "eMoney Account",
|
||||
"toAccounts": 1
|
||||
},
|
||||
{
|
||||
"description": "Transaction for buying voucher games ",
|
||||
"fromAccountName": "eMoney Account",
|
||||
"fromAccounts": 1,
|
||||
"id": 50,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Payment GamesTL",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
},
|
||||
{
|
||||
"description": "Partner disburse to agent or driver account",
|
||||
"fromAccountName": "Merchant Account",
|
||||
"fromAccounts": 39,
|
||||
"id": 49,
|
||||
"maxAmount": 0.00,
|
||||
"maxCount": 0,
|
||||
"minAmount": 0.01,
|
||||
"name": "Disburse agent or driver",
|
||||
"otpThreshold": 0.00,
|
||||
"toAccountName": "Merchant Account",
|
||||
"toAccounts": 39
|
||||
}
|
||||
],
|
||||
"recordsTotal": 21
|
||||
};
|
||||
|
||||
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 Transfer Type</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.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
254
src/pages/ManageWebservice.js
Normal file
254
src/pages/ManageWebservice.js
Normal file
@ -0,0 +1,254 @@
|
||||
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,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'active',
|
||||
label: 'Enabled',
|
||||
minWidth: 170,
|
||||
align: 'right',
|
||||
format: (value) => value.toLocaleString('en-US'),
|
||||
},
|
||||
{
|
||||
id: 'secureTransaction',
|
||||
label: 'Secure',
|
||||
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": 13,
|
||||
"data": [
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "edtl",
|
||||
"id": 20,
|
||||
"name": "dw-tpay-edtl",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": true,
|
||||
"username": "doku_tpay_edtl"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "scheduler",
|
||||
"id": 19,
|
||||
"name": "scheduler",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "scheduler"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "YL29DDQ66XZJ67TH",
|
||||
"id": 18,
|
||||
"name": "tpay-biller-nontransactional",
|
||||
"password": "tpay-biller",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "tpay-biller-nontransactional"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "YL29DDQ66XZJ67TH",
|
||||
"id": 17,
|
||||
"name": "tpay-biller",
|
||||
"password": "tpay-biller",
|
||||
"permissionID": null,
|
||||
"secureTransaction": true,
|
||||
"username": "tpay-biller"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "p24",
|
||||
"id": 16,
|
||||
"name": "dw-tpay-p24-nontransactional",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "dokup24tpaynontransactional"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "p24",
|
||||
"id": 15,
|
||||
"name": "dw-tpay-p24",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": true,
|
||||
"username": "dokup24tpay"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "doku",
|
||||
"id": 14,
|
||||
"name": "dw-mobileapi-tpay-non-transactional",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "doku_dev_non"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "dokusimpel",
|
||||
"id": 13,
|
||||
"name": "simpel-ads-tpay",
|
||||
"password": "simpel",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "simpel"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "doku",
|
||||
"id": 12,
|
||||
"name": "dw-mobileapi-tpay",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": true,
|
||||
"username": "doku_dev"
|
||||
},
|
||||
{
|
||||
"active": true,
|
||||
"group": null,
|
||||
"hash": "MW7389B8ikj83990",
|
||||
"id": 11,
|
||||
"name": "Middleware Bank",
|
||||
"password": "123456",
|
||||
"permissionID": null,
|
||||
"secureTransaction": false,
|
||||
"username": "mwbank"
|
||||
}
|
||||
],
|
||||
"recordsTotal": 13
|
||||
}
|
||||
|
||||
export default function ManageWebservice() {
|
||||
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);
|
||||
};
|
||||
|
||||
function generateData(data, column) {
|
||||
if (column === 'secureTransaction' || column === 'active') return data ? 'true' : 'false';
|
||||
return data;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Typography sx={{ color: 'gray', size: 'xl' }}>Manage Webservice</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.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
142
src/pages/MemberKYC.js
Normal file
142
src/pages/MemberKYC.js
Normal file
@ -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 MemberKyc() {
|
||||
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 Member KYC</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
|
||||
.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>
|
||||
);
|
||||
}
|
||||
141
src/pages/Register.js
Normal file
141
src/pages/Register.js
Normal file
@ -0,0 +1,141 @@
|
||||
import React, { useState } from "react";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Paper,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
OutlinedInput,
|
||||
} from "@mui/material";
|
||||
import Visibility from "@mui/icons-material/Visibility";
|
||||
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
||||
|
||||
const RegisterPage = () => {
|
||||
// State for form fields
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
// Handle password visibility toggle
|
||||
const handleClickShowPassword = () => setShowPassword(!showPassword);
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
alert("Passwords do not match!");
|
||||
return;
|
||||
}
|
||||
if (name && email && password && confirmPassword) {
|
||||
// Handle registration logic, like calling an API to create the user
|
||||
console.log("Registered with:", { name, email, password });
|
||||
} else {
|
||||
alert("Please fill in all fields.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
style={{ minHeight: "100vh", backgroundColor: "#f4f6f8" }}
|
||||
>
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Paper elevation={3} sx={{ padding: 3 }}>
|
||||
<Typography variant="h5" align="center" gutterBottom>
|
||||
Create an Account
|
||||
</Typography>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Box mb={2}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<FormControl variant="outlined" fullWidth required>
|
||||
<InputLabel>Password</InputLabel>
|
||||
<OutlinedInput
|
||||
label="Password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={handleClickShowPassword}
|
||||
edge="end"
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<FormControl variant="outlined" fullWidth required>
|
||||
<InputLabel>Confirm Password</InputLabel>
|
||||
<OutlinedInput
|
||||
label="Confirm Password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={handleClickShowPassword}
|
||||
edge="end"
|
||||
>
|
||||
{showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box mt={2} textAlign="center">
|
||||
<Button>
|
||||
<Link to="/login">Login</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
type="submit"
|
||||
fullWidth
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterPage;
|
||||
77
src/pages/Setting.js
Normal file
77
src/pages/Setting.js
Normal file
@ -0,0 +1,77 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
Paper,
|
||||
} from "@mui/material";
|
||||
|
||||
const SettingPage = () => {
|
||||
// State for form fields
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (name && email) {
|
||||
// Handle registration logic, like calling an API to create the user
|
||||
console.log("Registered with:", { name, email });
|
||||
} else {
|
||||
alert("Please fill in all fields.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Typography sx={{ color: 'gray', size: 'xl' }}>Manage Webservice</Typography>
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Box sx={{ padding: 3 }}>
|
||||
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box mb={2} m={2}>
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mt={2} mb={2} textAlign="center">
|
||||
<Button style={{ marginRight: '5px'}} variant="contained">Edit</Button>
|
||||
<Button variant="contained" color="success">Submit</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingPage;
|
||||
Reference in New Issue
Block a user