TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update base url

Browse Source
This commit is contained in:
fro1991
2025-02-01 15:51:22 +07:00
parent 291d37265f
commit f35405f431
9 changed files with 1206 additions and 1145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

@ -0,0 +1,2 @@
REACT_APP_BASE_URL=/dashboard
REACT_APP_API_URL=https://tpay.shiblysolution.id/api/

25
src/config/axios.js
View File

@ -1,29 +1,30 @@
import axios from 'axios'; import axios from "axios"
import Cookies from "js-cookie"; import Cookies from "js-cookie"
const token = Cookies.get(`token`) || null; const token = Cookies.get(`token`) || null
const headers = { const headers = {
"Access-Control-Allow-Origin": "*", // "Access-Control-Allow-Origin": "*",
"content-type":"application/json", // "content-type": "application/json",
}; }
if (token) headers["Authorization"] = `Bearer ${token}`; if (token) headers["Authorization"] = `Bearer ${token}`
const instance = axios.create({ const instance = axios.create({
baseURL: `https://tpay.shiblysolution.id/dashboard/`, // baseURL: `https://tpay.shiblysolution.id/dashboard/`,
// baseURL: 'https://api.telkomcel.tl/tpay-stg-dash-api/', // baseURL: 'https://api.telkomcel.tl/tpay-stg-dash-api/',
headers: headers baseURL: process.env.REACT_APP_API_URL,
headers: headers,
}) })
export async function fetchApi(path, method, data, params) { export async function fetchApi(path, method, data, params) {
try { try {
let query = params || {}; let query = params || {}
query.token = token query.token = token
let response = await instance({ let response = await instance({
method: method, method: method,
url: path, url: path,
data: data, data: data,
params: query params: query,
}); })
return response return response
} catch (error) { } catch (error) {
alert(error.message) alert(error.message)

24
src/index.js
View File

@ -1,24 +1,24 @@
import React from "react"; import React from "react"
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client"
import "./index.css"; import "./index.css"
import App from "./routes/routes"; import App from "./routes/routes"
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals"
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom"
import { Provider } from 'react-redux'; import { Provider } from "react-redux"
import store from './store/store'; import store from "./store/store"
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"))
root.render( root.render(
<Provider store={store}> <Provider store={store}>
<BrowserRouter> <BrowserRouter basename={process.env.REACT_APP_BASE_URL}>
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
); )
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(); reportWebVitals()

104
src/pages/Login.js
View File

@ -1,56 +1,51 @@
import React, { useState } from "react"; import React, { useState } from "react"
import { TextField, Button, Box, Typography, Grid, Paper, Avatar, Divider } from "@mui/material"; import { TextField, Button, Box, Typography, Grid, Paper, Avatar, Divider } from "@mui/material"
import {Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from "react-router-dom"
import Cookies from "js-cookie"; import Cookies from "js-cookie"
import { fetchApi } from '../config/axios'; import { fetchApi } from "../config/axios"
import logo from '../logo/logo.jpeg'; import logo from "../logo/logo.jpeg"
const LoginPage = () => { const LoginPage = () => {
// State for email and password // State for email and password
const [username, setUsername] = useState(""); const [username, setUsername] = useState("")
const [password, setPassword] = useState(""); const [password, setPassword] = useState("")
const navigate = useNavigate(); const navigate = useNavigate()
// Handle form submission // Handle form submission
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
try { try {
e.preventDefault(); e.preventDefault()
if (username && password) { if (username && password) {
// GET CREDIENTIAL // GET CREDIENTIAL
let user = await fetchApi('/api/login', 'POST', { username, password }); let user = await fetchApi("/d/login", "POST", { username, password })
if (user) { if (user) {
if (user.data && user.data.data) { if (user.data && user.data.data) {
let resUserLogin = user.data.data; let resUserLogin = user.data.data
console.log('resUserLogin', resUserLogin); console.log("resUserLogin", resUserLogin)
let roleList = JSON.stringify(resUserLogin.roles_list); let roleList = JSON.stringify(resUserLogin.roles_list)
Cookies.set('token', resUserLogin.token.access_token, { expires: 1, path: '/' }); Cookies.set("token", resUserLogin.token.access_token, { expires: 1, path: "/" })
Cookies.set('role', resUserLogin.role_name, { expires: 1, path: '/' }); Cookies.set("role", resUserLogin.role_name, { expires: 1, path: "/" })
Cookies.set('userId', resUserLogin.user.id, { expires: 1, path: '/' }); Cookies.set("userId", resUserLogin.user.id, { expires: 1, path: "/" })
Cookies.set('username', resUserLogin.user.username, { expires: 1, path: '/' }); Cookies.set("username", resUserLogin.user.username, { expires: 1, path: "/" })
// Cookies.set('roles_list', roleList, { expires: 1, path: '/' }); // Cookies.set('roles_list', roleList, { expires: 1, path: '/' });
localStorage.setItem('roles_list', roleList) localStorage.setItem("roles_list", roleList)
navigate('/'); navigate("/")
} else { } else {
alert(user.response.data.message); alert(user.response.data.message)
} }
} }
} else { } else {
alert("Please fill in both fields."); alert("Please fill in both fields.")
} }
} catch (error) { } catch (error) {
if (error.response) alert(error.response.data.message) if (error.response) alert(error.response.data.message)
else alert(error.message) else alert(error.message)
console.log(error); console.log(error)
}
} }
};
return ( return (
<Grid <Grid container justifyContent="center" alignItems="center" style={{ minHeight: "100vh", backgroundColor: "#f4f6f8" }}>
container
justifyContent="center"
alignItems="center"
style={{ minHeight: "100vh", backgroundColor: "#f4f6f8" }}
>
<Grid item xs={12} sm={6} md={4}> <Grid item xs={12} sm={6} md={4}>
<Paper elevation={3} sx={{ padding: 3 }}> <Paper elevation={3} sx={{ padding: 3 }}>
<Typography variant="h5" align="center" gutterBottom> <Typography variant="h5" align="center" gutterBottom>
@ -58,37 +53,16 @@ const LoginPage = () => {
</Typography> </Typography>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Box mb={2}> <Box mb={2}>
<TextField <TextField label="Email" variant="outlined" fullWidth value={username} onChange={(e) => setUsername(e.target.value)} type="text" required />
label="Email"
variant="outlined"
fullWidth
value={username}
onChange={(e) => setUsername(e.target.value)}
type="text"
required
/>
</Box> </Box>
<Box mb={2}> <Box mb={2}>
<TextField <TextField label="Password" variant="outlined" fullWidth value={password} onChange={(e) => setPassword(e.target.value)} type="password" required />
label="Password"
variant="outlined"
fullWidth
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
required
/>
</Box> </Box>
<Box mt={2} textAlign="center"> <Box mt={2} textAlign="center">
<Button> <Button>
<Link to="/register">Register</Link> <Link to="/register">Register</Link>
</Button> </Button>
<Button <Button variant="contained" color="primary" type="submit" fullWidth>
variant="contained"
color="primary"
type="submit"
fullWidth
>
Login Login
</Button> </Button>
</Box> </Box>
@ -109,27 +83,27 @@ const LoginPage = () => {
<Divider sx={{ mb: 2 }} /> <Divider sx={{ mb: 2 }} />
{/* Content */} {/* Content */}
<Box justifyItems={'center'} <Box
justifyItems={"center"}
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", // Align items vertically alignItems: "center", // Align items vertically
justifyContent: "center", // Center content horizontally justifyContent: "center", // Center content horizontally
gap: 1, // Space between logo and text gap: 1, // Space between logo and text
mt: 2, // Optional margin-top mt: 2, // Optional margin-top
}}> }}
<Avatar >
src={logo} <Avatar src={logo} alt="T-PAY" sx={{ backgroundColor: "red", width: "50px", height: "50px" }} />
alt="T-PAY" <Typography variant="h6" sx={{ fontWeight: "bold" }}>
sx={{ backgroundColor: 'red', width: '50px', height: '50px' }} T-PAY
/> </Typography>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>T-PAY</Typography>
</Box> </Box>
<Typography variant="body2" sx={{ color: "gray" }}> <Typography variant="body2" sx={{ color: "gray" }}>
© 2025 TelinDigital Solution © 2025 TelinDigital Solution
</Typography> </Typography>
</Box> </Box>
</Grid> </Grid>
); )
}; }
export default LoginPage; export default LoginPage

250
src/pages/Profile.js
View File

@ -1,34 +1,21 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react"
import { import { TextField, Button, Box, Typography, Paper, FormControl, Select, InputLabel, MenuItem, FormControlLabel, Checkbox, FormLabel } from "@mui/material"
TextField, import { fetchApi } from "../config/axios"
Button, import WarningDialog from "../components/WarningDialog"
Box, import Cookies from "js-cookie"
Typography,
Paper,
FormControl,
Select,
InputLabel,
MenuItem,
FormControlLabel,
Checkbox,
FormLabel
} from "@mui/material";
import { fetchApi } from '../config/axios';
import WarningDialog from '../components/WarningDialog';
import Cookies from "js-cookie";
const ProfilePage = () => { const ProfilePage = () => {
// State for form fields // State for form fields
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
username: '', username: "",
name: '', name: "",
email: '', email: "",
status: '', status: "",
idRole: '', idRole: "",
password: '', password: "",
oldPassword: '', oldPassword: "",
confirmPassword: '', confirmPassword: "",
newPassword: '' newPassword: "",
// nik: '', // nik: '',
// position: '', // position: '',
// telp: '', // telp: '',
@ -36,88 +23,89 @@ const ProfilePage = () => {
// organisasi: '', // organisasi: '',
// devisi: '', // devisi: '',
// unit: '', // unit: '',
}); })
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([])
const [isModalOpen, setIsModalOpen] = useState(false); // ERROR MSG const [isModalOpen, setIsModalOpen] = useState(false) // ERROR MSG
const [error, setError] = useState(""); // ERROR MSG const [error, setError] = useState("") // ERROR MSG
useEffect(() => { useEffect(() => {
fetchUser() fetchUser()
fetchUserRoles() fetchUserRoles()
// eslint-disable-next-line // eslint-disable-next-line
}, []); }, [])
async function fetchUser(params) { async function fetchUser(params) {
try { try {
let userId = Cookies.get(`userId`); let userId = Cookies.get(`userId`)
let token = Cookies.get(`token`); let token = Cookies.get(`token`)
let fetchUsers = await fetchApi(`/api/user/detail/${userId}`, 'GET', null, { token: token }); let fetchUsers = await fetchApi(`d/user/detail/${userId}`, "GET", null, { token: token })
// setFormData({}) // setFormData({})
console.log(fetchUsers); console.log(fetchUsers)
setFormData(fetchUsers.data.data) setFormData(fetchUsers.data.data)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
handleError(`${error.message}. \n ${error.response.data.error}`) handleError(`${error.message}. \n ${error.response.data.error}`)
} }
} }
async function fetchUserRoles(params) { async function fetchUserRoles(params) {
try { try {
let userRoles = await fetchApi('/api/user_role/list', 'GET', null, { let userRoles = await fetchApi("d/user_role/list", "GET", null, {
limit: 10, limit: 10,
page: 1, page: 1,
with_deleted: true, with_deleted: true,
order_field: 'id', order_field: "id",
order_direction: 'ASC' order_direction: "ASC",
}); })
console.log(userRoles); console.log(userRoles)
if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
handleError(`${error.message}. \n ${error.response.data.error}`) handleError(`${error.message}. \n ${error.response.data.error}`)
} }
} }
// Handle form submission // Handle form submission
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); e.preventDefault()
// if (name && email) { // if (name && email) {
// // Handle registration logic, like calling an API to create the user // // Handle registration logic, like calling an API to create the user
// console.log("Registered with:", { name, email }); // console.log("Registered with:", { name, email });
// } else { // } else {
// alert("Please fill in all fields."); // alert("Please fill in all fields.");
// } // }
}; }
const handleChange = (e) => { const handleChange = (e) => {
let { name, value } = e.target; let { name, value } = e.target
if (name === 'status' && value === "Y") value = "N" if (name === "status" && value === "Y") value = "N"
else if (name === 'status' && value === "N") value = "Y" else if (name === "status" && value === "N") value = "Y"
setFormData((prev) => ({ ...prev, [name]: value })); setFormData((prev) => ({ ...prev, [name]: value }))
}; }
const handleError = (msg) => { // ERROR MSG const handleError = (msg) => {
setError(msg); // ERROR MSG
setIsModalOpen(true); setError(msg)
}; setIsModalOpen(true)
}
const closeModal = () => { // ERROR MSG const closeModal = () => {
setIsModalOpen(false); // ERROR MSG
setError(""); setIsModalOpen(false)
}; setError("")
}
async function updatePassword() { async function updatePassword() {
try { try {
let updatePassword = await fetchApi(`/api/user/update_password`, 'PUT', { let updatePassword = await fetchApi(`d/user/update_password`, "PUT", {
password: formData.password, password: formData.password,
retype_password: formData.confirmPassword retype_password: formData.confirmPassword,
}); })
console.log(updatePassword); console.log(updatePassword)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
} }
@ -128,54 +116,26 @@ const ProfilePage = () => {
onClose={closeModal} onClose={closeModal}
errorMessage={error} errorMessage={error}
/> />
<Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}> <Box sx={{ display: "flex", justifyContent: "flex-start", pr: 2 }}>
<Typography sx={{ color: 'gray', fontSize: '30px' }}>User Profile</Typography> <Typography sx={{ color: "gray", fontSize: "30px" }}>User Profile</Typography>
</Box> </Box>
<Box sx={{ padding: 3 }}> <Box sx={{ padding: 3 }}>
<Box sx={{ padding: 3 }}> <Box sx={{ padding: 3 }}>
<Paper sx={{ width: '100%', overflow: 'hidden' }}> <Paper sx={{ width: "100%", overflow: "hidden" }}>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Username" name="username" variant="outlined" fullWidth value={formData.username} onChange={handleChange} required disabled />
label="Username"
name="username"
variant="outlined"
fullWidth
value={formData.username}
onChange={handleChange}
required
disabled
/>
</Box> </Box>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Name" name="name" variant="outlined" fullWidth value={formData.name} onChange={handleChange} required />
label="Name"
name="name"
variant="outlined"
fullWidth
value={formData.name}
onChange={handleChange}
required
/>
</Box> </Box>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Email" name="email" variant="outlined" fullWidth value={formData.email} onChange={handleChange} type="email" required />
label="Email"
name="email"
variant="outlined"
fullWidth
value={formData.email}
onChange={handleChange}
type="email"
required
/>
</Box> </Box>
<Box mb={2} m={2} sx={{ display: 'flex', justifyContent: 'flex-start' }}> <Box mb={2} m={2} sx={{ display: "flex", justifyContent: "flex-start" }}>
<FormLabel component="legend">Status : <FormLabel component="legend">
<FormControlLabel required label="Aktif" control={ Status :
<Checkbox value={formData.status} name="status" onClick={handleChange} <FormControlLabel required label="Aktif" control={<Checkbox value={formData.status} name="status" onClick={handleChange} checked={formData.status === "Y" ? true : false} />} />
checked={ formData.status === "Y" ? true : false } />
}/>
</FormLabel> </FormLabel>
</Box> </Box>
{/* <Box mb={2} m={2}> {/* <Box mb={2} m={2}>
@ -272,38 +232,26 @@ const ProfilePage = () => {
<Box mb={2} m={2}> <Box mb={2} m={2}>
<FormControl fullWidth required> <FormControl fullWidth required>
<InputLabel id="organization-label">Role</InputLabel> <InputLabel id="organization-label">Role</InputLabel>
<Select <Select labelId="organization-label" id="organization" value={formData.idRole} label="Role" onChange={handleChange} name="idRole">
labelId="organization-label" {roles.map((el, idx) => (
id="organization" <MenuItem key={idx} value={el.id}>
value={formData.idRole} {el.name}
label="Role" </MenuItem>
onChange={handleChange} ))}
name='idRole'
>
{
roles.map((el, idx) => (
<MenuItem key={idx} value={el.id}>{el.name}</MenuItem>
))
}
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Password" name="password" value={formData.password} onChange={handleChange} fullWidth type="password" required disabled />
label="Password"
name="password"
value={formData.password}
onChange={handleChange}
fullWidth
type="password"
required
disabled
/>
</Box> </Box>
<Box mt={2} mb={2} textAlign="center"> <Box mt={2} mb={2} textAlign="center">
<Button style={{ marginRight: '5px' }} variant="contained">Cancel</Button> <Button style={{ marginRight: "5px" }} variant="contained">
<Button variant="contained" color="success">Submit</Button> Cancel
</Button>
<Button variant="contained" color="success">
Submit
</Button>
</Box> </Box>
</form> </form>
</Paper> </Paper>
@ -312,51 +260,31 @@ const ProfilePage = () => {
<Box sx={{ padding: 3 }}> <Box sx={{ padding: 3 }}>
<Box sx={{ padding: 3 }}> <Box sx={{ padding: 3 }}>
<Typography sx={{ color: 'gray', fontSize: '30px' }}>User Password</Typography> <Typography sx={{ color: "gray", fontSize: "30px" }}>User Password</Typography>
<Paper sx={{ width: '100%', overflow: 'hidden' }}> <Paper sx={{ width: "100%", overflow: "hidden" }}>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Old Password" name="oldPassword" value={formData.oldPassword} onChange={handleChange} fullWidth type="password" required />
label="Old Password"
name="oldPassword"
value={formData.oldPassword}
onChange={handleChange}
fullWidth
type="password"
required
/>
</Box> </Box>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="New Password" name="newPassword" value={formData.newPassword} onChange={handleChange} fullWidth type="password" required />
label="New Password"
name="newPassword"
value={formData.newPassword}
onChange={handleChange}
fullWidth
type="password"
required
/>
</Box> </Box>
<Box mb={2} m={2}> <Box mb={2} m={2}>
<TextField <TextField label="Confirm Password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} fullWidth type="password" required />
label="Confirm Password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleChange}
fullWidth
type="password"
required
/>
</Box> </Box>
<Box mt={2} mb={2} textAlign="center"> <Box mt={2} mb={2} textAlign="center">
<Button style={{ marginRight: '5px' }} variant="contained">Cancel</Button> <Button style={{ marginRight: "5px" }} variant="contained">
<Button variant="contained" onClick={() => updatePassword} color="success">Update</Button> Cancel
</Button>
<Button variant="contained" onClick={() => updatePassword} color="success">
Update
</Button>
</Box> </Box>
</Paper> </Paper>
</Box> </Box>
</Box> </Box>
</Box> </Box>
); )
}; }
export default ProfilePage; export default ProfilePage

182
src/pages/RoleManagement.js
View File

@ -1,26 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react"
import { import { Container, Typography, Button, Dialog, DialogTitle, DialogContent, DialogActions, TextField, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Checkbox, Paper, Box } from "@mui/material"
Container, import AddIcon from "@mui/icons-material/Add"
Typography, import { fetchApi } from "../config/axios"
Button,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
IconButton,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Checkbox,
Paper,
Box
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { fetchApi } from '../config/axios';
// Initial list of roles and menus // Initial list of roles and menus
// const initialRoles = ['Admin', 'Escrow', 'Agent']; // const initialRoles = ['Admin', 'Escrow', 'Agent'];
@ -38,106 +19,112 @@ import { fetchApi } from '../config/axios';
// ]; // ];
const RoleMenuTable = () => { const RoleMenuTable = () => {
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([])
// const [roleMenus, setRoleMenus] = useState([]); // const [roleMenus, setRoleMenus] = useState([]);
const [menus, setMenus] = useState([]); const [menus, setMenus] = useState([])
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false)
const [newRole, setNewRole] = useState(''); const [newRole, setNewRole] = useState("")
const [confirmDialog, setConfirmDialog] = useState({ const [confirmDialog, setConfirmDialog] = useState({
open: false, roleName: '', menuData: [], roleId: '', menuId: '', status: null, menuName: '' open: false,
}); roleName: "",
menuData: [],
roleId: "",
menuId: "",
status: null,
menuName: "",
})
useEffect(() => { useEffect(() => {
fetchData() fetchData()
// eslint-disable-next-line // eslint-disable-next-line
}, []); }, [])
async function fetchData(params) { async function fetchData(params) {
try { try {
let userRole = await fetchApi('/api/user_role/list', 'GET', null, { let userRole = await fetchApi("d/user_role/list", "GET", null, {
limit: 5, limit: 5,
page: 1, page: 1,
with_deleted: true, with_deleted: true,
order_field: 'id', order_field: "id",
order_direction: 'ASC' order_direction: "ASC",
}); })
let userMenu = await fetchApi('/api/menus/list', 'GET', null, { let userMenu = await fetchApi("/api/menus/list", "GET", null, {
limit: 50, limit: 50,
page: 1, page: 1,
with_deleted: true, with_deleted: true,
order_field: 'id', order_field: "id",
order_direction: 'ASC' order_direction: "ASC",
}); })
setMenus(userMenu.data.data.list) setMenus(userMenu.data.data.list)
console.log('role',userRole); console.log("role", userRole)
console.log('menu',userMenu); console.log("menu", userMenu)
if (userRole.data && userRole.data.data) setRoles(userRole.data.data.list) if (userRole.data && userRole.data.data) setRoles(userRole.data.data.list)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
} }
const handleCheckboxChange = (roleName, menuData, roleId, menuId, status, menuName) => { const handleCheckboxChange = (roleName, menuData, roleId, menuId, status, menuName) => {
setConfirmDialog({ open: true, roleName, menuData, roleId, menuId, status, menuName }); setConfirmDialog({ open: true, roleName, menuData, roleId, menuId, status, menuName })
}; }
const handleConfirm = async (confirm) => { const handleConfirm = async (confirm) => {
const { roleName, menuData, roleId, menuId, status } = confirmDialog; const { roleName, menuData, roleId, menuId, status } = confirmDialog
try { try {
if (confirm) { if (confirm) {
console.log(confirm,confirmDialog); console.log(confirm, confirmDialog)
if (status) { if (status) {
let generateRoles = menuData.filter(el => +el !== +menuId); let generateRoles = menuData.filter((el) => +el !== +menuId)
console.log(generateRoles); console.log(generateRoles)
let userMenu = await fetchApi(`/api/user_role/update/${roleId}`, 'PUT', { let userMenu = await fetchApi(`d/user_role/update/${roleId}`, "PUT", {
name: roleName, name: roleName,
roles: generateRoles, roles: generateRoles,
status: "Y" status: "Y",
}) })
console.log(userMenu); console.log(userMenu)
await fetchData() await fetchData()
} else { } else {
let generateRoles = menuData.filter(el => +el !== +menuId); let generateRoles = menuData.filter((el) => +el !== +menuId)
generateRoles.push(`${menuId}`) generateRoles.push(`${menuId}`)
console.log(generateRoles); console.log(generateRoles)
let userMenu = await fetchApi(`/api/user_role/update/${roleId}`, 'PUT', { let userMenu = await fetchApi(`d/user_role/update/${roleId}`, "PUT", {
name: roleName, name: roleName,
roles: generateRoles, roles: generateRoles,
status: "Y" status: "Y",
}) })
console.log(userMenu); console.log(userMenu)
await fetchData() await fetchData()
} }
} }
setConfirmDialog({ open: false, role: '', menu: '' }); setConfirmDialog({ open: false, role: "", menu: "" })
} catch (error) { } catch (error) {
console.log(error); console.log(error)
}
} }
};
const handleAddRole = async () => { const handleAddRole = async () => {
try { try {
await fetchApi('/api/user_role/create', 'POST', { await fetchApi("d/user_role/create", "POST", {
"name": newRole, name: newRole,
"roles": [], roles: [],
"status": "Y" status: "Y",
}); })
await fetchData(); await fetchData()
} catch (error) { } catch (error) {
console.log(error); console.log(error)
}
setNewRole("")
setOpenDialog(false)
} }
setNewRole('');
setOpenDialog(false);
};
const deleteRole = async (role) => { const deleteRole = async (role) => {
try { try {
let resDeleteRole = await fetchApi(`/api/user_role/delete/${role.id}/true`, 'DELETE'); let resDeleteRole = await fetchApi(`d/user_role/delete/${role.id}/true`, "DELETE")
console.log(resDeleteRole); console.log(resDeleteRole)
await fetchData(); await fetchData()
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
} }
@ -146,28 +133,32 @@ const RoleMenuTable = () => {
<Typography variant="h4" align="center" gutterBottom marginTop={5}> <Typography variant="h4" align="center" gutterBottom marginTop={5}>
Role Menu Management Role Menu Management
</Typography> </Typography>
<IconButton <IconButton style={{ position: "absolute", top: 16, right: 16 }} color="primary" onClick={() => setOpenDialog(true)}>
style={{ position: 'absolute', top: 16, right: 16 }}
color="primary"
onClick={() => setOpenDialog(true)}
>
<AddIcon /> <AddIcon />
</IconButton> </IconButton>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', pr: 2, }}> <Box sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center", pr: 2 }}>
<Button variant="contained" color="primary" onClick={() => setOpenDialog(true)}>Create Role</Button> <Button variant="contained" color="primary" onClick={() => setOpenDialog(true)}>
Create Role
</Button>
</Box> </Box>
{/* Table for roles and menus */} {/* Table for roles and menus */}
<TableContainer component={Paper} style={{ marginTop: '20px' }}> <TableContainer component={Paper} style={{ marginTop: "20px" }}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell><strong>Role</strong></TableCell> <TableCell>
<strong>Role</strong>
</TableCell>
{menus.map((menu, idx) => ( {menus.map((menu, idx) => (
<TableCell key={idx} align="center"><strong>{menu.name}</strong></TableCell> <TableCell key={idx} align="center">
<strong>{menu.name}</strong>
</TableCell>
))} ))}
<TableCell><strong>Action</strong></TableCell> <TableCell>
<strong>Action</strong>
</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -176,12 +167,7 @@ const RoleMenuTable = () => {
<TableCell>{role.name}</TableCell> <TableCell>{role.name}</TableCell>
{menus.map((menu, idx) => ( {menus.map((menu, idx) => (
<TableCell key={idx} align="center"> <TableCell key={idx} align="center">
<Checkbox <Checkbox checked={role.roles.find((el) => +el === menu.id) ? true : false} onChange={() => handleCheckboxChange(role.name, role.roles, role.id, menu.id, role.roles.find((el) => +el === menu.id) ? true : false, menu.name)} />
checked={(role.roles.find(el => +el === menu.id)) ? true : false}
onChange={() => handleCheckboxChange(
role.name, role.roles, role.id, menu.id, (role.roles.find(el => +el === menu.id)) ? true : false, menu.name
)}
/>
</TableCell> </TableCell>
))} ))}
<TableCell align="center"> <TableCell align="center">
@ -197,15 +183,7 @@ const RoleMenuTable = () => {
<Dialog open={openDialog} onClose={() => setOpenDialog(false)}> <Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
<DialogTitle>Add New Role</DialogTitle> <DialogTitle>Add New Role</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField autoFocus margin="dense" label="Role Name" type="text" fullWidth value={newRole} onChange={(e) => setNewRole(e.target.value)} />
autoFocus
margin="dense"
label="Role Name"
type="text"
fullWidth
value={newRole}
onChange={(e) => setNewRole(e.target.value)}
/>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpenDialog(false)} color="secondary"> <Button onClick={() => setOpenDialog(false)} color="secondary">
@ -221,7 +199,7 @@ const RoleMenuTable = () => {
<Dialog open={confirmDialog.open} onClose={() => handleConfirm(false)}> <Dialog open={confirmDialog.open} onClose={() => handleConfirm(false)}>
<DialogTitle>Confirm Menu Selection</DialogTitle> <DialogTitle>Confirm Menu Selection</DialogTitle>
<DialogContent> <DialogContent>
Are you sure you want to <strong>{confirmDialog.status ? 'remove ' : 'add '}</strong> Are you sure you want to <strong>{confirmDialog.status ? "remove " : "add "}</strong>
the menu <strong>{confirmDialog.menuName}</strong> for role <strong>{confirmDialog.roleName}</strong>? the menu <strong>{confirmDialog.menuName}</strong> for role <strong>{confirmDialog.roleName}</strong>?
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -234,7 +212,7 @@ const RoleMenuTable = () => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Container> </Container>
); )
}; }
export default RoleMenuTable; export default RoleMenuTable

294
src/pages/UserManagement.js
View File

@ -1,31 +1,28 @@
// Import React and Material-UI components // Import React and Material-UI components
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react"
import { import { Paper, Button, Dialog, DialogActions, DialogContent, DialogTitle, TableContainer, FormLabel, Checkbox, FormControlLabel, Box, Typography, TextField, Grid, MenuItem, InputLabel, Select, FormControl } from "@mui/material"
Paper, Button, Dialog, DialogActions, DialogContent, DialogTitle, TableContainer, FormLabel, import ReusableTable from "../components/Table"
Checkbox, FormControlLabel, Box, Typography, TextField, Grid, MenuItem, InputLabel, Select, FormControl import { fetchApi } from "../config/axios"
} from '@mui/material'; import WarningDialog from "../components/WarningDialog" // ERROR MSG
import ReusableTable from '../components/Table';
import { fetchApi } from '../config/axios';
import WarningDialog from '../components/WarningDialog'; // ERROR MSG
const columns = [ const columns = [
{ id: 'username', label: 'Username' }, { id: "username", label: "Username" },
{ id: 'name', label: 'Name' }, { id: "name", label: "Name" },
{ id: 'email', label: 'Email' }, { id: "email", label: "Email" },
{ id: 'role_name', label: 'Roles' }, { id: "role_name", label: "Roles" },
{ id: 'status', label: 'Status' }, { id: "status", label: "Status" },
{ id: 'created_at', label: 'Created' }, { id: "created_at", label: "Created" },
{ id: 'actions', label: 'Actions' }, { id: "actions", label: "Actions" },
]; ]
const initiateForm = { const initiateForm = {
username: '', username: "",
name: '', name: "",
email: '', email: "",
status: '', status: "",
id_role: '', id_role: "",
password: '', password: "",
confirmPassword: '', confirmPassword: "",
// nik: '', // nik: '',
// position: '', // position: '',
// telp: '', // telp: '',
@ -36,65 +33,65 @@ const initiateForm = {
} }
export default function UserManagement() { export default function UserManagement() {
const [users, setUsers] = useState([]); const [users, setUsers] = useState([])
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false)
const [selectedUser, setSelectedUser] = useState(null); const [selectedUser, setSelectedUser] = useState(null)
const [selectedRoles, setSelectedRoles] = useState([]); const [selectedRoles, setSelectedRoles] = useState([])
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([])
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false)
const [labelDialog, setLabelDialog] = useState(''); const [labelDialog, setLabelDialog] = useState("")
const [formData, setFormData] = useState(initiateForm); const [formData, setFormData] = useState(initiateForm)
const [errors, setErrors] = useState({ passwordMatch: false, }); const [errors, setErrors] = useState({ passwordMatch: false })
const [isModalOpen, setIsModalOpen] = useState(false); // ERROR MSG const [isModalOpen, setIsModalOpen] = useState(false) // ERROR MSG
const [error, setError] = useState(""); // ERROR MSG const [error, setError] = useState("") // ERROR MSG
useEffect(() => { useEffect(() => {
fetchUserRoles() fetchUserRoles()
fetchUser() fetchUser()
// eslint-disable-next-line // eslint-disable-next-line
}, []); }, [])
async function fetchUser(params) { async function fetchUser(params) {
try { try {
let fetchUsers = await fetchApi('/api/user/list', 'GET', null, { let fetchUsers = await fetchApi("d/user/list", "GET", null, {
limit: 5, limit: 5,
page: 1, page: 1,
with_deleted: true, with_deleted: true,
order_field: 'id', order_field: "id",
order_direction: 'ASC' order_direction: "ASC",
}); })
console.log(fetchUsers); console.log(fetchUsers)
if (fetchUsers.data && fetchUsers.data.data) { if (fetchUsers.data && fetchUsers.data.data) {
let resFetchUsers = fetchUsers.data.data.list let resFetchUsers = fetchUsers.data.data.list
let temp = resFetchUsers.map(el => { let temp = resFetchUsers.map((el) => {
if (el.status === 'Y') el.status = 'Aktif' if (el.status === "Y") el.status = "Aktif"
else el.status ='Tidak Aktif' else el.status = "Tidak Aktif"
el.actions = [ el.actions = [
{ label: 'Edit', color: 'info', onClick: (row) => handleOpen(row) }, { label: "Edit", color: "info", onClick: (row) => handleOpen(row) },
{ label: 'Delete', color: 'secondary', onClick: (row) => handleDelete(row) }, { label: "Delete", color: "secondary", onClick: (row) => handleDelete(row) },
] ]
return el return el
}) })
setUsers(temp) setUsers(temp)
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error)
handleError(`${error.message}. \n ${error.response.data.error}`) handleError(`${error.message}. \n ${error.response.data.error}`)
} }
} }
async function fetchUserRoles(params) { async function fetchUserRoles(params) {
try { try {
let userRoles = await fetchApi('/api/user_role/list', 'GET', null, { let userRoles = await fetchApi("d/user_role/list", "GET", null, {
limit: 5, limit: 5,
page: 1, page: 1,
with_deleted: true, with_deleted: true,
order_field: 'id', order_field: "id",
order_direction: 'ASC' order_direction: "ASC",
}); })
if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
handleError(`${error.message}. \n ${error.response.data.error}`) handleError(`${error.message}. \n ${error.response.data.error}`)
} }
} }
@ -106,95 +103,89 @@ export default function UserManagement() {
// setSelectedUser(user); // setSelectedUser(user);
// setSelectedRoles(user.role_name); // setSelectedRoles(user.role_name);
// setOpen(true); // setOpen(true);
}; }
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false)
setSelectedUser(null); setSelectedUser(null)
setSelectedRoles([]); setSelectedRoles([])
}; }
const handleRoleChange = (role) => { const handleRoleChange = (role) => {
setSelectedRoles((prevRoles) => setSelectedRoles((prevRoles) => (prevRoles.includes(role) ? prevRoles.filter((r) => r !== role) : [...prevRoles, role]))
prevRoles.includes(role) }
? prevRoles.filter((r) => r !== role)
: [...prevRoles, role]
);
};
const handleDelete = (row) => { const handleDelete = (row) => {
const newData = users.filter((item) => item.id !== row.id); const newData = users.filter((item) => item.id !== row.id)
setUsers(newData); setUsers(newData)
alert(`Deleted ${row.name}`); alert(`Deleted ${row.name}`)
}; }
const handleSave = () => { const handleSave = () => {
setUsers((prevUsers) => setUsers((prevUsers) => prevUsers.map((user) => (user.id === selectedUser.id ? { ...user, roles: selectedRoles } : user)))
prevUsers.map((user) => handleClose()
user.id === selectedUser.id ? { ...user, roles: selectedRoles } : user }
)
);
handleClose();
};
const handleChange = (e) => { const handleChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target
setFormData((prev) => ({ ...prev, [name]: value })); setFormData((prev) => ({ ...prev, [name]: value }))
if (name === 'confirmPassword' || name === 'password') { if (name === "confirmPassword" || name === "password") {
setErrors((prev) => ({ setErrors((prev) => ({
...prev, ...prev,
passwordMatch: name === 'confirmPassword' ? value !== formData.password : formData.confirmPassword !== value, passwordMatch: name === "confirmPassword" ? value !== formData.password : formData.confirmPassword !== value,
})); }))
}
} }
};
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
if (!errors.passwordMatch) { if (!errors.passwordMatch) {
console.log('Form Data:', formData); console.log("Form Data:", formData)
// setOpen(false); // setOpen(false);
// setFormData(initiateForm); // setFormData(initiateForm);
} }
console.log(formData); console.log(formData)
formData.status = "Y"; formData.status = "Y"
if (labelDialog === `Create User`) { if (labelDialog === `Create User`) {
delete formData.confirmPassword delete formData.confirmPassword
let createUser = await fetchApi('/api/user/create', 'POST', formData); let createUser = await fetchApi("d/user/create", "POST", formData)
console.log(createUser); console.log(createUser)
} else if (labelDialog === `Edit User`) { } else if (labelDialog === `Edit User`) {
delete formData.created_at delete formData.created_at
delete formData.updated_at delete formData.updated_at
delete formData.role_name delete formData.role_name
delete formData.actions delete formData.actions
delete formData.confirmPassword delete formData.confirmPassword
console.log(formData); console.log(formData)
let editUser = await fetchApi(`/api/user/update/${formData.id}`, 'PUT', formData); let editUser = await fetchApi(`d/user/update/${formData.id}`, "PUT", formData)
console.log('editUser', editUser); console.log("editUser", editUser)
} }
await fetchUser() await fetchUser()
setOpenDialog(false) setOpenDialog(false)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
handleError(`${error.message}. \n ${error.response.data.error}`) handleError(`${error.message}. \n ${error.response.data.error}`)
} }
} }
const createNewUserBtn = () => { const createNewUserBtn = () => {
setLabelDialog(`Create User`); setLabelDialog(`Create User`)
setFormData(initiateForm); setFormData(initiateForm)
setOpenDialog(true); setOpenDialog(true)
} }
const handleError = (msg) => { // ERROR MSG const handleError = (msg) => {
setError(msg); // ERROR MSG
setIsModalOpen(true); setError(msg)
}; setIsModalOpen(true)
}
const closeModal = () => { // ERROR MSG const closeModal = () => {
setIsModalOpen(false); // ERROR MSG
setError(""); setIsModalOpen(false)
}; setError("")
}
return ( return (
<Box sx={{ padding: 3 }}> <Box sx={{ padding: 3 }}>
@ -203,12 +194,14 @@ export default function UserManagement() {
onClose={closeModal} onClose={closeModal}
errorMessage={error} errorMessage={error}
/> />
<Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}> <Box sx={{ display: "flex", justifyContent: "flex-start", pr: 2 }}>
<Typography sx={{ color: 'gray', fontSize: '30px' }}>User Management</Typography> <Typography sx={{ color: "gray", fontSize: "30px" }}>User Management</Typography>
</Box> </Box>
<Box p={3}> <Box p={3}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', pr: 2, }}> <Box sx={{ display: "flex", justifyContent: "flex-end", alignItems: "center", pr: 2 }}>
<Button variant="contained" color="primary" onClick={() => createNewUserBtn()}>Create New User</Button> <Button variant="contained" color="primary" onClick={() => createNewUserBtn()}>
Create New User
</Button>
</Box> </Box>
<TableContainer component={Paper} sx={{ marginTop: 3 }}> <TableContainer component={Paper} sx={{ marginTop: 3 }}>
<ReusableTable columns={columns} data={users} /> <ReusableTable columns={columns} data={users} />
@ -217,16 +210,7 @@ export default function UserManagement() {
<DialogTitle>Add Roles to {selectedUser?.name}</DialogTitle> <DialogTitle>Add Roles to {selectedUser?.name}</DialogTitle>
<DialogContent> <DialogContent>
{roles.map((role) => ( {roles.map((role) => (
<FormControlLabel <FormControlLabel key={role.id} control={<Checkbox checked={selectedRoles.includes(role.name)} onChange={() => handleRoleChange(role.name)} />} label={role.name} />
key={role.id}
control={
<Checkbox
checked={selectedRoles.includes(role.name)}
onChange={() => handleRoleChange(role.name)}
/>
}
label={role.name}
/>
))} ))}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -245,41 +229,17 @@ export default function UserManagement() {
<DialogContent sx={{ marginTop: 2 }}> <DialogContent sx={{ marginTop: 2 }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField sx={{ marginTop: 2 }} label="Username" name="username" value={formData.username} onChange={handleChange} fullWidth required />
sx={{ marginTop: 2 }}
label="Username"
name="username"
value={formData.username}
onChange={handleChange}
fullWidth
required
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField sx={{ marginTop: 2 }} label="Name" name="name" value={formData.name} onChange={handleChange} fullWidth required />
sx={{ marginTop: 2 }}
label="Name"
name="name"
value={formData.name}
onChange={handleChange}
fullWidth
required
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField label="Email" name="email" value={formData.email} onChange={handleChange} fullWidth type="email" required />
label="Email"
name="email"
value={formData.email}
onChange={handleChange}
fullWidth
type="email"
required
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<FormLabel component="legend">Status</FormLabel> <FormLabel component="legend">Status</FormLabel>
<FormControlLabel control={<Checkbox name='status' defaultChecked onChange={handleChange} value={formData.status === 'Y' ? true : false}/>} label="Aktif" /> <FormControlLabel control={<Checkbox name="status" defaultChecked onChange={handleChange} value={formData.status === "Y" ? true : false} />} label="Aktif" />
</Grid> </Grid>
{/* <Grid item xs={12}> {/* <Grid item xs={12}>
<TextField <TextField
@ -380,45 +340,20 @@ export default function UserManagement() {
<Grid item xs={12}> <Grid item xs={12}>
<FormControl fullWidth required> <FormControl fullWidth required>
<InputLabel id="organization-label">Role</InputLabel> <InputLabel id="organization-label">Role</InputLabel>
<Select <Select labelId="organization-label" id="organization" value={formData.id_role} label="Role" onChange={handleChange} name="id_role">
labelId="organization-label" {roles.map((el, idx) => (
id="organization" <MenuItem key={idx} value={el.id}>
value={formData.id_role} {el.name}
label="Role" </MenuItem>
onChange={handleChange} ))}
name='id_role'
>
{
roles.map((el, idx) => (
<MenuItem key={idx} value={el.id}>{el.name}</MenuItem>
))
}
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField label="Password" name="password" value={formData.password} onChange={handleChange} fullWidth type="password" required />
label="Password"
name="password"
value={formData.password}
onChange={handleChange}
fullWidth
type="password"
required
/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField label="Confirm Password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} fullWidth type="password" error={errors.passwordMatch} helperText={errors.passwordMatch ? "Passwords do not match" : ""} required />
label="Confirm Password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleChange}
fullWidth
type="password"
error={errors.passwordMatch}
helperText={errors.passwordMatch ? "Passwords do not match" : ""}
required
/>
</Grid> </Grid>
</Grid> </Grid>
</DialogContent> </DialogContent>
@ -426,19 +361,12 @@ export default function UserManagement() {
<Button onClick={() => setOpenDialog(false)} color="secondary"> <Button onClick={() => setOpenDialog(false)} color="secondary">
Cancel Cancel
</Button> </Button>
<Button <Button onClick={handleSubmit} color="primary" disabled={!formData.name || !formData.email || !formData.password || errors.passwordMatch || !formData.id_role || !formData.status || !formData.username}>
onClick={handleSubmit}
color="primary"
disabled={!formData.name || !formData.email || !formData.password || errors.passwordMatch || !formData.id_role
|| !formData.status || !formData.username
}
>
Submit Submit
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Box> </Box>
</Box> </Box>
); )
} }

424
src/routes/routes.js
View File

@ -1,70 +1,69 @@
import React, { useEffect } from 'react'; import React, { useEffect } from "react"
import { Routes, Route, useLocation, Navigate } from 'react-router-dom'; import { Routes, Route, useLocation, Navigate } from "react-router-dom"
import "../pages/Dashboard.css"; import "../pages/Dashboard.css"
import Sidebar from "../components/SideBar"; import Sidebar from "../components/SideBar"
import Header from "../components/Header"; import Header from "../components/Header"
import { Box, Toolbar } from "@mui/material"; import { Box, Toolbar } from "@mui/material"
import Cookies from "js-cookie"; import Cookies from "js-cookie"
// GENERAL // GENERAL
import Dasboard from '../pages/Dashboard'; import Dasboard from "../pages/Dashboard"
import LoginPage from '../pages/Login'; import LoginPage from "../pages/Login"
import RegisterPage from '../pages/Register'; import RegisterPage from "../pages/Register"
import ProfilePage from '../pages/Profile'; import ProfilePage from "../pages/Profile"
// ADMIN // ADMIN
import ManageTransfers from '../pages/ManageTransfers'; import ManageTransfers from "../pages/ManageTransfers"
import ManageNotifications from '../pages/ManageNotifications'; import ManageNotifications from "../pages/ManageNotifications"
import ManageAccess from '../pages/ManageAccess'; import ManageAccess from "../pages/ManageAccess"
import ManageAccounts from '../pages/ManageAccount'; import ManageAccounts from "../pages/ManageAccount"
import ManageGroups from '../pages/ManageGroups'; import ManageGroups from "../pages/ManageGroups"
import ManageMembers from '../pages/ManageMembers'; import ManageMembers from "../pages/ManageMembers"
import ManageMenus from '../pages/ManageMenu'; import ManageMenus from "../pages/ManageMenu"
import MemberKyc from '../pages/MemberKYC'; import MemberKyc from "../pages/MemberKYC"
import ManageCredential from '../pages/ManageCredential'; import ManageCredential from "../pages/ManageCredential"
import ManageCurrency from '../pages/ManageCurrency'; import ManageCurrency from "../pages/ManageCurrency"
import ManageWebservice from '../pages/ManageWebservice'; import ManageWebservice from "../pages/ManageWebservice"
import SettingPage from '../pages/Setting'; import SettingPage from "../pages/Setting"
import UserManagement from '../pages/UserManagement'; import UserManagement from "../pages/UserManagement"
import RoleMenus from '../pages/RoleManagement'; import RoleMenus from "../pages/RoleManagement"
import MasterDataPage from '../pages/MasterData'; import MasterDataPage from "../pages/MasterData"
// ESCROW // ESCROW
import TransactionHistory from '../escrowPages/TransactionHistory'; import TransactionHistory from "../escrowPages/TransactionHistory"
import TransferPage from '../escrowPages/Transfer'; import TransferPage from "../escrowPages/Transfer"
import TicketConfirmationPage from '../escrowPages/TicketConfirmation'; import TicketConfirmationPage from "../escrowPages/TicketConfirmation"
// TDS // TDS
import AgentBalance from '../tdsPages/AgentBalance'; import AgentBalance from "../tdsPages/AgentBalance"
import DepositReport from '../tdsPages/DepostiReport'; import DepositReport from "../tdsPages/DepostiReport"
import TopUp from '../tdsPages/TopUp'; import TopUp from "../tdsPages/TopUp"
import TopUpApproval from '../tdsPages/TopUpApproval'; import TopUpApproval from "../tdsPages/TopUpApproval"
import TopUpRequest from '../tdsPages/TopUpRequest'; import TopUpRequest from "../tdsPages/TopUpRequest"
import OperationTransfer from '../tdsPages/Transfer'; import OperationTransfer from "../tdsPages/Transfer"
import RegisteredAgent from '../tdsPages/RegisteredAgent'; import RegisteredAgent from "../tdsPages/RegisteredAgent"
import RegisteredSupervisor from '../tdsPages/RegisteredSupervisor'; import RegisteredSupervisor from "../tdsPages/RegisteredSupervisor"
// Mock Authentication Function // Mock Authentication Function
const isAuthenticated = () => { const isAuthenticated = () => {
let token = Cookies.get(`token`); let token = Cookies.get(`token`)
let role = Cookies.get(`role`); let role = Cookies.get(`role`)
if (token && role) return true if (token && role) return true
return false return false
}; }
// Middleware Component for Protected Routes // Middleware Component for Protected Routes
const ProtectedRoute = ({ children }) => { const ProtectedRoute = ({ children }) => {
if (!isAuthenticated()) { if (!isAuthenticated()) {
return <Navigate to="/login" replace />; return <Navigate to="/login" replace />
} }
return children; return children
}; }
const Layout = ({ children }) => { const Layout = ({ children }) => {
const location = useLocation(); const location = useLocation()
// Define routes where the Navbar should not appear // Define routes where the Navbar should not appear
const hideNavbarRoutes = ['/login', "/register"]; const hideNavbarRoutes = ["/login", "/register"]
const shouldShowLayout = !hideNavbarRoutes.includes(location.pathname); const shouldShowLayout = !hideNavbarRoutes.includes(location.pathname)
return ( return (
<> <>
{shouldShowLayout && {shouldShowLayout && (
(
<div className="App"> <div className="App">
<Box sx={{ display: "flex", backgroundColor: "#f5f5f5", color: "#333" }}> <Box sx={{ display: "flex", backgroundColor: "#f5f5f5", color: "#333" }}>
<Sidebar /> <Sidebar />
@ -75,60 +74,311 @@ const Layout = ({ children }) => {
</Box> </Box>
</Box> </Box>
</div> </div>
) )}
}
</> </>
); )
}; }
function App() { function App() {
let roles_list = JSON.parse(localStorage.getItem('roles_list')); let roles_list = JSON.parse(localStorage.getItem("roles_list"))
const location = useLocation(); const location = useLocation()
useEffect(() => { useEffect(() => {
console.log(roles_list, location); console.log(roles_list, location)
}, [roles_list, location])
}, [roles_list, location]);
return ( return (
<Routes> <Routes>
{/* GENERAL */} {/* GENERAL */}
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} /> <Route path="/register" element={<RegisterPage />} />
<Route exact path="/" element={<ProtectedRoute><Layout><Dasboard /></Layout></ProtectedRoute>} /> <Route
exact
path="/"
element={
<ProtectedRoute>
<Layout>
<Dasboard />
</Layout>
</ProtectedRoute>
}
/>
{/* GENERAL AFTER LOGIN */} {/* GENERAL AFTER LOGIN */}
<Route path="/profile" element={<ProtectedRoute><Layout><ProfilePage /></Layout></ProtectedRoute>} /> <Route
path="/profile"
element={
<ProtectedRoute>
<Layout>
<ProfilePage />
</Layout>
</ProtectedRoute>
}
/>
{/* ADMIN */} {/* ADMIN */}
<Route path="/manage-groups" element={<ProtectedRoute><Layout><ManageGroups /></Layout></ProtectedRoute>} /> <Route
<Route path="/manage-members" element={<ProtectedRoute><Layout><ManageMembers /></Layout></ProtectedRoute>} /> path="/manage-groups"
<Route path="/manage-member-credential" element={<ProtectedRoute><Layout><ManageCredential /></Layout></ProtectedRoute>} /> element={
<Route path="/manage-access" element={<ProtectedRoute><Layout><ManageAccess /></Layout></ProtectedRoute>} /> <ProtectedRoute>
<Route path="/manage-accounts" element={<ProtectedRoute><Layout><ManageAccounts /></Layout></ProtectedRoute>} /> <Layout>
<Route path="/manage-currency" element={<ProtectedRoute><Layout><ManageCurrency /></Layout></ProtectedRoute>} /> <ManageGroups />
<Route path="/manage-transfers" element={<ProtectedRoute><Layout><ManageTransfers /></Layout></ProtectedRoute>} /> </Layout>
<Route path="/manage-notifications" element={<ProtectedRoute><Layout><ManageNotifications /></Layout></ProtectedRoute>} /> </ProtectedRoute>
<Route path="/manage-menu" element={<ProtectedRoute><Layout><ManageMenus /></Layout></ProtectedRoute>} /> }
<Route path="/manage-webservice" element={<ProtectedRoute><Layout><ManageWebservice /></Layout></ProtectedRoute>} /> />
<Route path="/manage-member-kyc" element={<ProtectedRoute><Layout><MemberKyc /></Layout></ProtectedRoute>} /> <Route
<Route path="/setting" element={<ProtectedRoute><Layout><SettingPage /></Layout></ProtectedRoute>} /> path="/manage-members"
<Route path="/user-management" element={<ProtectedRoute><Layout><UserManagement /></Layout></ProtectedRoute>} /> element={
<Route path="/role-management" element={<ProtectedRoute><Layout><RoleMenus /></Layout></ProtectedRoute>} /> <ProtectedRoute>
<Route path="/master-data" element={<ProtectedRoute><Layout><MasterDataPage /></Layout></ProtectedRoute>} /> <Layout>
<ManageMembers />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-member-credential"
element={
<ProtectedRoute>
<Layout>
<ManageCredential />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-access"
element={
<ProtectedRoute>
<Layout>
<ManageAccess />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-accounts"
element={
<ProtectedRoute>
<Layout>
<ManageAccounts />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-currency"
element={
<ProtectedRoute>
<Layout>
<ManageCurrency />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-transfers"
element={
<ProtectedRoute>
<Layout>
<ManageTransfers />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-notifications"
element={
<ProtectedRoute>
<Layout>
<ManageNotifications />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-menu"
element={
<ProtectedRoute>
<Layout>
<ManageMenus />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-webservice"
element={
<ProtectedRoute>
<Layout>
<ManageWebservice />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/manage-member-kyc"
element={
<ProtectedRoute>
<Layout>
<MemberKyc />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/setting"
element={
<ProtectedRoute>
<Layout>
<SettingPage />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/user-management"
element={
<ProtectedRoute>
<Layout>
<UserManagement />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/role-management"
element={
<ProtectedRoute>
<Layout>
<RoleMenus />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/master-data"
element={
<ProtectedRoute>
<Layout>
<MasterDataPage />
</Layout>
</ProtectedRoute>
}
/>
{/* ESCROW */} {/* ESCROW */}
<Route path="/transaction-history" element={<ProtectedRoute><Layout><TransactionHistory /></Layout></ProtectedRoute>} /> <Route
<Route path="/transfer" element={<ProtectedRoute><Layout><TransferPage /></Layout></ProtectedRoute>} /> path="/transaction-history"
<Route path="/ticket-confirmation" element={<ProtectedRoute><Layout><TicketConfirmationPage /></Layout></ProtectedRoute>} /> element={
<ProtectedRoute>
<Layout>
<TransactionHistory />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/transfer"
element={
<ProtectedRoute>
<Layout>
<TransferPage />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/ticket-confirmation"
element={
<ProtectedRoute>
<Layout>
<TicketConfirmationPage />
</Layout>
</ProtectedRoute>
}
/>
{/* TDS */} {/* TDS */}
<Route path="/agent-balance" element={<ProtectedRoute><Layout><AgentBalance /></Layout></ProtectedRoute>} /> <Route
<Route path="/deposit-report" element={<ProtectedRoute><Layout><DepositReport /></Layout></ProtectedRoute>} /> path="/agent-balance"
<Route path="/topup" element={<ProtectedRoute><Layout><TopUp /></Layout></ProtectedRoute>} /> element={
<Route path="/topup-approval" element={<ProtectedRoute><Layout><TopUpApproval /></Layout></ProtectedRoute>} /> <ProtectedRoute>
<Route path="/topup-request" element={<ProtectedRoute><Layout><TopUpRequest /></Layout></ProtectedRoute>} /> <Layout>
<Route path="/operation-transfer" element={<ProtectedRoute><Layout><OperationTransfer /></Layout></ProtectedRoute>} /> <AgentBalance />
<Route path="/registered-agent" element={<ProtectedRoute><Layout><RegisteredAgent /></Layout></ProtectedRoute>} /> </Layout>
<Route path="/registered-supervisor" element={<ProtectedRoute><Layout><RegisteredSupervisor /></Layout></ProtectedRoute>} /> </ProtectedRoute>
}
/>
<Route
path="/deposit-report"
element={
<ProtectedRoute>
<Layout>
<DepositReport />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/topup"
element={
<ProtectedRoute>
<Layout>
<TopUp />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/topup-approval"
element={
<ProtectedRoute>
<Layout>
<TopUpApproval />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/topup-request"
element={
<ProtectedRoute>
<Layout>
<TopUpRequest />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/operation-transfer"
element={
<ProtectedRoute>
<Layout>
<OperationTransfer />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/registered-agent"
element={
<ProtectedRoute>
<Layout>
<RegisteredAgent />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/registered-supervisor"
element={
<ProtectedRoute>
<Layout>
<RegisteredSupervisor />
</Layout>
</ProtectedRoute>
}
/>
</Routes> </Routes>
); )
} }
export default App; export default App