diff --git a/.env b/.env new file mode 100644 index 0000000..ca1eaa5 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +REACT_APP_BASE_URL=/dashboard +REACT_APP_API_URL=https://tpay.shiblysolution.id/api/ \ No newline at end of file diff --git a/package.json b/package.json index 216e2da..8a1c38f 100644 --- a/package.json +++ b/package.json @@ -1,58 +1,58 @@ { - "name": "new-tpay", - "version": "0.1.0", - "private": true, - "dependencies": { - "@emotion/react": "^11.14.0", - "@emotion/styled": "^11.14.0", - "@mui/icons-material": "^6.2.1", - "@mui/material": "^6.2.1", - "@reduxjs/toolkit": "^2.5.0", - "@testing-library/jest-dom": "^5.17.0", - "@testing-library/user-event": "^13.5.0", - "ajv": "^8.17.1", - "ajv-keywords": "^5.1.0", - "axios": "^1.7.9", - "chart.js": "^4.4.7", - "js-cookie": "^3.0.5", - "react": "^18.3.1", - "react-chartjs-2": "^5.2.0", - "react-circular-progressbar": "^2.1.0", - "react-dom": "^18.3.1", - "react-redux": "^9.2.0", - "react-router-dom": "^7.1.1", - "react-scripts": "5.0.1", - "redux": "^5.0.1", - "web-vitals": "^2.1.4" - }, - "scripts": { - "start": "react-scripts start eslint-disable-next-line", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/plugin-transform-private-property-in-object": "^7.25.9", - "@testing-library/dom": "^10.4.0", - "@testing-library/react": "^16.1.0" - } + "name": "new-tpay", + "version": "0.1.0", + "private": true, + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.2.1", + "@mui/material": "^6.2.1", + "@reduxjs/toolkit": "^2.5.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/user-event": "^13.5.0", + "ajv": "^8.17.1", + "ajv-keywords": "^5.1.0", + "axios": "^1.7.9", + "chart.js": "^4.4.7", + "js-cookie": "^3.0.5", + "react": "^18.3.1", + "react-chartjs-2": "^5.2.0", + "react-circular-progressbar": "^2.1.0", + "react-dom": "^18.3.1", + "react-redux": "^9.2.0", + "react-router-dom": "^7.1.1", + "react-scripts": "5.0.1", + "redux": "^5.0.1", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start eslint-disable-next-line", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@babel/plugin-transform-private-property-in-object": "^7.25.9", + "@testing-library/dom": "^10.4.0", + "@testing-library/react": "^16.1.0" + } } diff --git a/src/config/axios.js b/src/config/axios.js index 0c450b2..8e572a5 100644 --- a/src/config/axios.js +++ b/src/config/axios.js @@ -1,31 +1,32 @@ -import axios from 'axios'; -import Cookies from "js-cookie"; +import axios from "axios" +import Cookies from "js-cookie" -const token = Cookies.get(`token`) || null; +const token = Cookies.get(`token`) || null const headers = { - "Access-Control-Allow-Origin": "*", - "content-type":"application/json", -}; -if (token) headers["Authorization"] = `Bearer ${token}`; + // "Access-Control-Allow-Origin": "*", + // "content-type": "application/json", +} +if (token) headers["Authorization"] = `Bearer ${token}` const instance = axios.create({ - baseURL: `https://tpay.shiblysolution.id/dashboard/`, - // baseURL: 'https://api.telkomcel.tl/tpay-stg-dash-api/', - headers: headers + // baseURL: `https://tpay.shiblysolution.id/dashboard/`, + // baseURL: 'https://api.telkomcel.tl/tpay-stg-dash-api/', + baseURL: process.env.REACT_APP_API_URL, + headers: headers, }) export async function fetchApi(path, method, data, params) { - try { - let query = params || {}; - query.token = token - let response = await instance({ - method: method, - url: path, - data: data, - params: query - }); - return response - } catch (error) { - alert(error.message) - } -} \ No newline at end of file + try { + let query = params || {} + query.token = token + let response = await instance({ + method: method, + url: path, + data: data, + params: query, + }) + return response + } catch (error) { + alert(error.message) + } +} diff --git a/src/index.js b/src/index.js index 7d78253..5a55ec8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,24 +1,24 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./routes/routes"; -import reportWebVitals from "./reportWebVitals"; -import { BrowserRouter } from "react-router-dom"; -import { Provider } from 'react-redux'; -import store from './store/store'; +import React from "react" +import ReactDOM from "react-dom/client" +import "./index.css" +import App from "./routes/routes" +import reportWebVitals from "./reportWebVitals" +import { BrowserRouter } from "react-router-dom" +import { Provider } from "react-redux" +import store from "./store/store" -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById("root")) root.render( - - - - - - - -); + + + + + + + +) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +reportWebVitals() diff --git a/src/pages/Login.js b/src/pages/Login.js index 2913b20..471b95b 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -1,135 +1,109 @@ -import React, { useState } from "react"; -import { TextField, Button, Box, Typography, Grid, Paper, Avatar, Divider } from "@mui/material"; -import {Link, useNavigate } from 'react-router-dom'; -import Cookies from "js-cookie"; -import { fetchApi } from '../config/axios'; -import logo from '../logo/logo.jpeg'; +import React, { useState } from "react" +import { TextField, Button, Box, Typography, Grid, Paper, Avatar, Divider } from "@mui/material" +import { Link, useNavigate } from "react-router-dom" +import Cookies from "js-cookie" +import { fetchApi } from "../config/axios" +import logo from "../logo/logo.jpeg" const LoginPage = () => { - // State for email and password - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - const navigate = useNavigate(); + // State for email and password + const [username, setUsername] = useState("") + const [password, setPassword] = useState("") + const navigate = useNavigate() - // Handle form submission - const handleSubmit = async (e) => { - try { - e.preventDefault(); - if (username && password) { - // GET CREDIENTIAL - let user = await fetchApi('/api/login', 'POST', { username, password }); - if (user) { - if (user.data && user.data.data) { - let resUserLogin = user.data.data; - console.log('resUserLogin', resUserLogin); - let roleList = JSON.stringify(resUserLogin.roles_list); - Cookies.set('token', resUserLogin.token.access_token, { expires: 1, path: '/' }); - Cookies.set('role', resUserLogin.role_name, { expires: 1, path: '/' }); - Cookies.set('userId', resUserLogin.user.id, { expires: 1, path: '/' }); - Cookies.set('username', resUserLogin.user.username, { expires: 1, path: '/' }); - // Cookies.set('roles_list', roleList, { expires: 1, path: '/' }); - localStorage.setItem('roles_list', roleList) - navigate('/'); - } else { - alert(user.response.data.message); - } - } - } else { - alert("Please fill in both fields."); - } - } catch (error) { - if (error.response) alert(error.response.data.message) - else alert(error.message) - console.log(error); - } - }; + // Handle form submission + const handleSubmit = async (e) => { + try { + e.preventDefault() + if (username && password) { + // GET CREDIENTIAL + let user = await fetchApi("/d/login", "POST", { username, password }) + if (user) { + if (user.data && user.data.data) { + let resUserLogin = user.data.data + console.log("resUserLogin", resUserLogin) + let roleList = JSON.stringify(resUserLogin.roles_list) + Cookies.set("token", resUserLogin.token.access_token, { expires: 1, path: "/" }) + Cookies.set("role", resUserLogin.role_name, { expires: 1, path: "/" }) + Cookies.set("userId", resUserLogin.user.id, { expires: 1, path: "/" }) + Cookies.set("username", resUserLogin.user.username, { expires: 1, path: "/" }) + // Cookies.set('roles_list', roleList, { expires: 1, path: '/' }); + localStorage.setItem("roles_list", roleList) + navigate("/") + } else { + alert(user.response.data.message) + } + } + } else { + alert("Please fill in both fields.") + } + } catch (error) { + if (error.response) alert(error.response.data.message) + else alert(error.message) + console.log(error) + } + } - return ( - - - - - Login - -
- - setUsername(e.target.value)} - type="text" - required - /> - - - setPassword(e.target.value)} - type="password" - required - /> - - - - - -
- - - - {/* Divider (Horizontal Line) */} - - - {/* Content */} - - - T-PAY - - - © 2025 TelinDigital Solution - - - - ); -}; + return ( + + + + + Login + +
+ + setUsername(e.target.value)} type="text" required /> + + + setPassword(e.target.value)} type="password" required /> + + + + + +
+ + + + {/* Divider (Horizontal Line) */} + -export default LoginPage; \ No newline at end of file + {/* Content */} + + + + T-PAY + + + + © 2025 TelinDigital Solution + + + + ) +} + +export default LoginPage diff --git a/src/pages/Profile.js b/src/pages/Profile.js index a924733..f9a8734 100644 --- a/src/pages/Profile.js +++ b/src/pages/Profile.js @@ -1,184 +1,144 @@ -import React, { useState, useEffect } from 'react'; -import { - TextField, - Button, - Box, - 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"; +import React, { useState, useEffect } from "react" +import { TextField, Button, Box, 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 = () => { - // State for form fields - const [formData, setFormData] = useState({ - username: '', - name: '', - email: '', - status: '', - idRole: '', - password: '', - oldPassword: '', - confirmPassword: '', - newPassword: '' - // nik: '', - // position: '', - // telp: '', - // address: '', - // organisasi: '', - // devisi: '', - // unit: '', - }); - const [roles, setRoles] = useState([]); - const [isModalOpen, setIsModalOpen] = useState(false); // ERROR MSG - const [error, setError] = useState(""); // ERROR MSG + // State for form fields + const [formData, setFormData] = useState({ + username: "", + name: "", + email: "", + status: "", + idRole: "", + password: "", + oldPassword: "", + confirmPassword: "", + newPassword: "", + // nik: '', + // position: '', + // telp: '', + // address: '', + // organisasi: '', + // devisi: '', + // unit: '', + }) + const [roles, setRoles] = useState([]) + const [isModalOpen, setIsModalOpen] = useState(false) // ERROR MSG + const [error, setError] = useState("") // ERROR MSG - useEffect(() => { - fetchUser() - fetchUserRoles() - // eslint-disable-next-line - }, []); + useEffect(() => { + fetchUser() + fetchUserRoles() + // eslint-disable-next-line + }, []) - async function fetchUser(params) { - try { - let userId = Cookies.get(`userId`); - let token = Cookies.get(`token`); - - let fetchUsers = await fetchApi(`/api/user/detail/${userId}`, 'GET', null, { token: token }); - // setFormData({}) - console.log(fetchUsers); - setFormData(fetchUsers.data.data) - } catch (error) { - console.log(error); - handleError(`${error.message}. \n ${error.response.data.error}`) - } - } + async function fetchUser(params) { + try { + let userId = Cookies.get(`userId`) + let token = Cookies.get(`token`) - async function fetchUserRoles(params) { - try { - let userRoles = await fetchApi('/api/user_role/list', 'GET', null, { - limit: 10, - page: 1, - with_deleted: true, - order_field: 'id', - order_direction: 'ASC' - }); - console.log(userRoles); - - if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) - } catch (error) { - console.log(error); - handleError(`${error.message}. \n ${error.response.data.error}`) - } - } + let fetchUsers = await fetchApi(`d/user/detail/${userId}`, "GET", null, { token: token }) + // setFormData({}) + console.log(fetchUsers) + setFormData(fetchUsers.data.data) + } catch (error) { + console.log(error) + handleError(`${error.message}. \n ${error.response.data.error}`) + } + } - // 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."); - // } - }; + async function fetchUserRoles(params) { + try { + let userRoles = await fetchApi("d/user_role/list", "GET", null, { + limit: 10, + page: 1, + with_deleted: true, + order_field: "id", + order_direction: "ASC", + }) + console.log(userRoles) - const handleChange = (e) => { - let { name, value } = e.target; - if (name === 'status' && value === "Y") value = "N" - else if (name === 'status' && value === "N") value = "Y" - setFormData((prev) => ({ ...prev, [name]: value })); - }; + if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) + } catch (error) { + console.log(error) + handleError(`${error.message}. \n ${error.response.data.error}`) + } + } - const handleError = (msg) => { // ERROR MSG - setError(msg); - setIsModalOpen(true); - }; + // 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."); + // } + } - const closeModal = () => { // ERROR MSG - setIsModalOpen(false); - setError(""); - }; - - async function updatePassword() { - try { - let updatePassword = await fetchApi(`/api/user/update_password`, 'PUT', { - password: formData.password, - retype_password: formData.confirmPassword - }); - console.log(updatePassword); - - } catch (error) { - console.log(error); - } - } + const handleChange = (e) => { + let { name, value } = e.target + if (name === "status" && value === "Y") value = "N" + else if (name === "status" && value === "N") value = "Y" + setFormData((prev) => ({ ...prev, [name]: value })) + } - return ( - - - - User Profile - - - - -
- - - - - - - - - - - Status : - - }/> - - - {/* + const handleError = (msg) => { + // ERROR MSG + setError(msg) + setIsModalOpen(true) + } + + const closeModal = () => { + // ERROR MSG + setIsModalOpen(false) + setError("") + } + + async function updatePassword() { + try { + let updatePassword = await fetchApi(`d/user/update_password`, "PUT", { + password: formData.password, + retype_password: formData.confirmPassword, + }) + console.log(updatePassword) + } catch (error) { + console.log(error) + } + } + + return ( + + + + User Profile + + + + + + + + + + + + + + + + + Status : + } /> + + + {/* { */} - - - Role - - - - - - + + + Role + + + + + + - - - - - - - - + + + + + +
+ + - - - User Password - - - - - - - - - - - - - - - - - - - - ); -}; + + + User Password + + + + + + + + + + -export default ProfilePage; \ No newline at end of file + + + + + + + + + ) +} + +export default ProfilePage diff --git a/src/pages/RoleManagement.js b/src/pages/RoleManagement.js index 7d98ef4..d869ee4 100644 --- a/src/pages/RoleManagement.js +++ b/src/pages/RoleManagement.js @@ -1,26 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import { - Container, - Typography, - 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'; +import React, { useState, useEffect } from "react" +import { Container, Typography, 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 // const initialRoles = ['Admin', 'Escrow', 'Agent']; @@ -38,203 +19,200 @@ import { fetchApi } from '../config/axios'; // ]; const RoleMenuTable = () => { - const [roles, setRoles] = useState([]); - // const [roleMenus, setRoleMenus] = useState([]); - const [menus, setMenus] = useState([]); - const [openDialog, setOpenDialog] = useState(false); - const [newRole, setNewRole] = useState(''); - const [confirmDialog, setConfirmDialog] = useState({ - open: false, roleName: '', menuData: [], roleId: '', menuId: '', status: null, menuName: '' - }); - - useEffect(() => { - fetchData() - // eslint-disable-next-line - }, []); + const [roles, setRoles] = useState([]) + // const [roleMenus, setRoleMenus] = useState([]); + const [menus, setMenus] = useState([]) + const [openDialog, setOpenDialog] = useState(false) + const [newRole, setNewRole] = useState("") + const [confirmDialog, setConfirmDialog] = useState({ + open: false, + roleName: "", + menuData: [], + roleId: "", + menuId: "", + status: null, + menuName: "", + }) - async function fetchData(params) { - try { - let userRole = await fetchApi('/api/user_role/list', 'GET', null, { - limit: 5, - page: 1, - with_deleted: true, - order_field: 'id', - order_direction: 'ASC' - }); - let userMenu = await fetchApi('/api/menus/list', 'GET', null, { - limit: 50, - page: 1, - with_deleted: true, - order_field: 'id', - order_direction: 'ASC' - }); - setMenus(userMenu.data.data.list) - - console.log('role',userRole); - console.log('menu',userMenu); - if (userRole.data && userRole.data.data) setRoles(userRole.data.data.list) - } catch (error) { - console.log(error); - } - } + useEffect(() => { + fetchData() + // eslint-disable-next-line + }, []) - const handleCheckboxChange = (roleName, menuData, roleId, menuId, status, menuName) => { - setConfirmDialog({ open: true, roleName, menuData, roleId, menuId, status, menuName }); - }; + async function fetchData(params) { + try { + let userRole = await fetchApi("d/user_role/list", "GET", null, { + limit: 5, + page: 1, + with_deleted: true, + order_field: "id", + order_direction: "ASC", + }) + let userMenu = await fetchApi("/api/menus/list", "GET", null, { + limit: 50, + page: 1, + with_deleted: true, + order_field: "id", + order_direction: "ASC", + }) + setMenus(userMenu.data.data.list) - const handleConfirm = async (confirm) => { - const { roleName, menuData, roleId, menuId, status } = confirmDialog; - try { - if (confirm) { - console.log(confirm,confirmDialog); - if (status) { - let generateRoles = menuData.filter(el => +el !== +menuId); - console.log(generateRoles); - let userMenu = await fetchApi(`/api/user_role/update/${roleId}`, 'PUT', { - name: roleName, - roles: generateRoles, - status: "Y" - }) - console.log(userMenu); - await fetchData() - } else { - let generateRoles = menuData.filter(el => +el !== +menuId); - generateRoles.push(`${menuId}`) - console.log(generateRoles); - let userMenu = await fetchApi(`/api/user_role/update/${roleId}`, 'PUT', { - name: roleName, - roles: generateRoles, - status: "Y" - }) - console.log(userMenu); - await fetchData() - } - } - setConfirmDialog({ open: false, role: '', menu: '' }); - } catch (error) { - console.log(error); - } - }; + console.log("role", userRole) + console.log("menu", userMenu) + if (userRole.data && userRole.data.data) setRoles(userRole.data.data.list) + } catch (error) { + console.log(error) + } + } - const handleAddRole = async () => { - try { - await fetchApi('/api/user_role/create', 'POST', { - "name": newRole, - "roles": [], - "status": "Y" - }); - await fetchData(); - } catch (error) { - console.log(error); - } - setNewRole(''); - setOpenDialog(false); - }; + const handleCheckboxChange = (roleName, menuData, roleId, menuId, status, menuName) => { + setConfirmDialog({ open: true, roleName, menuData, roleId, menuId, status, menuName }) + } - const deleteRole = async (role) => { - try { - let resDeleteRole = await fetchApi(`/api/user_role/delete/${role.id}/true`, 'DELETE'); - console.log(resDeleteRole); - await fetchData(); - } catch (error) { - console.log(error); - } - } + const handleConfirm = async (confirm) => { + const { roleName, menuData, roleId, menuId, status } = confirmDialog + try { + if (confirm) { + console.log(confirm, confirmDialog) + if (status) { + let generateRoles = menuData.filter((el) => +el !== +menuId) + console.log(generateRoles) + let userMenu = await fetchApi(`d/user_role/update/${roleId}`, "PUT", { + name: roleName, + roles: generateRoles, + status: "Y", + }) + console.log(userMenu) + await fetchData() + } else { + let generateRoles = menuData.filter((el) => +el !== +menuId) + generateRoles.push(`${menuId}`) + console.log(generateRoles) + let userMenu = await fetchApi(`d/user_role/update/${roleId}`, "PUT", { + name: roleName, + roles: generateRoles, + status: "Y", + }) + console.log(userMenu) + await fetchData() + } + } + setConfirmDialog({ open: false, role: "", menu: "" }) + } catch (error) { + console.log(error) + } + } - return ( - - - Role Menu Management - - setOpenDialog(true)} - > - - + const handleAddRole = async () => { + try { + await fetchApi("d/user_role/create", "POST", { + name: newRole, + roles: [], + status: "Y", + }) + await fetchData() + } catch (error) { + console.log(error) + } + setNewRole("") + setOpenDialog(false) + } - - - + const deleteRole = async (role) => { + try { + let resDeleteRole = await fetchApi(`d/user_role/delete/${role.id}/true`, "DELETE") + console.log(resDeleteRole) + await fetchData() + } catch (error) { + console.log(error) + } + } - {/* Table for roles and menus */} - - - - - Role - {menus.map((menu, idx) => ( - {menu.name} - ))} - Action - - - - {roles.map((role) => ( - - {role.name} - {menus.map((menu, idx) => ( - - +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 - )} - /> - - ))} - - - - - ))} - -
- + return ( + + + Role Menu Management + + setOpenDialog(true)}> + + - {/* Dialog for adding new role */} - setOpenDialog(false)}> - Add New Role - - setNewRole(e.target.value)} - /> - - - - - - + + + - {/* Confirmation Dialog for checkbox */} - handleConfirm(false)}> - Confirm Menu Selection - - Are you sure you want to {confirmDialog.status ? 'remove ' : 'add '} - the menu {confirmDialog.menuName} for role {confirmDialog.roleName}? - - - - - - - - ); -}; + {/* Table for roles and menus */} + + + + + + Role + + {menus.map((menu, idx) => ( + + {menu.name} + + ))} + + Action + + + + + {roles.map((role) => ( + + {role.name} + {menus.map((menu, idx) => ( + + +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)} /> + + ))} + + + + + ))} + +
+ -export default RoleMenuTable; + {/* Dialog for adding new role */} + setOpenDialog(false)}> + Add New Role + + setNewRole(e.target.value)} /> + + + + + + + + {/* Confirmation Dialog for checkbox */} + handleConfirm(false)}> + Confirm Menu Selection + + Are you sure you want to {confirmDialog.status ? "remove " : "add "} + the menu {confirmDialog.menuName} for role {confirmDialog.roleName}? + + + + + + + + ) +} + +export default RoleMenuTable diff --git a/src/pages/UserManagement.js b/src/pages/UserManagement.js index 9ae006f..bccab7e 100644 --- a/src/pages/UserManagement.js +++ b/src/pages/UserManagement.js @@ -1,287 +1,247 @@ // Import React and Material-UI components -import React, { useState, useEffect } from 'react'; -import { - Paper, Button, Dialog, DialogActions, DialogContent, DialogTitle, TableContainer, FormLabel, - Checkbox, FormControlLabel, Box, Typography, TextField, Grid, MenuItem, InputLabel, Select, FormControl -} from '@mui/material'; -import ReusableTable from '../components/Table'; -import { fetchApi } from '../config/axios'; -import WarningDialog from '../components/WarningDialog'; // ERROR MSG +import React, { useState, useEffect } from "react" +import { Paper, Button, Dialog, DialogActions, DialogContent, DialogTitle, TableContainer, FormLabel, Checkbox, FormControlLabel, Box, Typography, TextField, Grid, MenuItem, InputLabel, Select, FormControl } from "@mui/material" +import ReusableTable from "../components/Table" +import { fetchApi } from "../config/axios" +import WarningDialog from "../components/WarningDialog" // ERROR MSG const columns = [ - { id: 'username', label: 'Username' }, - { id: 'name', label: 'Name' }, - { id: 'email', label: 'Email' }, - { id: 'role_name', label: 'Roles' }, - { id: 'status', label: 'Status' }, - { id: 'created_at', label: 'Created' }, - { id: 'actions', label: 'Actions' }, -]; + { id: "username", label: "Username" }, + { id: "name", label: "Name" }, + { id: "email", label: "Email" }, + { id: "role_name", label: "Roles" }, + { id: "status", label: "Status" }, + { id: "created_at", label: "Created" }, + { id: "actions", label: "Actions" }, +] const initiateForm = { - username: '', - name: '', - email: '', - status: '', - id_role: '', - password: '', - confirmPassword: '', - // nik: '', - // position: '', - // telp: '', - // address: '', - // organisasi: '', - // devisi: '', - // unit: '', + username: "", + name: "", + email: "", + status: "", + id_role: "", + password: "", + confirmPassword: "", + // nik: '', + // position: '', + // telp: '', + // address: '', + // organisasi: '', + // devisi: '', + // unit: '', } export default function UserManagement() { - const [users, setUsers] = useState([]); - const [open, setOpen] = useState(false); - const [selectedUser, setSelectedUser] = useState(null); - const [selectedRoles, setSelectedRoles] = useState([]); - const [roles, setRoles] = useState([]); - const [openDialog, setOpenDialog] = useState(false); - const [labelDialog, setLabelDialog] = useState(''); - const [formData, setFormData] = useState(initiateForm); - const [errors, setErrors] = useState({ passwordMatch: false, }); - const [isModalOpen, setIsModalOpen] = useState(false); // ERROR MSG - const [error, setError] = useState(""); // ERROR MSG + const [users, setUsers] = useState([]) + const [open, setOpen] = useState(false) + const [selectedUser, setSelectedUser] = useState(null) + const [selectedRoles, setSelectedRoles] = useState([]) + const [roles, setRoles] = useState([]) + const [openDialog, setOpenDialog] = useState(false) + const [labelDialog, setLabelDialog] = useState("") + const [formData, setFormData] = useState(initiateForm) + const [errors, setErrors] = useState({ passwordMatch: false }) + const [isModalOpen, setIsModalOpen] = useState(false) // ERROR MSG + const [error, setError] = useState("") // ERROR MSG - useEffect(() => { - fetchUserRoles() - fetchUser() - // eslint-disable-next-line - }, []); + useEffect(() => { + fetchUserRoles() + fetchUser() + // eslint-disable-next-line + }, []) - async function fetchUser(params) { - try { - let fetchUsers = await fetchApi('/api/user/list', 'GET', null, { - limit: 5, - page: 1, - with_deleted: true, - order_field: 'id', - order_direction: 'ASC' - }); - console.log(fetchUsers); - if (fetchUsers.data && fetchUsers.data.data) { - let resFetchUsers = fetchUsers.data.data.list - let temp = resFetchUsers.map(el => { - if (el.status === 'Y') el.status = 'Aktif' - else el.status ='Tidak Aktif' - el.actions = [ - { label: 'Edit', color: 'info', onClick: (row) => handleOpen(row) }, - { label: 'Delete', color: 'secondary', onClick: (row) => handleDelete(row) }, - ] - return el - }) - setUsers(temp) - } - } catch (error) { - console.log(error); - handleError(`${error.message}. \n ${error.response.data.error}`) - } - } + async function fetchUser(params) { + try { + let fetchUsers = await fetchApi("d/user/list", "GET", null, { + limit: 5, + page: 1, + with_deleted: true, + order_field: "id", + order_direction: "ASC", + }) + console.log(fetchUsers) + if (fetchUsers.data && fetchUsers.data.data) { + let resFetchUsers = fetchUsers.data.data.list + let temp = resFetchUsers.map((el) => { + if (el.status === "Y") el.status = "Aktif" + else el.status = "Tidak Aktif" + el.actions = [ + { label: "Edit", color: "info", onClick: (row) => handleOpen(row) }, + { label: "Delete", color: "secondary", onClick: (row) => handleDelete(row) }, + ] + return el + }) + setUsers(temp) + } + } catch (error) { + console.log(error) + handleError(`${error.message}. \n ${error.response.data.error}`) + } + } - async function fetchUserRoles(params) { - try { - let userRoles = await fetchApi('/api/user_role/list', 'GET', null, { - limit: 5, - page: 1, - with_deleted: true, - order_field: 'id', - order_direction: 'ASC' - }); - if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) - } catch (error) { - console.log(error); - handleError(`${error.message}. \n ${error.response.data.error}`) - } - } + async function fetchUserRoles(params) { + try { + let userRoles = await fetchApi("d/user_role/list", "GET", null, { + limit: 5, + page: 1, + with_deleted: true, + order_field: "id", + order_direction: "ASC", + }) + if (userRoles.data && userRoles.data.data) setRoles(userRoles.data.data.list) + } catch (error) { + console.log(error) + handleError(`${error.message}. \n ${error.response.data.error}`) + } + } - const handleOpen = (user) => { - setLabelDialog(`Edit User`) - setFormData(user) - setOpenDialog(true) - // setSelectedUser(user); - // setSelectedRoles(user.role_name); - // setOpen(true); - }; + const handleOpen = (user) => { + setLabelDialog(`Edit User`) + setFormData(user) + setOpenDialog(true) + // setSelectedUser(user); + // setSelectedRoles(user.role_name); + // setOpen(true); + } - const handleClose = () => { - setOpen(false); - setSelectedUser(null); - setSelectedRoles([]); - }; + const handleClose = () => { + setOpen(false) + setSelectedUser(null) + setSelectedRoles([]) + } - const handleRoleChange = (role) => { - setSelectedRoles((prevRoles) => - prevRoles.includes(role) - ? prevRoles.filter((r) => r !== role) - : [...prevRoles, role] - ); - }; + const handleRoleChange = (role) => { + setSelectedRoles((prevRoles) => (prevRoles.includes(role) ? prevRoles.filter((r) => r !== role) : [...prevRoles, role])) + } - const handleDelete = (row) => { - const newData = users.filter((item) => item.id !== row.id); - setUsers(newData); - alert(`Deleted ${row.name}`); - }; + const handleDelete = (row) => { + const newData = users.filter((item) => item.id !== row.id) + setUsers(newData) + alert(`Deleted ${row.name}`) + } - const handleSave = () => { - setUsers((prevUsers) => - prevUsers.map((user) => - user.id === selectedUser.id ? { ...user, roles: selectedRoles } : user - ) - ); - handleClose(); - }; + const handleSave = () => { + setUsers((prevUsers) => prevUsers.map((user) => (user.id === selectedUser.id ? { ...user, roles: selectedRoles } : user))) + handleClose() + } - const handleChange = (e) => { - const { name, value } = e.target; - setFormData((prev) => ({ ...prev, [name]: value })); + const handleChange = (e) => { + const { name, value } = e.target + setFormData((prev) => ({ ...prev, [name]: value })) - if (name === 'confirmPassword' || name === 'password') { - setErrors((prev) => ({ - ...prev, - passwordMatch: name === 'confirmPassword' ? value !== formData.password : formData.confirmPassword !== value, - })); - } - }; + if (name === "confirmPassword" || name === "password") { + setErrors((prev) => ({ + ...prev, + passwordMatch: name === "confirmPassword" ? value !== formData.password : formData.confirmPassword !== value, + })) + } + } - const handleSubmit = async () => { - try { - if (!errors.passwordMatch) { - console.log('Form Data:', formData); - // setOpen(false); - // setFormData(initiateForm); - } - console.log(formData); - formData.status = "Y"; - if (labelDialog === `Create User`) { - delete formData.confirmPassword - let createUser = await fetchApi('/api/user/create', 'POST', formData); - console.log(createUser); - } else if (labelDialog === `Edit User`) { - delete formData.created_at - delete formData.updated_at - delete formData.role_name - delete formData.actions - delete formData.confirmPassword - console.log(formData); - let editUser = await fetchApi(`/api/user/update/${formData.id}`, 'PUT', formData); - console.log('editUser', editUser); - } - await fetchUser() - setOpenDialog(false) - } catch (error) { - console.log(error); - handleError(`${error.message}. \n ${error.response.data.error}`) - } - } + const handleSubmit = async () => { + try { + if (!errors.passwordMatch) { + console.log("Form Data:", formData) + // setOpen(false); + // setFormData(initiateForm); + } + console.log(formData) + formData.status = "Y" + if (labelDialog === `Create User`) { + delete formData.confirmPassword + let createUser = await fetchApi("d/user/create", "POST", formData) + console.log(createUser) + } else if (labelDialog === `Edit User`) { + delete formData.created_at + delete formData.updated_at + delete formData.role_name + delete formData.actions + delete formData.confirmPassword + console.log(formData) + let editUser = await fetchApi(`d/user/update/${formData.id}`, "PUT", formData) + console.log("editUser", editUser) + } + await fetchUser() + setOpenDialog(false) + } catch (error) { + console.log(error) + handleError(`${error.message}. \n ${error.response.data.error}`) + } + } - const createNewUserBtn = () => { - setLabelDialog(`Create User`); - setFormData(initiateForm); - setOpenDialog(true); - } + const createNewUserBtn = () => { + setLabelDialog(`Create User`) + setFormData(initiateForm) + setOpenDialog(true) + } - const handleError = (msg) => { // ERROR MSG - setError(msg); - setIsModalOpen(true); - }; - - const closeModal = () => { // ERROR MSG - setIsModalOpen(false); - setError(""); - }; + const handleError = (msg) => { + // ERROR MSG + setError(msg) + setIsModalOpen(true) + } - return ( - - - - User Management - - - - - - - + const closeModal = () => { + // ERROR MSG + setIsModalOpen(false) + setError("") + } - - Add Roles to {selectedUser?.name} - - {roles.map((role) => ( - handleRoleChange(role.name)} - /> - } - label={role.name} - /> - ))} - - - - - - - + return ( + + + + User Management + + + + + + + - setOpenDialog(false)} maxWidth="sm" fullWidth> - {labelDialog} - - - - - - - - - - - - - Status - } label="Aktif" /> - - {/* + + Add Roles to {selectedUser?.name} + + {roles.map((role) => ( + handleRoleChange(role.name)} />} label={role.name} /> + ))} + + + + + + + + + setOpenDialog(false)} maxWidth="sm" fullWidth> + {labelDialog} + + + + + + + + + + + + + Status + } label="Aktif" /> + + {/* */} - - - Role - - - - - - - - - - - - - - - - - - - - ); + + + Role + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/routes/routes.js b/src/routes/routes.js index ce2cc9f..78c5290 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -1,134 +1,384 @@ -import React, { useEffect } from 'react'; -import { Routes, Route, useLocation, Navigate } from 'react-router-dom'; -import "../pages/Dashboard.css"; -import Sidebar from "../components/SideBar"; -import Header from "../components/Header"; -import { Box, Toolbar } from "@mui/material"; -import Cookies from "js-cookie"; +import React, { useEffect } from "react" +import { Routes, Route, useLocation, Navigate } from "react-router-dom" +import "../pages/Dashboard.css" +import Sidebar from "../components/SideBar" +import Header from "../components/Header" +import { Box, Toolbar } from "@mui/material" +import Cookies from "js-cookie" // GENERAL -import Dasboard from '../pages/Dashboard'; -import LoginPage from '../pages/Login'; -import RegisterPage from '../pages/Register'; -import ProfilePage from '../pages/Profile'; +import Dasboard from "../pages/Dashboard" +import LoginPage from "../pages/Login" +import RegisterPage from "../pages/Register" +import ProfilePage from "../pages/Profile" // ADMIN -import ManageTransfers from '../pages/ManageTransfers'; -import ManageNotifications from '../pages/ManageNotifications'; -import ManageAccess from '../pages/ManageAccess'; -import ManageAccounts from '../pages/ManageAccount'; -import ManageGroups from '../pages/ManageGroups'; -import ManageMembers from '../pages/ManageMembers'; -import ManageMenus from '../pages/ManageMenu'; -import MemberKyc from '../pages/MemberKYC'; -import ManageCredential from '../pages/ManageCredential'; -import ManageCurrency from '../pages/ManageCurrency'; -import ManageWebservice from '../pages/ManageWebservice'; -import SettingPage from '../pages/Setting'; -import UserManagement from '../pages/UserManagement'; -import RoleMenus from '../pages/RoleManagement'; -import MasterDataPage from '../pages/MasterData'; +import ManageTransfers from "../pages/ManageTransfers" +import ManageNotifications from "../pages/ManageNotifications" +import ManageAccess from "../pages/ManageAccess" +import ManageAccounts from "../pages/ManageAccount" +import ManageGroups from "../pages/ManageGroups" +import ManageMembers from "../pages/ManageMembers" +import ManageMenus from "../pages/ManageMenu" +import MemberKyc from "../pages/MemberKYC" +import ManageCredential from "../pages/ManageCredential" +import ManageCurrency from "../pages/ManageCurrency" +import ManageWebservice from "../pages/ManageWebservice" +import SettingPage from "../pages/Setting" +import UserManagement from "../pages/UserManagement" +import RoleMenus from "../pages/RoleManagement" +import MasterDataPage from "../pages/MasterData" // ESCROW -import TransactionHistory from '../escrowPages/TransactionHistory'; -import TransferPage from '../escrowPages/Transfer'; -import TicketConfirmationPage from '../escrowPages/TicketConfirmation'; +import TransactionHistory from "../escrowPages/TransactionHistory" +import TransferPage from "../escrowPages/Transfer" +import TicketConfirmationPage from "../escrowPages/TicketConfirmation" // TDS -import AgentBalance from '../tdsPages/AgentBalance'; -import DepositReport from '../tdsPages/DepostiReport'; -import TopUp from '../tdsPages/TopUp'; -import TopUpApproval from '../tdsPages/TopUpApproval'; -import TopUpRequest from '../tdsPages/TopUpRequest'; -import OperationTransfer from '../tdsPages/Transfer'; -import RegisteredAgent from '../tdsPages/RegisteredAgent'; -import RegisteredSupervisor from '../tdsPages/RegisteredSupervisor'; +import AgentBalance from "../tdsPages/AgentBalance" +import DepositReport from "../tdsPages/DepostiReport" +import TopUp from "../tdsPages/TopUp" +import TopUpApproval from "../tdsPages/TopUpApproval" +import TopUpRequest from "../tdsPages/TopUpRequest" +import OperationTransfer from "../tdsPages/Transfer" +import RegisteredAgent from "../tdsPages/RegisteredAgent" +import RegisteredSupervisor from "../tdsPages/RegisteredSupervisor" // Mock Authentication Function const isAuthenticated = () => { - let token = Cookies.get(`token`); - let role = Cookies.get(`role`); - if (token && role) return true - return false -}; + let token = Cookies.get(`token`) + let role = Cookies.get(`role`) + if (token && role) return true + return false +} // Middleware Component for Protected Routes const ProtectedRoute = ({ children }) => { - if (!isAuthenticated()) { - return ; - } - return children; -}; - -const Layout = ({ children }) => { - const location = useLocation(); - // Define routes where the Navbar should not appear - const hideNavbarRoutes = ['/login', "/register"]; - const shouldShowLayout = !hideNavbarRoutes.includes(location.pathname); - return ( - <> - {shouldShowLayout && - ( -
- - - -
- -
{children}
- - -
- ) - } - - ); -}; - -function App() { - let roles_list = JSON.parse(localStorage.getItem('roles_list')); - const location = useLocation(); - - useEffect(() => { - console.log(roles_list, location); - - }, [roles_list, location]); - - return ( - - {/* GENERAL */} - } /> - } /> - } /> - {/* GENERAL AFTER LOGIN */} - } /> - {/* ADMIN */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* ESCROW */} - } /> - } /> - } /> - {/* TDS */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - ); + if (!isAuthenticated()) { + return + } + return children } -export default App; \ No newline at end of file +const Layout = ({ children }) => { + const location = useLocation() + // Define routes where the Navbar should not appear + const hideNavbarRoutes = ["/login", "/register"] + const shouldShowLayout = !hideNavbarRoutes.includes(location.pathname) + return ( + <> + {shouldShowLayout && ( +
+ + + +
+ +
{children}
+ + +
+ )} + + ) +} + +function App() { + let roles_list = JSON.parse(localStorage.getItem("roles_list")) + const location = useLocation() + + useEffect(() => { + console.log(roles_list, location) + }, [roles_list, location]) + + return ( + + {/* GENERAL */} + } /> + } /> + + + + + + } + /> + {/* GENERAL AFTER LOGIN */} + + + + + + } + /> + {/* ADMIN */} + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + {/* ESCROW */} + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + {/* TDS */} + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + ) +} + +export default App