diff --git a/src/views/Master/MasterWidget/index.js b/src/views/Master/MasterWidget/index.js
new file mode 100644
index 0000000..f1e2680
--- /dev/null
+++ b/src/views/Master/MasterWidget/index.js
@@ -0,0 +1,394 @@
+import * as XLSX from 'xlsx';
+import React, { Component } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from 'axios';
+import { Button } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PROJECT_ROLE_ADD, PROJECT_ROLE_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js';
+import { Pagination, Tooltip, Table } from 'antd';
+import { withTranslation } from 'react-i18next';
+const LENGTH_DATA = 10
+class index extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ alertDelete: false,
+ alertNotDelete: false,
+ currentPage: 1,
+ dataEdit: null,
+ dataExport: [],
+ dataGs: [],
+ dataIdHo: [],
+ dataTable: [],
+ idDelete: 0,
+ idRoles: 0,
+ menuRoles: [],
+ page: 0,
+ rowsPerPage: LENGTH_DATA,
+ search: "",
+ tooltipDelete: false,
+ tooltipEdit: false,
+ tooltipExport: false,
+ tooltipImport: false,
+ tooltipMenu: false,
+ tooltipTambah: false,
+ totalPage: 0,
+ company_id: props.company_id || 0,
+ role_name: props.role_name || '',
+ role_id: props.role_id || 0,
+ user_id: props.user_id || 0,
+ isLogin: props.isLogin || false,
+ token: props.token || '',
+ all_project: props.all_project || null,
+ hierarchy: props.hierarchy || [],
+ user_name: props.user_name || '',
+ config: {
+ headers: {
+ Authorization: `Bearer ${props.token || ''}`,
+ "Content-type": "application/json",
+ }
+ }
+ };
+
+ this.columns = [
+ {
+ title: this.props.t('action'),
+ dataIndex: '',
+ key: 'x',
+ className: 'nowrap',
+ render: (text, record) => <>
+
+ this.handleDelete(text.id)}>
+
+
+ this.handleEdit(text)}>
+
+ ,
+ },
+ {
+ title: this.state.role_name === 'Super Admin' ? "Company Name" : null,
+ dataIndex: "join_first_company_name",
+ key: "join_first_company_name",
+ render: (text, record) => {
+ return this.state.role_name === 'Super Admin' ? (
+ {record.join_first_company_name}
+ ) : null;
+ }
+ },
+ { title: this.props.t('name'), dataIndex: 'name', key: 'name', className: "nowrap" },
+ { title: this.props.t('Alias Name'), dataIndex: 'aliasname', key: 'aliasname' },
+ { title: this.props.t('Type Layout'), dataIndex: 'aliasname', key: 'aliasname' },
+ { title: this.props.t('Master Data'), dataIndex: 'aliasname', key: 'aliasname' },
+ ];
+ }
+
+ async componentDidMount() {
+ this.getDataRoles();
+ }
+
+ async componentDidUpdate(prevProps, prevState) {
+ const { search } = this.state
+ if (search !== prevState.search) this.getDataRoles()
+ }
+
+ handleSearch = e => {
+ const value = e.target.value
+ this.setState({ search: value, currentPage: 1 })
+ };
+
+ getDataRoles = async () => {
+ let start = 0;
+ if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
+ start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
+ }
+
+ const formData = {
+ "paging": { "start": start, "length": this.state.rowsPerPage },
+ "columns": [],
+ group_column: {
+ "operator": "AND",
+ "group_operator": "OR",
+ "where": [
+ {
+ "name": "name",
+ "logic_operator": "~*",
+ "value": this.state.search,
+ }
+ ]
+ },
+ "joins": [],
+ "orders": { "columns": ["id"], "ascending": false }
+ }
+ if (this.state.role_name !== "Super Admin") {
+ formData.columns.push(
+ { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" },
+ )
+ } else {
+ formData.columns.push(
+ { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+ )
+ formData.joins.push(
+ { "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] }
+ )
+ formData.group_column.where.push(
+ { name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" }
+ )
+ }
+ const result = await axios
+ .post(PROJECT_ROLE_SEARCH, formData, this.state.config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
+ } else {
+ NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ }
+ }
+
+
+
+ onConfirmDelete = async () => {
+ const { idDelete } = this.state
+ const url = PROJECT_ROLE_DELETE(idDelete)
+
+ const result = await axios.delete(url, this.state.config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ this.getDataRoles()
+ this.setState({ idDelete: 0, alertDelete: false })
+ NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!');
+ } else {
+ this.setState({ idDelete: 0, alertDelete: false })
+ NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!');
+ }
+ }
+
+ saveRole = async (data) => {
+
+ const formData = {
+ name: data.name,
+ description: data.description,
+ company_id: data.company_id
+ }
+
+ const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ this.getDataRoles();
+ NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!');
+ } else {
+ NotificationManager.error(`${result.data.message}`, 'Failed!!');
+ }
+
+ }
+
+ editRole = async (data) => {
+
+ const formData = {
+ name: data.name,
+ description: data.description,
+ company_id : data.company_id
+ }
+ const url = PROJECT_ROLE_EDIT(data.id)
+ const result = await axios.put(url, formData, this.state.config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ this.getDataRoles();
+ NotificationManager.success(`Data project role berhasil diedit`, 'Success!!');
+ } else {
+ NotificationManager.error(`Data project role gagal di edit`, `Failed!!`);
+ }
+
+ }
+
+
+ handleEdit = (data) => {
+ this.setState({ dataEdit: data });
+ }
+
+ handleDelete = (id) => {
+ id == '1' ? this.setState({ alertNotDelete: true }) :
+ this.setState({ alertDelete: true, idDelete: id });
+ }
+
+ onShowSizeChange = (current, pageSize) => {
+ this.setState({ rowsPerPage: pageSize }, () => {
+ this.getDataRoles();
+ })
+ }
+
+ onPagination = (current, pageSize) => {
+ this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
+ this.getDataRoles();
+ })
+ }
+
+ toggle = (param) => {
+ if (param === "edit") {
+ this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
+ } else if (param === "delete") {
+ this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
+ } else if (param === "menu") {
+ this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu }))
+ } else if (param === "tambah") {
+ this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
+ } else if (param === "export") {
+ this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
+ }
+ }
+
+ dataNotAvailable = () => {
+ if (this.state.dataTable.length === 0) {
+ return (
+
+ | {this.props.t('noData')} |
+
+ )
+ }
+ }
+
+ handleExportExcel = async () => {
+ const payload = {
+ "paging": { "start": 0, "length": -1 },
+ "columns": [],
+ "group_column": {
+ "operator": "AND",
+ "group_operator": "OR",
+ "where": [
+ {
+ "name": "name",
+ "logic_operator": "~*",
+ "value": this.state.search,
+ }
+ ]
+ },
+ "joins": [],
+ "orders": { "columns": ["id"], "ascending": false }
+ }
+ if (this.state.role_name !== "Super Admin") {
+ payload.columns.push(
+ { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" },
+ )
+ } else {
+ payload.columns.push(
+ { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+ )
+ payload.joins.push(
+ { "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] }
+ )
+ payload.group_column.where.push(
+ { name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" }
+ )
+ }
+ const result = await axios
+ .post(PROJECT_ROLE_SEARCH, payload, this.state.config)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.statusText == "OK") {
+ const dataRes = result.data.data || [];
+ const dataExport = [];
+ dataRes.map((val, index) => {
+ let row = {};
+ if (this.state.role_name === 'Super Admin') {
+ row.Company = val.join_first_company_name;
+ }
+ row.Nama = val.name;
+ row.Deskripsi = val.description;
+ dataExport.push(row);
+ })
+ this.setState({ dataExport: dataExport }, () => {
+ this.exportExcel();
+ });
+ } else {
+ NotificationManager.error('Failed retreiving data!!', 'Failed');
+ }
+ }
+
+ exportExcel = () => {
+ const dataExcel = this.state.dataExport || [];
+ const fileName = "Data Project Role.xlsx";
+ const ws = XLSX.utils.json_to_sheet(dataExcel);
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role');
+ XLSX.writeFile(wb, fileName);
+ }
+
+ render() {
+ const { t } = this.props;
+ const { tooltipTambah, tooltipExport, dialogMenuForm, dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state
+ let noSeq = 0;
+ return (
+
+
+
this.setState({ alertDelete: false, idDelete: 0 })}
+ focusCancelBtn
+ >
+ {this.props.t('deleteMsg')}
+
+
this.setState({ alertNotDelete: false })}
+ >
+ Data project role tidak dapat di hapus!!
+
+
+
+ {this.props.params.name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+