Merge pull request 'dev-khaidir' (#70) from dev-khaidir into staging

Reviewed-on: ibnu/generic-ospro-frontend#70

src/routes.js

@@ -61,6 +61,8 @@ const CompanyManagement = React.lazy(() => import('./views/Master/MasterCompany'
 const DemoRequest = React.lazy(() => import('./views/SimproV2/DemoRequest'))
 const ReferralCode = React.lazy(() => import('./views/SimproV2/ReferralCode'))
 const SalesContact = React.lazy(() => import('./views/SimproV2/SalesContact'))
+const MasterWidget = React.lazy(() => import('./views/Master/MasterWidget'))
+const LimitasiUser = React.lazy(() => import('./views/SimproV2/LimitasiUser'))
 const routes = [
 	{ path: '/', exact: true, name: 'Home' },
 	{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
@@ -129,6 +131,8 @@ const routes = [
 	{ path: '/demo-request', exact: true, name: 'Request Demo', component: DemoRequest },
 	{ path: '/referral-code-management', exact: true, name: 'Referral Code Management', component: ReferralCode },
 	{ path: '/sales-contact', exact: true, name: 'Sales Contact', component: SalesContact },
+	{ path: '/master-widget', exact: true, name: 'Master Widget', component: MasterWidget },
+	{ path: '/limitasi-user', exact: true, name: 'Limitasi User', component: LimitasiUser },
 
 ];
 

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) => <>
+          <Tooltip title={this.props.t('delete')}>
+          <i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
+          </Tooltip>
+          <Tooltip title={this.props.t('edit')}>
+            <i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
+          </Tooltip>
+        </>,
+      },
+      {
+        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' ? (
+            <span>{record.join_first_company_name}</span>
+          ) : 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 (
+        <tr>
+          <td align="center" colSpan="3">{this.props.t('noData')}</td>
+        </tr>
+      )
+    }
+  }
+
+  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 (
+      <div>
+        <NotificationContainer />
+        <SweetAlert
+          show={this.state.alertDelete}
+          warning
+          showCancel
+          confirmBtnText="Delete"
+          confirmBtnBsStyle="danger"
+          title={this.props.t('deleteConfirm')}
+          onConfirm={this.onConfirmDelete}
+          onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
+          focusCancelBtn
+        >
+          {this.props.t('deleteMsg')}
+        </SweetAlert>
+        <SweetAlert
+          show={this.state.alertNotDelete}
+          warning
+          confirmBtnText="Can't Delete"
+          confirmBtnBsStyle="danger"
+          title="Data can't be delete!"
+          onConfirm={() => this.setState({ alertNotDelete: false })}
+        >
+          Data project role tidak dapat di hapus!!
+        </SweetAlert>
+        <Card>
+          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+            <h4>{this.props.params.name}</h4>
+            <Row>
+              <Col>
+                <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} />
+              </Col>
+              <Col>
+                
+                <Tooltip title={this.props.t('exportExcel')}>
+                  <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
+                </Tooltip>
+              </Col>
+            </Row>
+          </CardHeader>
+          <CardBody>
+            <Table
+              rowKey="id"
+              size="small"
+              columns={this.columns}
+              dataSource={dataTable}
+              pagination={false}
+              bordered={false}
+            />
+            <Pagination
+              style={{ marginTop: "25px" }}
+              showSizeChanger
+              onShowSizeChange={this.onShowSizeChange}
+              onChange={this.onPagination}
+              defaultCurrent={currentPage}
+              pageSize={rowsPerPage}
+              total={totalPage}
+              pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+            />
+          </CardBody>
+        </Card>
+      </div>
+    )
+  }
+}
+export default withTranslation()(index);

src/views/SimproV2/LimitasiUser/index.js

@@ -0,0 +1,352 @@
+import * as XLSX from 'xlsx';
+import React, { Component } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from 'axios';
+import moment from 'moment';
+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, STORAGE_LIMIT_INFORMATION_ALL_COMPANY, 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.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' ? (
+            <span>{record.join_first_company_name}</span>
+          ) : null;
+        }
+      },
+      { title: this.props.t('Company'), dataIndex: 'company_name', key: 'company_name', className: "nowrap" },
+      {
+        title: this.props.t('Expired'),
+        dataIndex: 'exp_ospro',
+        key: 'exp_ospro',
+        render: (text, record) => {
+          return text ? moment(text).format("D-M-YYYY HH:mm:ss") : '-';
+        }
+      },
+	  { title: this.props.t('Storage'), dataIndex: 'size', key: 'size' },
+	  { title: this.props.t('Total Project'), dataIndex: 'project_total', key: 'project_total' },
+    ];
+  }
+
+  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 () => {
+    const result = await axios
+      .get(STORAGE_LIMIT_INFORMATION_ALL_COMPANY, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result) {
+      this.setState({ dataTable: result.data});
+    } 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 (
+        <tr>
+          <td align="center" colSpan="3">{this.props.t('noData')}</td>
+        </tr>
+      )
+    }
+  }
+
+  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 (
+      <div>
+        <NotificationContainer />
+        <SweetAlert
+          show={this.state.alertDelete}
+          warning
+          showCancel
+          confirmBtnText="Delete"
+          confirmBtnBsStyle="danger"
+          title={this.props.t('deleteConfirm')}
+          onConfirm={this.onConfirmDelete}
+          onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
+          focusCancelBtn
+        >
+          {this.props.t('deleteMsg')}
+        </SweetAlert>
+        <SweetAlert
+          show={this.state.alertNotDelete}
+          warning
+          confirmBtnText="Can't Delete"
+          confirmBtnBsStyle="danger"
+          title="Data can't be delete!"
+          onConfirm={() => this.setState({ alertNotDelete: false })}
+        >
+          Data project role tidak dapat di hapus!!
+        </SweetAlert>
+        <Card>
+          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+            <h4>{this.props.params.name}</h4>
+            <Row>
+              <Col>
+                <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} />
+              </Col>
+              <Col>
+                
+                <Tooltip title={this.props.t('exportExcel')}>
+                  <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
+                </Tooltip>
+              </Col>
+            </Row>
+          </CardHeader>
+          <CardBody>
+            <Table
+              rowKey="id"
+              size="small"
+              columns={this.columns}
+              dataSource={dataTable}
+              pagination={false}
+              bordered={false}
+            />
+            <Pagination
+              style={{ marginTop: "25px" }}
+              showSizeChanger
+              onShowSizeChange={this.onShowSizeChange}
+              onChange={this.onPagination}
+              defaultCurrent={currentPage}
+              pageSize={rowsPerPage}
+              total={totalPage}
+              pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+            />
+          </CardBody>
+        </Card>
+      </div>
+    )
+  }
+}
+export default withTranslation()(index);