Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into didam

src/api/index.js

@@ -3,25 +3,47 @@ import apisauce from 'apisauce'
 import Constant from '../library/Constant'
 
 // our "constructor"
-const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => {
+const create = (type = "") => {
+  let api;
   // ------
   // STEP 1
   // ------
   //
   // Create and configure an apisauce-based api object.
   //
-  const api = apisauce.create({
-    // base URL is read from the "constructor"
-    baseURL,
-    // here are some default headers
-    headers: {
-      'Cache-Control': 'no-cache',
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    // 10 second timeout...
-    timeout: 30000
-  })
+  const baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/'
+  switch (type) {
+    case '':
+      api = apisauce.create({
+        // base URL is read from the "constructor"
+        baseURL,
+        // here are some default headers
+        headers: {
+          'Cache-Control': 'no-cache',
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        // 60 second timeout...
+        timeout: 30000
+      })
+      break;
+    case 'UPLOAD':
+      api = apisauce.create({
+        // base URL is read from the "constructor"
+        baseURL,
+        // here are some default headers
+        headers: {
+          'Cache-Control': 'no-cache',
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        // 40 second timeout...
+        timeout: 40000
+      })
+      break;
+    default:
+      break;
+  }
 
   api.addAsyncRequestTransform(request => async () => {
     var token
@@ -169,6 +191,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
   const createSubmitReport = (body) => api.post('transaction/master_budget/create_submission_report', body)
   const getSubmission = (body) => api.post('transaction/get_submission_id', body)
   const checkUploadMB = (body) => api.post('transaction/master_budget/check_import', body)
+  const uploadMasterBudget = (body) => api.post('transaction/master_budget/import_master_budget', body)
 
 
   const getAllOperatingInd = (body) => api.post('/transaction/get_all_operating_indicator_report', body)
@@ -187,6 +210,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
   const uploadDocument = (body) => api.post('document/upload_document', body)
   const updateDocument = (body) => api.post('document/update_document', body)
   const downloadDocument = (body) => api.post('document/download_document', body)
+  const getPerusahaanUserActive = () => api.get('company/get_all_user_company_active')
+  const getDetailDocument = (id) => api.get(`document/get_document_by_id/${id}`)
+  const deleteDocument = (id) => api.post(`document/delete_document/${id}`)
 
   // ------
   // STEP 3
@@ -296,12 +322,16 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
     uploadDocument,
     updateDocument,
     downloadDocument,
+    getPerusahaanUserActive,
+    getDetailDocument,
+    deleteDocument,
     createSubmitReport,
     getSubmission,
     checkUploadMB,
     getAllOperatingInd,
     getOperatingIndDetail,
-    createOpetaingInd
+    createOpetaingInd,
+    uploadMasterBudget
   }
 }
 

src/container/BudgetTahunan.js

@@ -653,6 +653,8 @@ export default class BudgetTahunan extends Component {
                         submissionID={this.state.submissionID}
                         saveToMasterBudget={this.saveToMasterBudget.bind(this)}
                         onClickClose={() => this.setState({ visibleBS: false, visibleBudgetTahunan: true })}
+                        getReport={this.getReport.bind(this)}
+                        getReportAttachment={this.getReportAttachment.bind(this)}
                     />
                 )}
                 {this.state.visiblePL && (

src/container/BudgetTahunan/BalanceSheet.js

@@ -714,11 +714,6 @@ export default class BalanceSheet extends Component {
         } else {
             data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
         }
-        // this.forceUpdate()
-        // console.log(this.state.dataTable)
-        // this.setState({
-        //     data: a,
-        // }, () => console.log(this.state.dataTable))
     }
 
     backToMasterBudget(type) {
@@ -880,12 +875,37 @@ export default class BalanceSheet extends Component {
                             item.error
                         ]
                     })
-                    this.setState({ dataTable, dataLoaded: true, loading: false })
+                    this.setState({ dataTable, dataLoaded: true, loading: false, buttonError: false })
                 }
             }
         })
     }
 
+    checkError(tableMeta) {
+        if (tableMeta.rowData[22]) {
+            if (tableMeta.rowData[22][0] === 'item') {
+                this.setState({ buttonError: true })
+            }
+        }
+    }
+
+    uploadBalanceSheet() {
+        api.create('UPLOAD').uploadMasterBudget(this.state.payload).then(response => {
+            console.log(response);
+            if (response.data) {
+                if (response.data.status === "success") {
+                    this.props.onClickClose()
+                    this.props.getReport()
+                    this.props.getReportAttachment()
+                } else {
+                    alert(response.data.status)
+                }
+            } else {
+                alert(response.problem)
+            }
+        })
+    }
+
     render() {
         let dataTable2 = this.state.dataTable
         const handleChange = (value, tableMeta) => {
@@ -957,6 +977,7 @@ export default class BalanceSheet extends Component {
             return a
 
         }
+
         const columns = [{
             name: "",
             options: {
@@ -1000,11 +1021,13 @@ export default class BalanceSheet extends Component {
                                         tableMeta.rowData[4] == 0 ?
                                             <a data-tip={tableMeta.rowData[22][0].message} data-for="account">
                                                 <span style={{ fontSize: 12, fontWeight: 'bold', color: 'red' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                                                {this.checkError(tableMeta)}
                                             </a>
                                             :
                                             <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                                 <a data-tip={tableMeta.rowData[22][0].message} data-for="account">
                                                     <span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                                    {this.checkError(tableMeta)}
                                                 </a>
                                             </div>
                                         :
@@ -2551,10 +2574,10 @@ export default class BalanceSheet extends Component {
                                             cursor: this.state.disabledSave === true ? 'default' : 'pointer',
                                             borderColor: 'transparent',
                                             outline: 'none',
-                                            marginRight: 20 
+                                            marginRight: 20
                                         }}
                                     >
-                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center'}}>
+                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                             <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
                                         </div>
                                     </button>
@@ -2609,14 +2632,18 @@ export default class BalanceSheet extends Component {
                                         onClick={() => this.setState({ visibleBalanceSheet: true }, () => this.getItemHierarki())}
                                         style={{ marginRight: 20 }}
                                     >
-                                        <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960'}}>
+                                        <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
                                             <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
                                         </div>
                                     </button>
                                     <button
                                         type="button"
                                         disabled={this.state.buttonError == true ? true : false}
-                                        onClick={() => null}
+                                        onClick={() => this.setState({ loading: true }, () => {
+                                            setTimeout(() => {
+                                                this.uploadBalanceSheet()
+                                            }, 100);
+                                        })}
                                         style={{ marginRight: 20 }}
                                     >
                                         <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
@@ -2635,7 +2662,7 @@ export default class BalanceSheet extends Component {
                                         onClick={() => {
                                             this.setState({ loading: true }, () => {
                                                 setTimeout(() => {
-                                                    this.setState({ loading: false, buttonError: false })
+                                                    this.setState({ loading: false })
                                                 }, 100);
                                             })
                                         }}

src/container/BudgetTahunan/CorporateAnnualTarget.js

@@ -52,9 +52,10 @@ export default class CorporateAnnualTarget extends Component {
             "report_id": this.props.report_id,
             "revision": Number(this.props.revision),
             "periode": this.props.periode,
-            "company_id": this.props.company.company_id
+            "company_id": this.props.company.company_id,
+            "submission_id": this.props.submissionID
         }
-        api.create().getItemReportHierarki(payload).then(response => {
+        api.create().getDetailReportMB(payload).then(response => {
             console.log(response);
             if (response.data) {
                 if (response.data.status === "success") {
@@ -67,7 +68,29 @@ export default class CorporateAnnualTarget extends Component {
                                 item.parent,
                                 item.formula,
                                 item.level,
-                                item.description
+                                item.description,
+                                item.cat.weight,
+                                item.cat.uom,
+                                item.cat.kpi_type,
+                                item.cat.max_ach,
+                                item.cat.formula,
+                                item.cat.total_actual_before,
+                                item.cat.january,
+                                item.cat.february,
+                                item.cat.march,
+                                item.cat.april,
+                                item.cat.may,
+                                item.cat.june,
+                                item.cat.july,
+                                item.cat.august,
+                                item.cat.september,
+                                item.cat.october,
+                                item.cat.november,
+                                item.cat.december,
+                                item.cat.total_current_year,
+                                item.cat.total_next_year,
+                                item.cat.total_more_year,
+                                item.cat.pic
                             ])
                             item.children.map(i => {
                                 if (i.children) {
@@ -78,7 +101,29 @@ export default class CorporateAnnualTarget extends Component {
                                             i.parent,
                                             i.formula,
                                             i.level,
-                                            i.description
+                                            i.description,
+                                            i.cat.weight,
+                                            i.cat.uom,
+                                            i.cat.kpi_type,
+                                            i.cat.max_ach,
+                                            i.cat.formula,
+                                            i.cat.total_actual_before,
+                                            i.cat.january,
+                                            i.cat.february,
+                                            i.cat.march,
+                                            i.cat.april,
+                                            i.cat.may,
+                                            i.cat.june,
+                                            i.cat.july,
+                                            i.cat.august,
+                                            i.cat.september,
+                                            i.cat.october,
+                                            i.cat.november,
+                                            i.cat.december,
+                                            i.cat.total_current_year,
+                                            i.cat.total_next_year,
+                                            i.cat.total_more_year,
+                                            i.cat.pic
                                         ])
                                         i.children.map(val => {
                                             if (val.children && val.children.length > 0) {
@@ -88,18 +133,549 @@ export default class CorporateAnnualTarget extends Component {
                                                     val.parent,
                                                     val.formula,
                                                     val.level,
-                                                    val.description
+                                                    val.description,
+                                                    val.cat.weight,
+                                                    val.cat.uom,
+                                                    val.cat.kpi_type,
+                                                    val.cat.max_ach,
+                                                    val.cat.formula,
+                                                    val.cat.total_actual_before,
+                                                    val.cat.january,
+                                                    val.cat.february,
+                                                    val.cat.march,
+                                                    val.cat.april,
+                                                    val.cat.may,
+                                                    val.cat.june,
+                                                    val.cat.july,
+                                                    val.cat.august,
+                                                    val.cat.september,
+                                                    val.cat.october,
+                                                    val.cat.november,
+                                                    val.cat.december,
+                                                    val.cat.total_current_year,
+                                                    val.cat.total_next_year,
+                                                    val.cat.total_more_year,
+                                                    val.cat.pic
                                                 ])
                                                 val.children.map(items => {
-                                                    console.log(items)
-                                                    dataTable.push([
-                                                        items.type_report_id,
-                                                        items.id,
-                                                        items.parent,
-                                                        items.formula,
-                                                        items.level,
-                                                        items.description
-                                                    ])
+                                                    if (items.children && items.children.length > 0) {
+                                                        dataTable.push([
+                                                            items.type_report_id,
+                                                            items.id,
+                                                            items.parent,
+                                                            items.formula,
+                                                            items.level,
+                                                            items.description,
+                                                            items.cat.weight,
+                                                            items.cat.uom,
+                                                            items.cat.kpi_type,
+                                                            items.cat.max_ach,
+                                                            items.cat.formula,
+                                                            items.cat.total_actual_before,
+                                                            items.cat.january,
+                                                            items.cat.february,
+                                                            items.cat.march,
+                                                            items.cat.april,
+                                                            items.cat.may,
+                                                            items.cat.june,
+                                                            items.cat.july,
+                                                            items.cat.august,
+                                                            items.cat.september,
+                                                            items.cat.october,
+                                                            items.cat.november,
+                                                            items.cat.december,
+                                                            items.cat.total_current_year,
+                                                            items.cat.total_next_year,
+                                                            items.cat.total_more_year,
+                                                            items.cat.pic
+                                                        ])
+                                                        items.children.map(itemss => {
+                                                            if (itemss.children && itemss.children.length > 0) {
+                                                                dataTable.push([
+                                                                    itemss.type_report_id,
+                                                                    itemss.id,
+                                                                    itemss.parent,
+                                                                    itemss.formula,
+                                                                    itemss.level,
+                                                                    itemss.description,
+                                                                    itemss.cat.weight,
+                                                                    itemss.cat.uom,
+                                                                    itemss.cat.kpi_type,
+                                                                    itemss.cat.max_ach,
+                                                                    itemss.cat.formula,
+                                                                    itemss.cat.total_actual_before,
+                                                                    itemss.cat.january,
+                                                                    itemss.cat.february,
+                                                                    itemss.cat.march,
+                                                                    itemss.cat.april,
+                                                                    itemss.cat.may,
+                                                                    itemss.cat.june,
+                                                                    itemss.cat.july,
+                                                                    itemss.cat.august,
+                                                                    itemss.cat.september,
+                                                                    itemss.cat.october,
+                                                                    itemss.cat.november,
+                                                                    itemss.cat.december,
+                                                                    itemss.cat.total_current_year,
+                                                                    itemss.cat.total_next_year,
+                                                                    itemss.cat.total_more_year,
+                                                                    itemss.cat.pic
+                                                                ])
+                                                                itemss.children.map(item1 => {
+                                                                    if (item1.children && item1.children.length > 0) {
+                                                                        dataTable.push([
+                                                                            item1.type_report_id,
+                                                                            item1.id,
+                                                                            item1.parent,
+                                                                            item1.formula,
+                                                                            item1.level,
+                                                                            item1.description,
+                                                                            item1.cat.weight,
+                                                                            item1.cat.uom,
+                                                                            item1.cat.kpi_type,
+                                                                            item1.cat.max_ach,
+                                                                            item1.cat.formula,
+                                                                            item1.cat.total_actual_before,
+                                                                            item1.cat.january,
+                                                                            item1.cat.february,
+                                                                            item1.cat.march,
+                                                                            item1.cat.april,
+                                                                            item1.cat.may,
+                                                                            item1.cat.june,
+                                                                            item1.cat.july,
+                                                                            item1.cat.august,
+                                                                            item1.cat.september,
+                                                                            item1.cat.october,
+                                                                            item1.cat.november,
+                                                                            item1.cat.december,
+                                                                            item1.cat.total_current_year,
+                                                                            item1.cat.total_next_year,
+                                                                            item1.cat.total_more_year,
+                                                                            item1.cat.pic
+                                                                        ])
+                                                                        item1.children.map(item2 => {
+                                                                            if (item2.children && item2.children.length > 0) {
+                                                                                dataTable.push([
+                                                                                    item2.type_report_id,
+                                                                                    item2.id,
+                                                                                    item2.parent,
+                                                                                    item2.formula,
+                                                                                    item2.level,
+                                                                                    item2.description,
+                                                                                    item2.cat.weight,
+                                                                                    item2.cat.uom,
+                                                                                    item2.cat.kpi_type,
+                                                                                    item2.cat.max_ach,
+                                                                                    item2.cat.formula,
+                                                                                    item2.cat.total_actual_before,
+                                                                                    item2.cat.january,
+                                                                                    item2.cat.february,
+                                                                                    item2.cat.march,
+                                                                                    item2.cat.april,
+                                                                                    item2.cat.may,
+                                                                                    item2.cat.june,
+                                                                                    item2.cat.july,
+                                                                                    item2.cat.august,
+                                                                                    item2.cat.september,
+                                                                                    item2.cat.october,
+                                                                                    item2.cat.november,
+                                                                                    item2.cat.december,
+                                                                                    item2.cat.total_current_year,
+                                                                                    item2.cat.total_next_year,
+                                                                                    item2.cat.total_more_year,
+                                                                                    item2.cat.pic
+                                                                                ])
+                                                                                item2.children.map(item3 => {
+                                                                                    if (item3.children && item3.children.length > 0) {
+                                                                                        dataTable.push([
+                                                                                            item3.type_report_id,
+                                                                                            item3.id,
+                                                                                            item3.parent,
+                                                                                            item3.formula,
+                                                                                            item3.level,
+                                                                                            item3.description,
+                                                                                            item3.cat.weight,
+                                                                                            item3.cat.uom,
+                                                                                            item3.cat.kpi_type,
+                                                                                            item3.cat.max_ach,
+                                                                                            item3.cat.formula,
+                                                                                            item3.cat.total_actual_before,
+                                                                                            item3.cat.january,
+                                                                                            item3.cat.february,
+                                                                                            item3.cat.march,
+                                                                                            item3.cat.april,
+                                                                                            item3.cat.may,
+                                                                                            item3.cat.june,
+                                                                                            item3.cat.july,
+                                                                                            item3.cat.august,
+                                                                                            item3.cat.september,
+                                                                                            item3.cat.october,
+                                                                                            item3.cat.november,
+                                                                                            item3.cat.december,
+                                                                                            item3.cat.total_current_year,
+                                                                                            item3.cat.total_next_year,
+                                                                                            item3.cat.total_more_year,
+                                                                                            item3.cat.pic
+                                                                                        ])
+                                                                                        item3.children.map(item4 => {
+                                                                                            if (item4.children && item4.children.length > 0) {
+                                                                                                dataTable.push([
+                                                                                                    item4.type_report_id,
+                                                                                                    item4.id,
+                                                                                                    item4.parent,
+                                                                                                    item4.formula,
+                                                                                                    item4.level,
+                                                                                                    item4.description,
+                                                                                                    item4.cat.weight,
+                                                                                                    item4.cat.uom,
+                                                                                                    item4.cat.kpi_type,
+                                                                                                    item4.cat.max_ach,
+                                                                                                    item4.cat.formula,
+                                                                                                    item4.cat.total_actual_before,
+                                                                                                    item4.cat.january,
+                                                                                                    item4.cat.february,
+                                                                                                    item4.cat.march,
+                                                                                                    item4.cat.april,
+                                                                                                    item4.cat.may,
+                                                                                                    item4.cat.june,
+                                                                                                    item4.cat.july,
+                                                                                                    item4.cat.august,
+                                                                                                    item4.cat.september,
+                                                                                                    item4.cat.october,
+                                                                                                    item4.cat.november,
+                                                                                                    item4.cat.december,
+                                                                                                    item4.cat.total_current_year,
+                                                                                                    item4.cat.total_next_year,
+                                                                                                    item4.cat.total_more_year,
+                                                                                                    item4.cat.pic
+                                                                                                ])
+                                                                                                item4.children.map(item5 => {
+                                                                                                    if (item5.children && item5.children.length > 0) {
+                                                                                                        dataTable.push([
+                                                                                                            item5.type_report_id,
+                                                                                                            item5.id,
+                                                                                                            item5.parent,
+                                                                                                            item5.formula,
+                                                                                                            item5.level,
+                                                                                                            item5.description,
+                                                                                                            item5.cat.weight,
+                                                                                                            item5.cat.uom,
+                                                                                                            item5.cat.kpi_type,
+                                                                                                            item5.cat.max_ach,
+                                                                                                            item5.cat.formula,
+                                                                                                            item5.cat.total_actual_before,
+                                                                                                            item5.cat.january,
+                                                                                                            item5.cat.february,
+                                                                                                            item5.cat.march,
+                                                                                                            item5.cat.april,
+                                                                                                            item5.cat.may,
+                                                                                                            item5.cat.june,
+                                                                                                            item5.cat.july,
+                                                                                                            item5.cat.august,
+                                                                                                            item5.cat.september,
+                                                                                                            item5.cat.october,
+                                                                                                            item5.cat.november,
+                                                                                                            item5.cat.december,
+                                                                                                            item5.cat.total_current_year,
+                                                                                                            item5.cat.total_next_year,
+                                                                                                            item5.cat.total_more_year,
+                                                                                                            item5.cat.pic
+                                                                                                        ])
+                                                                                                        item5.children.map(item6 => {
+                                                                                                            if (item6.children && item.children.length > 0) {
+                                                                                                                dataTable.push([
+                                                                                                                    item6.type_report_id,
+                                                                                                                    item6.id,
+                                                                                                                    item6.parent,
+                                                                                                                    item6.formula,
+                                                                                                                    item6.level,
+                                                                                                                    item6.description,
+                                                                                                                    item6.cat.weight,
+                                                                                                                    item6.cat.uom,
+                                                                                                                    item6.cat.kpi_type,
+                                                                                                                    item6.cat.max_ach,
+                                                                                                                    item6.cat.formula,
+                                                                                                                    item6.cat.total_actual_before,
+                                                                                                                    item6.cat.january,
+                                                                                                                    item6.cat.february,
+                                                                                                                    item6.cat.march,
+                                                                                                                    item6.cat.april,
+                                                                                                                    item6.cat.may,
+                                                                                                                    item6.cat.june,
+                                                                                                                    item6.cat.july,
+                                                                                                                    item6.cat.august,
+                                                                                                                    item6.cat.september,
+                                                                                                                    item6.cat.october,
+                                                                                                                    item6.cat.november,
+                                                                                                                    item6.cat.december,
+                                                                                                                    item6.cat.total_current_year,
+                                                                                                                    item6.cat.total_next_year,
+                                                                                                                    item6.cat.total_more_year,
+                                                                                                                    item6.cat.pic
+                                                                                                                ])
+                                                                                                            } else {
+                                                                                                                dataTable.push([
+                                                                                                                    item6.type_report_id,
+                                                                                                                    item6.id,
+                                                                                                                    item6.parent,
+                                                                                                                    item6.formula,
+                                                                                                                    item6.level,
+                                                                                                                    item6.description,
+                                                                                                                    item6.cat.weight,
+                                                                                                                    item6.cat.uom,
+                                                                                                                    item6.cat.kpi_type,
+                                                                                                                    item6.cat.max_ach,
+                                                                                                                    item6.cat.formula,
+                                                                                                                    item6.cat.total_actual_before,
+                                                                                                                    item6.cat.january,
+                                                                                                                    item6.cat.february,
+                                                                                                                    item6.cat.march,
+                                                                                                                    item6.cat.april,
+                                                                                                                    item6.cat.may,
+                                                                                                                    item6.cat.june,
+                                                                                                                    item6.cat.july,
+                                                                                                                    item6.cat.august,
+                                                                                                                    item6.cat.september,
+                                                                                                                    item6.cat.october,
+                                                                                                                    item6.cat.november,
+                                                                                                                    item6.cat.december,
+                                                                                                                    item6.cat.total_current_year,
+                                                                                                                    item6.cat.total_next_year,
+                                                                                                                    item6.cat.total_more_year,
+                                                                                                                    item6.cat.pic
+                                                                                                                ])
+                                                                                                            }
+                                                                                                        })
+                                                                                                    } else {
+                                                                                                        dataTable.push([
+                                                                                                            item5.type_report_id,
+                                                                                                            item5.id,
+                                                                                                            item5.parent,
+                                                                                                            item5.formula,
+                                                                                                            item5.level,
+                                                                                                            item5.description,
+                                                                                                            item5.cat.weight,
+                                                                                                            item5.cat.uom,
+                                                                                                            item5.cat.kpi_type,
+                                                                                                            item5.cat.max_ach,
+                                                                                                            item5.cat.formula,
+                                                                                                            item5.cat.total_actual_before,
+                                                                                                            item5.cat.january,
+                                                                                                            item5.cat.february,
+                                                                                                            item5.cat.march,
+                                                                                                            item5.cat.april,
+                                                                                                            item5.cat.may,
+                                                                                                            item5.cat.june,
+                                                                                                            item5.cat.july,
+                                                                                                            item5.cat.august,
+                                                                                                            item5.cat.september,
+                                                                                                            item5.cat.october,
+                                                                                                            item5.cat.november,
+                                                                                                            item5.cat.december,
+                                                                                                            item5.cat.total_current_year,
+                                                                                                            item5.cat.total_next_year,
+                                                                                                            item5.cat.total_more_year,
+                                                                                                            item5.cat.pic
+                                                                                                        ])
+                                                                                                    }
+                                                                                                })
+                                                                                            } else {
+                                                                                                dataTable.push([
+                                                                                                    item4.type_report_id,
+                                                                                                    item4.id,
+                                                                                                    item4.parent,
+                                                                                                    item4.formula,
+                                                                                                    item4.level,
+                                                                                                    item4.description,
+                                                                                                    item4.cat.weight,
+                                                                                                    item4.cat.uom,
+                                                                                                    item4.cat.kpi_type,
+                                                                                                    item4.cat.max_ach,
+                                                                                                    item4.cat.formula,
+                                                                                                    item4.cat.total_actual_before,
+                                                                                                    item4.cat.january,
+                                                                                                    item4.cat.february,
+                                                                                                    item4.cat.march,
+                                                                                                    item4.cat.april,
+                                                                                                    item4.cat.may,
+                                                                                                    item4.cat.june,
+                                                                                                    item4.cat.july,
+                                                                                                    item4.cat.august,
+                                                                                                    item4.cat.september,
+                                                                                                    item4.cat.october,
+                                                                                                    item4.cat.november,
+                                                                                                    item4.cat.december,
+                                                                                                    item4.cat.total_current_year,
+                                                                                                    item4.cat.total_next_year,
+                                                                                                    item4.cat.total_more_year,
+                                                                                                    item4.cat.pic
+                                                                                                ])
+                                                                                            }
+                                                                                        })
+                                                                                    } else {
+                                                                                        dataTable.push([
+                                                                                            item3.type_report_id,
+                                                                                            item3.id,
+                                                                                            item3.parent,
+                                                                                            item3.formula,
+                                                                                            item3.level,
+                                                                                            item3.description,
+                                                                                            item3.cat.weight,
+                                                                                            item3.cat.uom,
+                                                                                            item3.cat.kpi_type,
+                                                                                            item3.cat.max_ach,
+                                                                                            item3.cat.formula,
+                                                                                            item3.cat.total_actual_before,
+                                                                                            item3.cat.january,
+                                                                                            item3.cat.february,
+                                                                                            item3.cat.march,
+                                                                                            item3.cat.april,
+                                                                                            item3.cat.may,
+                                                                                            item3.cat.june,
+                                                                                            item3.cat.july,
+                                                                                            item3.cat.august,
+                                                                                            item3.cat.september,
+                                                                                            item3.cat.october,
+                                                                                            item3.cat.november,
+                                                                                            item3.cat.december,
+                                                                                            item3.cat.total_current_year,
+                                                                                            item3.cat.total_next_year,
+                                                                                            item3.cat.total_more_year,
+                                                                                            item3.cat.pic
+                                                                                        ])
+                                                                                    }
+                                                                                })
+                                                                            } else {
+                                                                                dataTable.push([
+                                                                                    item2.type_report_id,
+                                                                                    item2.id,
+                                                                                    item2.parent,
+                                                                                    item2.formula,
+                                                                                    item2.level,
+                                                                                    item2.description,
+                                                                                    item2.cat.weight,
+                                                                                    item2.cat.uom,
+                                                                                    item2.cat.kpi_type,
+                                                                                    item2.cat.max_ach,
+                                                                                    item2.cat.formula,
+                                                                                    item2.cat.total_actual_before,
+                                                                                    item2.cat.january,
+                                                                                    item2.cat.february,
+                                                                                    item2.cat.march,
+                                                                                    item2.cat.april,
+                                                                                    item2.cat.may,
+                                                                                    item2.cat.june,
+                                                                                    item2.cat.july,
+                                                                                    item2.cat.august,
+                                                                                    item2.cat.september,
+                                                                                    item2.cat.october,
+                                                                                    item2.cat.november,
+                                                                                    item2.cat.december,
+                                                                                    item2.cat.total_current_year,
+                                                                                    item2.cat.total_next_year,
+                                                                                    item2.cat.total_more_year,
+                                                                                    item2.cat.pic
+                                                                                ])
+                                                                            }
+                                                                        })
+                                                                    } else {
+                                                                        dataTable.push([
+                                                                            item1.type_report_id,
+                                                                            item1.id,
+                                                                            item1.parent,
+                                                                            item1.formula,
+                                                                            item1.level,
+                                                                            item1.description,
+                                                                            item1.cat.weight,
+                                                                            item1.cat.uom,
+                                                                            item1.cat.kpi_type,
+                                                                            item1.cat.max_ach,
+                                                                            item1.cat.formula,
+                                                                            item1.cat.total_actual_before,
+                                                                            item1.cat.january,
+                                                                            item1.cat.february,
+                                                                            item1.cat.march,
+                                                                            item1.cat.april,
+                                                                            item1.cat.may,
+                                                                            item1.cat.june,
+                                                                            item1.cat.july,
+                                                                            item1.cat.august,
+                                                                            item1.cat.september,
+                                                                            item1.cat.october,
+                                                                            item1.cat.november,
+                                                                            item1.cat.december,
+                                                                            item1.cat.total_current_year,
+                                                                            item1.cat.total_next_year,
+                                                                            item1.cat.total_more_year,
+                                                                            item1.cat.pic
+                                                                        ])
+                                                                    }
+                                                                })
+                                                            } else {
+                                                                dataTable.push([
+                                                                    itemss.type_report_id,
+                                                                    itemss.id,
+                                                                    itemss.parent,
+                                                                    itemss.formula,
+                                                                    itemss.level,
+                                                                    itemss.description,
+                                                                    itemss.cat.weight,
+                                                                    itemss.cat.uom,
+                                                                    itemss.cat.kpi_type,
+                                                                    itemss.cat.max_ach,
+                                                                    itemss.cat.formula,
+                                                                    itemss.cat.total_actual_before,
+                                                                    itemss.cat.january,
+                                                                    itemss.cat.february,
+                                                                    itemss.cat.march,
+                                                                    itemss.cat.april,
+                                                                    itemss.cat.may,
+                                                                    itemss.cat.june,
+                                                                    itemss.cat.july,
+                                                                    itemss.cat.august,
+                                                                    itemss.cat.september,
+                                                                    itemss.cat.october,
+                                                                    itemss.cat.november,
+                                                                    itemss.cat.december,
+                                                                    itemss.cat.total_current_year,
+                                                                    itemss.cat.total_next_year,
+                                                                    itemss.cat.total_more_year,
+                                                                    itemss.cat.pic
+                                                                ])
+                                                            }
+                                                        })
+                                                    } else {
+                                                        dataTable.push([
+                                                            items.type_report_id,
+                                                            items.id,
+                                                            items.parent,
+                                                            items.formula,
+                                                            items.level,
+                                                            items.description,
+                                                            items.cat.weight,
+                                                            items.cat.uom,
+                                                            items.cat.kpi_type,
+                                                            items.cat.max_ach,
+                                                            items.cat.formula,
+                                                            items.cat.total_actual_before,
+                                                            items.cat.january,
+                                                            items.cat.february,
+                                                            items.cat.march,
+                                                            items.cat.april,
+                                                            items.cat.may,
+                                                            items.cat.june,
+                                                            items.cat.july,
+                                                            items.cat.august,
+                                                            items.cat.september,
+                                                            items.cat.october,
+                                                            items.cat.november,
+                                                            items.cat.december,
+                                                            items.cat.total_current_year,
+                                                            items.cat.total_next_year,
+                                                            items.cat.total_more_year,
+                                                            items.cat.pic
+                                                        ])
+                                                    }
                                                 })
                                             } else {
                                                 dataTable.push([
@@ -108,7 +684,29 @@ export default class CorporateAnnualTarget extends Component {
                                                     val.parent,
                                                     val.formula,
                                                     val.level,
-                                                    val.description
+                                                    val.description,
+                                                    val.cat.weight,
+                                                    val.cat.uom,
+                                                    val.cat.kpi_type,
+                                                    val.cat.max_ach,
+                                                    val.cat.formula,
+                                                    val.cat.total_actual_before,
+                                                    val.cat.january,
+                                                    val.cat.february,
+                                                    val.cat.march,
+                                                    val.cat.april,
+                                                    val.cat.may,
+                                                    val.cat.june,
+                                                    val.cat.july,
+                                                    val.cat.august,
+                                                    val.cat.september,
+                                                    val.cat.october,
+                                                    val.cat.november,
+                                                    val.cat.december,
+                                                    val.cat.total_current_year,
+                                                    val.cat.total_next_year,
+                                                    val.cat.total_more_year,
+                                                    val.cat.pic
                                                 ])
                                             }
                                         })
@@ -119,7 +717,29 @@ export default class CorporateAnnualTarget extends Component {
                                             i.parent,
                                             i.formula,
                                             i.level,
-                                            i.description
+                                            i.description,
+                                            i.cat.weight,
+                                            i.cat.uom,
+                                            i.cat.kpi_type,
+                                            i.cat.max_ach,
+                                            i.cat.formula,
+                                            i.cat.total_actual_before,
+                                            i.cat.january,
+                                            i.cat.february,
+                                            i.cat.march,
+                                            i.cat.april,
+                                            i.cat.may,
+                                            i.cat.june,
+                                            i.cat.july,
+                                            i.cat.august,
+                                            i.cat.september,
+                                            i.cat.october,
+                                            i.cat.november,
+                                            i.cat.december,
+                                            i.cat.total_current_year,
+                                            i.cat.total_next_year,
+                                            i.cat.total_more_year,
+                                            i.cat.pic
                                         ])
                                     }
                                 } else {
@@ -129,7 +749,29 @@ export default class CorporateAnnualTarget extends Component {
                                         i.parent,
                                         i.formula,
                                         i.level,
-                                        i.description
+                                        i.description,
+                                        i.cat.weight,
+                                        i.cat.uom,
+                                        i.cat.kpi_type,
+                                        i.cat.max_ach,
+                                        i.cat.formula,
+                                        i.cat.total_actual_before,
+                                        i.cat.january,
+                                        i.cat.february,
+                                        i.cat.march,
+                                        i.cat.april,
+                                        i.cat.may,
+                                        i.cat.june,
+                                        i.cat.july,
+                                        i.cat.august,
+                                        i.cat.september,
+                                        i.cat.october,
+                                        i.cat.november,
+                                        i.cat.december,
+                                        i.cat.total_current_year,
+                                        i.cat.total_next_year,
+                                        i.cat.total_more_year,
+                                        i.cat.pic
                                     ])
                                 }
                             })
@@ -140,13 +782,37 @@ export default class CorporateAnnualTarget extends Component {
                                 item.parent,
                                 item.formula,
                                 item.level,
-                                item.description
+                                item.description,
+                                item.cat.weight,
+                                item.cat.uom,
+                                item.cat.kpi_type,
+                                item.cat.max_ach,
+                                item.cat.formula,
+                                item.cat.total_actual_before,
+                                item.cat.january,
+                                item.cat.february,
+                                item.cat.march,
+                                item.cat.april,
+                                item.cat.may,
+                                item.cat.june,
+                                item.cat.july,
+                                item.cat.august,
+                                item.cat.september,
+                                item.cat.october,
+                                item.cat.november,
+                                item.cat.december,
+                                item.cat.total_current_year,
+                                item.cat.total_next_year,
+                                item.cat.total_more_year,
+                                item.cat.pic
                             ])
                         }
                     })
                     console.log(dataTable);
-                    this.setState({ dataTable })
+                    this.setState({ dataTable, loading: false })
                 }
+            } else {
+                this.setState({ loading: false })
             }
         })
     }
@@ -183,6 +849,43 @@ export default class CorporateAnnualTarget extends Component {
         // }, () => console.log(this.state.dataTable))
     }
 
+    backToMasterBudget(type) {
+        let data = []
+        this.state.dataTable.map(i => {
+            data.push({
+                item_report_id: i[1],
+                total_actual_before: String(i[6]),
+                january: String(i[7]),
+                february: String(i[8]),
+                march: String(i[9]),
+                april: String(i[10]),
+                may: String(i[11]),
+                june: String(i[12]),
+                july: String(i[13]),
+                august: String(i[14]),
+                september: String(i[15]),
+                october: String(i[16]),
+                november: String(i[17]),
+                december: String(i[18]),
+                total_current_year: String(i[19]),
+                total_next_year: String(i[20]),
+                total_more_year: String(i[21])
+            })
+
+        })
+        let payload = {
+            "submission_id": this.props.submissionID,
+            "company_id": this.props.company.company_id,
+            "periode": this.props.periode,
+            "report_id": this.props.report_id,
+            "status": type,
+            "balance_sheet": data
+        }
+        // console.log(data);
+        this.props.saveToMasterBudget(payload)
+        this.props.onClickClose()
+    }
+
     render() {
         let dataTable2 = this.state.dataTable
         const handleChange = (value, tableMeta) => {
@@ -210,6 +913,50 @@ export default class CorporateAnnualTarget extends Component {
             // console.log(indexParent);
             return a
         }
+        const handleFormula = (data, tableMeta) => {
+            let arrayFormula = tableMeta.rowData[3].match(/[a-zA-Z]+|[0-9]+|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+(?:\.[0-9]+@|)/g)
+            let arrayJumlah = []
+            arrayFormula.map((item, indexs) => {
+                let index = dataTable2.findIndex((val) => val[1] == item)
+                if (index > 0) {
+                    arrayJumlah.push(dataTable2[index][tableMeta.columnIndex])
+                } else {
+                    arrayJumlah.push(item)
+                }
+                // if (indexs % 2 !== 0) {
+                //     operator.push(item)
+                // }
+            })
+            let array = arrayJumlah
+            let total = 0
+            let opt = ""
+            array.map((item, index) => {
+                if (item == "+") {
+                    opt = "tambah"
+                } else if (item == "-") {
+                    opt = "kurang"
+                } else if (item == "*") {
+                    opt = "kali"
+                } else if (item == "/") {
+                    opt = "bagi"
+                } else {
+                    if (opt == "tambah") {
+                        total = Number(total) + Number(item)
+                    } else if (opt == "kurang") {
+                        total = Number(total) - Number(item)
+                    } else if (opt == "kali") {
+                        total = Number(total) * Number(item)
+                    } else if (opt == "bagi") {
+                        total = Number(total) / Number(item)
+                    } else {
+                        total += item
+                    }
+                }
+            })
+            let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(total)
+            return a
+
+        }
         const columns = [{
             name: "",
             options: {

src/container/BudgetTahunan/ProfitLoss.js

@@ -8,6 +8,8 @@ import { values } from 'ramda';
 import PropagateLoader from "react-spinners/PropagateLoader"
 import Images from '../../assets/Images';
 import ReactTooltip from 'react-tooltip';
+import UploadFile from "../../library/Upload";
+import { ExcelRenderer } from 'react-excel-renderer';
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable3());
@@ -40,9 +42,12 @@ export default class ProfitLoss extends Component {
                 // ["Notes Receivable", "", ""],
                 // ["Accounts Receivable", "172,031", "97,112"],
                 // ["Trade Receivables - Third Party", "142,668", "77,480"],
-            ]
+            ],
+            visibleProfitLoss: true,
+            disabledSave: true
         }
         this.handleValue = this.handleValue.bind(this)
+        this.fileHandler = this.fileHandler.bind(this);
     }
 
     componentDidMount() {
@@ -65,6 +70,7 @@ export default class ProfitLoss extends Component {
                 if (response.data.status === "success") {
                     let dataTable = []
                     response.data.data.map((item, index) => {
+
                         if (item.children && item.children.length > 0) {
                             dataTable.push([
                                 item.type_report_id,
@@ -697,7 +703,7 @@ export default class ProfitLoss extends Component {
                             ])
                         }
                     })
-                    // console.log(dataTable);
+                    console.log(dataTable);
                     this.setState({ loading: false, dataTable })
                 }
             } else {
@@ -772,7 +778,7 @@ export default class ProfitLoss extends Component {
             "status": type,
             "profit_loss": data
         }
-        console.log(data);
+        // console.log(data);
         this.props.saveToMasterBudget(payload)
         this.props.onClickClose()
     }
@@ -792,6 +798,121 @@ export default class ProfitLoss extends Component {
         }
     }
 
+    fileHandler = (event) => {
+        let fileObj = event
+        ExcelRenderer(fileObj, (err, resp) => {
+            if (err) {
+                console.log(err);
+            }
+            else {
+                let isi = resp.rows.slice(3)
+                console.log(isi);
+                let payload = []
+                isi.map((i, index) => {
+                    if (i.length > 0) {
+                        payload.push({
+                            item_report_id: i[0] === undefined ? "" : String(i[0]).trim(),
+                            item_report: i[1] === undefined ? "" : String(i[1]).trim(),
+                            notes: i[2] === undefined ? "" : String(i[2]).trim(),
+                            total_actual_before: i[3] === undefined ? "" : String(i[3]).trim(),
+                            january: i[4] === undefined ? "" : String(i[4]).trim(),
+                            february: i[5] === undefined ? "" : String(i[5]).trim(),
+                            march: i[6] === undefined ? "" : String(i[6]).trim(),
+                            april: i[7] === undefined ? "" : String(i[7]).trim(),
+                            may: i[8] === undefined ? "" : String(i[8]).trim(),
+                            june: i[9] === undefined ? "" : String(i[9]).trim(),
+                            july: i[10] === undefined ? "" : String(i[10]).trim(),
+                            august: i[11] === undefined ? "" : String(i[11]).trim(),
+                            september: i[12] === undefined ? "" : String(i[12]).trim(),
+                            october: i[13] === undefined ? "" : String(i[13]).trim(),
+                            november: i[14] === undefined ? "" : String(i[14]).trim(),
+                            december: i[15] === undefined ? "" : String(i[15]).trim(),
+                            total_current_year: i[16] === undefined ? "" : String(i[16]).trim(),
+                            total_next_year: i[17] === undefined ? "" : String(i[17]).trim(),
+                            total_more_year: i[18] === undefined ? "" : String(i[18]).trim()
+                        })
+                    }
+                })
+                let rows = isi.map((i, index) => {
+                    return [
+                        String(i[0]) === '-' ? 4 : 3,
+                        0,
+                        0,
+                        "",
+                        1,
+                        i[0] === undefined ? "" : String(i[0]),
+                        i[1] === undefined ? "" : String(i[1]),
+                        i[2] === undefined ? "" : String(i[2]),
+                        i[3] === undefined ? "" : String(i[3]),
+                        i[4] === undefined ? "" : String(i[4]),
+                        i[5] === undefined ? "" : String(i[5]),
+                        i[6] === undefined ? "" : String(i[6]),
+                        i[7] === undefined ? "" : String(i[7]),
+                        i[8] === undefined ? "" : String(i[8]),
+                        i[9] === undefined ? "" : String(i[9]),
+                        i[10] === undefined ? "" : String(i[10]),
+                        i[11] === undefined ? "" : String(i[11]),
+                        i[12] === undefined ? "" : String(i[12]),
+                        i[13] === undefined ? "" : String(i[13]),
+                        i[14] === undefined ? "" : String(i[14]),
+                        i[15] === undefined ? "" : String(i[15]),
+                        i[16] === undefined ? "" : String(i[16]),
+                        i[17] === undefined ? "" : String(i[17])
+                    ]
+                })
+                let body = {
+                    company_id: this.props.company.company_id,
+                    periode: this.props.periode,
+                    report_id: this.props.report_id,
+                    profit_loss: payload
+                }
+                // console.log(JSON.stringify(body))
+                this.setState({ payload: body, buttonError: false, judul: resp.rows[1][0] })
+            }
+        });
+    }
+
+    checkUpload() {
+        api.create().checkUploadMB(this.state.payload).then(response => {
+            console.log(JSON.stringify(this.state.payload));
+            console.log(response)
+            if (response.data) {
+                if (response.data.status === 'success') {
+                    this.setState({ visibleUpload: false, visibleProfitLoss: false, loading: true })
+                    let dataTable = response.data.data.map((item, index) => {
+                        return [
+                            item.type_report_id,
+                            item.item_report_id,
+                            item.parent,
+                            item.formula,
+                            item.level,
+                            item.item_report,
+                            item.notes,
+                            item.total_actual_before,
+                            item.january,
+                            item.february,
+                            item.march,
+                            item.april,
+                            item.may,
+                            item.june,
+                            item.july,
+                            item.august,
+                            item.september,
+                            item.october,
+                            item.november,
+                            item.december,
+                            item.total_current_year,
+                            item.total_next_year,
+                            item.total_more_year,
+                            item.error
+                        ]
+                    })
+                    this.setState({ dataTable, dataLoaded: true, loading: false })
+                }
+            }
+        })
+    }
+
     render() {
         let dataTable2 = this.state.dataTable
         const handleChange = (value, tableMeta) => {
@@ -907,13 +1028,42 @@ export default class ProfitLoss extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ width: 300 }}>
-                            {tableMeta.rowData[4] == 0 ?
-                                <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                            {tableMeta.rowData[23] ?
+                                tableMeta.rowData[23].length > 0 ?
+                                    tableMeta.rowData[23][0].field === 'item' ?
+                                        tableMeta.rowData[4] == 0 ?
+                                            <a data-tip={tableMeta.rowData[23][0].message} data-for="account">
+                                                <span style={{ fontSize: 12, fontWeight: 'bold', color: 'red' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                                            </a>
+                                            :
+                                            <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
+                                                <a data-tip={tableMeta.rowData[23][0].message} data-for="account">
+                                                    <span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                                </a>
+                                            </div>
+                                        :
+                                        tableMeta.rowData[4] == 0 ?
+                                            <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                                            :
+                                            <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
+                                                <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                            </div>
+                                    :
+                                    tableMeta.rowData[4] == 0 ?
+                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                                        :
+                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
+                                            <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                        </div>
                                 :
-                                <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
-                                    <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
-                                </div>
+                                tableMeta.rowData[4] == 0 ?
+                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
+                                    :
+                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
+                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
+                                    </div>
                             }
+                            <ReactTooltip border={true} id="account" place="bottom" type="light" effect="solid" />
                         </div>
                     )
                 }
@@ -2331,6 +2481,12 @@ export default class ProfitLoss extends Component {
                     )
                 }
             }
+        },
+        {
+            name: "",
+            options: {
+                display: false
+            }
         }
         ]
         const loadingComponent = (
@@ -2351,145 +2507,258 @@ export default class ProfitLoss extends Component {
                 </div>
                 {this.state.loading && loadingComponent}
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>
-                    <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
-                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
-                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Profit & Loss</Typography>
-                        </div>
-                        <div style={{ padding: 20 }}>
-                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                <div>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : {this.props.periode}</Typography>
-                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
-                                </div>
-                                <div style={{ width: '50%' }}>
-                                    <div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
-                                        <a data-tip={'Download Template'} data-for="template">
-                                            <button
-                                                style={{
-                                                    backgroundColor: 'transparent',
-                                                    cursor: 'pointer',
-                                                    borderColor: 'transparent',
-                                                    margin: 5
-                                                }}
-                                                onClick={() => this.downloadTemplate()}
-                                            >
-                                                <img src={Images.template} />
-                                            </button>
-                                        </a>
-                                        <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
-                                        <a data-tip={'Upload'} data-for="upload">
-                                            <button
-                                                style={{
-                                                    backgroundColor: 'transparent',
-                                                    cursor: 'pointer',
-                                                    borderColor: 'transparent',
-                                                    margin: 5
-                                                }}
-                                                onClick={() => null}
-                                            >
-                                                <img src={Images.upload} />
-                                            </button>
-                                        </a>
-                                        <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
-                                        <a data-tip={'Download'} data-for="download">
-                                            <button
-                                                style={{
-                                                    backgroundColor: 'transparent',
-                                                    cursor: 'pointer',
-                                                    borderColor: 'transparent',
-                                                    margin: 5
-                                                }}
-                                                onClick={() => null}
-                                            >
-                                                <img src={Images.download} />
-                                            </button>
-                                        </a>
-                                        <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
+                    {this.state.visibleProfitLoss === true ?
+                        <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
+                            <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
+                                <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Profit & Loss</Typography>
+                            </div>
+                            <div style={{ padding: 20 }}>
+                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                    <div>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : {this.props.periode}</Typography>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
+                                    </div>
+                                    <div style={{ width: '50%' }}>
+                                        <div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
+                                            <a data-tip={'Download Template'} data-for="template">
+                                                <button
+                                                    style={{
+                                                        backgroundColor: 'transparent',
+                                                        cursor: 'pointer',
+                                                        borderColor: 'transparent',
+                                                        margin: 5
+                                                    }}
+                                                    onClick={() => this.downloadTemplate()}
+                                                >
+                                                    <img src={Images.template} />
+                                                </button>
+                                            </a>
+                                            <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
+                                            <a data-tip={'Upload'} data-for="upload">
+                                                <button
+                                                    style={{
+                                                        backgroundColor: 'transparent',
+                                                        cursor: 'pointer',
+                                                        borderColor: 'transparent',
+                                                        margin: 5
+                                                    }}
+                                                    onClick={() => this.setState({ visibleUpload: true })}
+                                                >
+                                                    <img src={Images.upload} />
+                                                </button>
+                                            </a>
+                                            <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
+                                            <a data-tip={'Download'} data-for="download">
+                                                <button
+                                                    style={{
+                                                        backgroundColor: 'transparent',
+                                                        cursor: 'pointer',
+                                                        borderColor: 'transparent',
+                                                        margin: 5
+                                                    }}
+                                                    onClick={() => null}
+                                                >
+                                                    <img src={Images.download} />
+                                                </button>
+                                            </a>
+                                            <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150), height: this.props.height - 400 }}>
-                                <MuiThemeProvider theme={getMuiTheme()}>
-                                    <MUIDataTable
-                                        data={dataTable2}
-                                        columns={columns}
-                                        options={options}
-                                    />
-                                </MuiThemeProvider>
+                                <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150), height: this.props.height - 400 }}>
+                                    {!this.state.loading && <MuiThemeProvider theme={getMuiTheme()}>
+                                        <MUIDataTable
+                                            data={dataTable2}
+                                            columns={columns}
+                                            options={options}
+                                        />
+                                    </MuiThemeProvider>}
+                                </div>
                             </div>
-                        </div>
-                        <div className="grid grid-2x" style={{ marginTop: 20 }}>
-                            <div className="col-1">
-                                <button
-                                    type="button"
-                                    onClick={() => this.backToMasterBudget('draft')}
-                                    style={{
-                                        backgroundColor: 'transparent',
-                                        cursor: 'pointer',
-                                        borderColor: 'transparent',
-                                        outline: 'none'
-                                    }}
-                                >
-                                    <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
-                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
-                                    </div>
-                                </button>
+                            <div className="grid grid-2x" style={{ marginTop: 20 }}>
+                                <div className="col-1">
+                                    <button
+                                        type="button"
+                                        onClick={() => this.backToMasterBudget('draft')}
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                            outline: 'none'
+                                        }}
+                                    >
+                                        <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
+                                        </div>
+                                    </button>
+                                </div>
+                                <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
+                                    <button
+                                        className="button"
+                                        type="button"
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                            outline: 'none',
+                                            marginRight: 20
+                                        }}
+                                        onClick={() => {
+                                            this.props.onClickClose()
+                                        }}
+                                    >
+                                        <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
+                                        </div>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        disabled={this.state.disabledSave}
+                                        onClick={() => this.backToMasterBudget('submitted')}
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: this.state.disabledSave === true ? 'default' : 'pointer',
+                                            borderColor: 'transparent',
+                                            outline: 'none',
+                                            marginRight: 20
+                                        }}
+                                    >
+                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
+                                        </div>
+                                    </button>
+                                    <button
+                                        className="button"
+                                        type="button"
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                            outline: 'none'
+                                        }}
+                                        onClick={() => {
+                                            this.setState({ loading: true }, () => {
+                                                setTimeout(() => {
+                                                    this.setState({ loading: false, disabledSave: false })
+                                                }, 100);
+                                            })
+                                        }}
+                                    >
+                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Calculate</Typography>
+                                        </div>
+                                    </button>
+                                </div>
                             </div>
-                            <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
-                                <button
-                                    className="button"
-                                    type="button"
-                                    style={{
-                                        backgroundColor: 'transparent',
-                                        cursor: 'pointer',
-                                        borderColor: 'transparent',
-                                        outline: 'none'
-                                    }}
-                                    onClick={() => {
-                                        this.props.onClickClose()
-                                    }}
-                                >
-                                    <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
-                                        <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
+                        </Paper>
+                        :
+                        <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
+                            <div>
+                                <div style={{ padding: 25 }}>
+                                    <div>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : {this.props.periode}</Typography>
+                                        <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                                     </div>
-                                </button>
-                                <button
-                                    type="button"
-                                    onClick={() => this.backToMasterBudget('submitted')}
-                                    style={{
-                                        backgroundColor: 'transparent',
-                                        cursor: 'pointer',
-                                        borderColor: 'transparent',
-                                        outline: 'none'
-                                    }}
-                                >
-                                    <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
-                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
-                                    </div>
-                                </button>
-                                <button
-                                    className="button"
-                                    type="button"
-                                    style={{
-                                        backgroundColor: 'transparent',
-                                        cursor: 'pointer',
-                                        borderColor: 'transparent',
-                                        outline: 'none'
-                                    }}
-                                    onClick={() => {
-                                        this.forceUpdate()
-                                    }}
-                                >
-                                    <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
-                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Calculate</Typography>
+                                    {this.state.dataLoaded && (
+                                        <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150), height: this.props.height - 400 }}>
+                                            {!this.state.loading && <MuiThemeProvider theme={getMuiTheme()}>
+                                                <MUIDataTable
+                                                    data={dataTable2}
+                                                    columns={columns}
+                                                    options={options}
+                                                />
+                                            </MuiThemeProvider>}
+                                        </div>
+                                    )}
+                                </div>
+                                <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
+                                    <button
+                                        type="button"
+                                        onClick={() => this.setState({ visibleProfitLoss: true }, () => this.getItemHierarki())}
+                                        style={{ marginRight: 20 }}
+                                    >
+                                        <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960'}}>
+                                            <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
+                                        </div>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        disabled={this.state.buttonError == true ? true : false}
+                                        onClick={() => null}
+                                        style={{ marginRight: 20 }}
+                                    >
+                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
+                                        </div>
+                                    </button>
+                                    <button
+                                        className="button"
+                                        type="button"
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                            outline: 'none'
+                                        }}
+                                        onClick={() => {
+                                            this.setState({ loading: true }, () => {
+                                                setTimeout(() => {
+                                                    this.setState({ loading: false, buttonError: false })
+                                                }, 100);
+                                            })
+                                        }}
+                                    >
+                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
+                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Calculate</Typography>
+                                        </div>
+                                    </button>
+                                </div>
+                            </div>
+                        </Paper>
+                    }
+                </div>
+
+                {this.state.visibleUpload && (
+                    <div className="test app-popup-show">
+                        <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
+                            <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                                <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
+                                    <div className="popup-title">
+                                        <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
                                     </div>
-                                </button>
+                                </div>
+                                <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
+                                    <button
+                                        type="button"
+                                        className="btn btn-circle btn-white"
+                                        onClick={() => this.setState({ visibleUpload: false })}
+                                    >
+                                        <img src={Images.close} />
+                                    </button>
+                                </div>
                             </div>
+                            <UploadFile
+                                type={this.state.uploadStatus}
+                                percentage={this.state.percentage}
+                                result={this.state.result}
+                                acceptedFiles={["xlsx"]}
+                                onHandle={(dt) => {
+                                    this.fileHandler(dt)
+                                    this.setState({ uploadStatus: 'idle', percentage: '0' })
+                                }}
+                                onUpload={() => {
+                                    this.state.judul === "MASTER BUDGET - PROFIT LOSS" ?
+                                        this.checkUpload() :
+                                        this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
+                                }}
+                            />
                         </div>
-                    </Paper>
-                </div>
+                    </div>
+                )}
+
             </div >
         );
     }

src/container/DocumentManagement/AuditTahunan.js

 import React, { Component } from 'react'
 import MUIDataTable from 'mui-datatables'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
-import api from '../../api';
+import {  withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
+import MuiAlert from '@material-ui/lab/Alert';
+import Constant from '../../library/Constant';
 import Images from '../../assets/Images';
 import ReactTooltip from 'react-tooltip';
+import PopUpDelete from "./PopUpDelete";
+import api from '../../api';
 import CreateManagementDoc from './CreateManagementDoc';
 
 
@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptionsManagementDocument();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class AuditTahunan extends Component {
     constructor(props) {
         super(props)
         this.state = {
             dataTable: [],
             visibleCreate: false,
-            refresh: ''
+            refresh: '',
+            alert: false,
+            popupDel: false,
         }
     }
 
@@ -41,26 +50,51 @@ export default class AuditTahunan extends Component {
 
         api.create().getAllDocument(payload).then(response => {
             console.log(response)
-            let dataTable = response.data.data.map((item, index) => {
-                return [
-                    index,
-                    item.document_name,
-                    item.description,
-                    item.company_name,
-                    item.document_periode,
-                    item.document_type,
-                    String(Number(item.document_size) / 1000 + ' KB'),
-                    item.created_by,
-                    item.created_at,
-                ]
-            })
-            this.setState({ dataTable })
-            let docPath = response.data.data.map((item) => {
-                return [
-                    item.document_filepath
-                ]
-            })
-            this.setState({ docPath })
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        let dataTable = response.data.data.map((item, index) => {
+                            return [
+                                index,
+                                item.document_name,
+                                item.description,
+                                item.company_name,
+                                item.document_periode,
+                                item.document_type,
+                                String(Number(item.document_size) / 1000 + ' KB'),
+                                item.created_by,
+                                item.created_at,
+                            ]
+                        })
+                        this.setState({ dataTable })
+                        let docPath = response.data.data.map((item) => {
+                            return [
+                                item.document_filepath
+                            ]
+                        })
+                        this.setState({ docPath })
+                        let docId = response.data.data.map((item) => {
+                            return [
+                                item.document_id
+                            ]
+                        })
+                        this.setState({ docId })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
+            }
         })
     }
 
@@ -80,6 +114,49 @@ export default class AuditTahunan extends Component {
                 a.click();
             }
         }
+        if (type === 'delete') {
+            this.setState({
+                id: this.state.docId[val],
+                rowData: index,
+                popupDel: true
+            })
+        }
+        if (type === 'edit') {
+            alert("edit")
+        }
+    }
+
+    deleteDoc = (payload) => {
+        this.setState({ popupDel: false })
+        api.create().deleteDocument(payload).then(response => {
+            console.log(response.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        this.getData()
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+        })
+    }
+    
+
+    closeAlert() {
+        this.setState({ alert: false })
     }
 
     render() {
@@ -109,15 +186,53 @@ export default class AuditTahunan extends Component {
                                 </a>
                                 <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                             {/* </span>} */}
+                            {this.props.btnedit && <span>
+                            <a data-tip={'Edit'} data-for="edit">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                        marginRight: 15
+                                    }}
+                                    // onClick={() => console.log(tableMeta)}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
+                                    >
+                                        <img src={Images.editCopy} />
+                                    </button>
+                                </a>
+                                <ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
+                            </span>}
+                            {this.props.btndelete && <span>
+                                <a data-tip={'Delete'} data-for="delete">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                    }}
+                                    // onClick={() => console.log(tableMeta)}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
+                                    >
+                                        <img src={Images.delete} />
+                                    </button>
+                                </a>
+                                <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
+                            </span>}
                         </div >
                     );
                 }
             }
-        }, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
         ]
         return (
             <div style={{ width: '100%' }}>
                 <div style={{ padding: 25 }}>
+                    <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                        <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                            {this.state.messageAlert}
+                        </Alert>
+                    </Snackbar>
                     <MuiThemeProvider theme={getMuiTheme()}>
                         <MUIDataTable
                             theme={getMuiTheme()}
@@ -127,6 +242,16 @@ export default class AuditTahunan extends Component {
                         />
                     </MuiThemeProvider>
                 </div>
+                {this.state.popupDel && (
+                    <PopUpDelete
+                        type={"delete"}
+                        onClickClose={() => this.setState({ popupDel: false })}
+                        data={this.state.rowData}
+                        idoc={this.state.id}
+                        // getList={() => this.getData.bind(this)}
+                        deleteDoc={this.deleteDoc.bind(this)}
+                    />
+                )}
             </div>
         )
     }

src/container/DocumentManagement/BOD.js

 import React, { Component } from 'react'
 import MUIDataTable from 'mui-datatables'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import {  withStyles } from '@material-ui/core/styles';
+import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
+import MuiAlert from '@material-ui/lab/Alert';
+import Constant from '../../library/Constant';
 import api from '../../api';
 import Images from '../../assets/Images';
 import ReactTooltip from 'react-tooltip';
+import PopUpDelete from "./PopUpDelete";
 import CreateManagementDoc from './CreateManagementDoc';
 
 
@@ -11,13 +15,18 @@ var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptionsManagementDocument();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class BOD extends Component {
     constructor(props) {
         super(props)
         this.state = {
             dataTable: [],
             visibleCreate: false,
-            refresh: ''
+            refresh: '',
+            alert: false,
+            popupDel: false,
         }
     }
 
@@ -67,8 +76,27 @@ export default class BOD extends Component {
                             ]
                         })
                         this.setState({ docPath })
+                        let docId = response.data.data.map((item) => {
+                            return [
+                                item.document_id
+                            ]
+                        })
+                        this.setState({ docId })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
                     }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -89,6 +117,48 @@ export default class BOD extends Component {
                 a.click();
             }
         }
+        if (type === 'delete') {
+            this.setState({
+                id: this.state.docId[val],
+                rowData: index,
+                popupDel: true
+            })
+        }
+        if (type === 'edit') {
+            alert("edit")
+        }
+    }
+
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
+    deleteDoc = (payload) => {
+        this.setState({ popupDel: false })
+        api.create().deleteDocument(payload).then(response => {
+            console.log(response.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        this.getData()
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+        })
     }
 
     render() {
@@ -119,15 +189,53 @@ export default class BOD extends Component {
                                     </a>
                                     <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                                 {/* </span>} */}
+                                {this.props.btnedit && <span>
+                                    <a data-tip={'Edit'} data-for="edit">
+                                    <button
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                            marginRight: 15
+                                        }}
+                                        // onClick={() => console.log(tableMeta)}
+                                        onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
+                                        >
+                                            <img src={Images.editCopy} />
+                                        </button>
+                                    </a>
+                                    <ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
+                                </span>}
+                                {this.props.btndelete && <span>
+                                    <a data-tip={'Delete'} data-for="delete">
+                                    <button
+                                        style={{
+                                            backgroundColor: 'transparent',
+                                            cursor: 'pointer',
+                                            borderColor: 'transparent',
+                                        }}
+                                        // onClick={() => console.log(tableMeta)}
+                                        onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
+                                        >
+                                            <img src={Images.delete} />
+                                        </button>
+                                    </a>
+                                    <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
+                                </span>}
                             </div >
                         );
                     }
                 }
-            }, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+            }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
         ]
         return (
             <div style={{ width: '100%' }}>
                 <div style={{ padding: 25 }}>
+                    <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                        <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                            {this.state.messageAlert}
+                        </Alert>
+                    </Snackbar>
                     <MuiThemeProvider theme={getMuiTheme()}>
                         <MUIDataTable
                             theme={getMuiTheme()}
@@ -137,6 +245,16 @@ export default class BOD extends Component {
                         />
                     </MuiThemeProvider>
                 </div>
+                {this.state.popupDel && (
+                    <PopUpDelete
+                        type={"delete"}
+                        onClickClose={() => this.setState({ popupDel: false })}
+                        data={this.state.rowData}
+                        idoc={this.state.id}
+                        // getList={() => this.getData.bind(this)}
+                        deleteDoc={this.deleteDoc.bind(this)}
+                    />
+                )}
             </div>
         )
     }

src/container/DocumentManagement/CreateManagementDoc.js

 import React, { Component } from 'react'
 import Images from '../../assets/Images'
 import { TextField, withStyles, Snackbar } from '@material-ui/core'
+import MuiAlert from '@material-ui/lab/Alert';
 import api from '../../api'
 import Autocomplete from '@material-ui/lab/Autocomplete'
 import Constant from '../../library/Constant'
@@ -9,6 +10,9 @@ import UploadFile from "../../library/Upload";
 import { ExcelRenderer } from 'react-excel-renderer';
 import * as R from 'ramda'
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class CreateManagementDoc extends Component {
     constructor(props) {
         super(props)
@@ -45,7 +49,7 @@ export default class CreateManagementDoc extends Component {
     }
 
     getDataCompany() {
-        api.create().getPerusahaanActive().then((response) => {
+        api.create().getPerusahaanUserActive().then((response) => {
             if (response.data) {
                 if (response.data.status == 'success') {
                     let data = response.data.data
@@ -55,10 +59,10 @@ export default class CreateManagementDoc extends Component {
                             company_name: item.company_name
                         }
                     })
-                    typeData.push({
-                        company_id: 0,
-                        company_name: 'Default'
-                    })
+                    // typeData.push({
+                    //     company_id: 0,
+                    //     company_name: 'Default'
+                    // })
                     let typeProps = {
                         options: typeData.sort((a, b) => a.company_id - b.company_id),
                         getOptionLabel: (option) => option.company_name,
@@ -173,6 +177,7 @@ export default class CreateManagementDoc extends Component {
             this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
         } else if (R.isNil(this.state.file)) {
             this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
+            // this.setState({ errorDocument: true, msgErrorDocument: 'File Cannot be Empty' })
         } else {
             const formData = new FormData();
             formData.append("file", this.state.file);
@@ -191,6 +196,10 @@ export default class CreateManagementDoc extends Component {
         this.setState({ file: null})
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         return (
             <div>
@@ -218,9 +227,10 @@ export default class CreateManagementDoc extends Component {
                             <div style={{ padding: 10, borderRadius: 5 }}>
                                 <Autocomplete
                                     {...this.state.perusahaan}
-                                    debug
+                                    // debug
+                                    clearOnEscape
                                     id="tipe"
-                                    onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
+                                    onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage(), console.log(this.state.getPerusahaan))}
                                     renderInput={(params) =>
                                         <TextField {...params}
                                             error={this.state.errorPerusahaan}
@@ -235,15 +245,15 @@ export default class CreateManagementDoc extends Component {
                             <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                 <Autocomplete
                                     {...this.state.listPeriode}
+                                    // debug
+                                    clearOnEscape
                                     id="periode"
                                     onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
                                         this.clearMessage()
                                     })}
-                                    debug
-                                    disableClearable
                                     style={{ width: 250 }}
                                     renderInput={(params) =>
-                                        <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }}
+                                        <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
                                             InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                             InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                         />}
@@ -255,7 +265,8 @@ export default class CreateManagementDoc extends Component {
                             <div style={{ padding: 10, borderRadius: 5 }}>
                                 <Autocomplete
                                     {...this.state.document}
-                                    debug
+                                    // debug
+                                    clearOnEscape
                                     id="tipe"
                                     onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())}
                                     renderInput={(params) =>
@@ -341,6 +352,11 @@ export default class CreateManagementDoc extends Component {
                         </div>
                     </div>
                 </div>
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
             </div>
             </div>
         )

src/container/DocumentManagement/DocumentManagement.js

@@ -22,10 +22,39 @@ export default class DocumentManagement extends Component {
         this.state = {
             tab: 0,
             listData: [],
-            id: 0
+            id: 0,
+            btncreate: false,
+            btnedit: false,
+            btndelete: false,
+            load: false,
         }
     }
 
+    getPermission() {
+        let payload = {
+            menu: "document management"
+        }
+        api.create().getPermission(payload).then(response => {
+            console.log(response)
+            if (response.data) {
+                if (response.data.status === "success") {
+                    this.setState({
+                        btncreate: response.data.data.create,
+                        btnedit: response.data.data.edit,
+                        btndelete: response.data.data.delete,
+                        load: true
+                    })
+                } else {
+                    this.setState({
+                        load: true
+                    })
+                }
+            } else {
+                this.setState({ load: true })
+            }
+        })
+    }
+
     selectTab = (event, newEvent) => {
         this.setState({ tab: newEvent })
         console.log(this.state.tab)
@@ -33,6 +62,7 @@ export default class DocumentManagement extends Component {
 
     componentDidMount() {
         this.getDataDocument()
+        this.getPermission()
     }
 
     getDataDocument(id) {
@@ -188,31 +218,43 @@ export default class DocumentManagement extends Component {
                                     <AuditTahunan
                                         data={this.state.listData[this.state.tab]}
                                         refresh={this.state.refresh}
+                                        btnedit={this.state.btnedit}
+                                        btndelete={this.state.btndelete}
+                                        load={this.state.load}
                                     />
                                     :
                                     this.state.id === 68541 ?
                                         <ManualBookTia
                                             data={this.state.listData[this.state.tab]}
                                             refresh={this.state.refresh}
+                                            btnedit={this.state.btnedit}
+                                            btndelete={this.state.btndelete}
+                                            load={this.state.load}
                                         />
                                         :
                                         this.state.id === 68544 ?
                                             <QReview
                                                 data={this.state.listData[this.state.tab]}
                                                 refresh={this.state.refresh}
+                                                btnedit={this.state.btnedit}
+                                                btndelete={this.state.btndelete}
+                                                load={this.state.load}
                                             />
                                             :
                                             this.state.id === 68543 ?
                                                 <BOD
                                                     data={this.state.listData[this.state.tab]}
                                                     refresh={this.state.refresh}
+                                                    btnedit={this.state.btnedit}
+                                                    btndelete={this.state.btndelete}
+                                                    load={this.state.load}
                                                 />
-                                                :
-                                                this.state.id === 68545 ?
-                                                    <ManualBookETMS
-                                                        data={this.state.listData[this.state.tab]}
-                                                        refresh={this.state.refresh}
-                                                    />
+                                                // :
+                                                // this.state.id === 68545 ?
+                                                //     <ManualBookETMS
+                                                //         data={this.state.listData[this.state.tab]}
+                                                //         refresh={this.state.refresh}
+                                                //     />
                                                     :
                                                     <span>Coming Soon</span>
 
@@ -233,6 +275,7 @@ export default class DocumentManagement extends Component {
                         // getDataDocument={this.getDataDocument.bind(this)}
                         createDocument={this.createDocument.bind(this)}
                         setting_id={this.state.id}
+                        btncreate={this.state.btncreate}
                     />
                 )}
             </div>

src/container/DocumentManagement/EditManagementDoc.js

+import React, { Component } from 'react'
+import Images from '../../assets/Images'
+import { TextField, withStyles, Snackbar } from '@material-ui/core'
+import MuiAlert from '@material-ui/lab/Alert';
+import api from '../../api'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import Constant from '../../library/Constant'
+import { format } from 'date-fns';
+import UploadFile from "../../library/Upload";
+import { ExcelRenderer } from 'react-excel-renderer';
+import * as R from 'ramda'
+
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
+export default class EditManagementDoc extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            perusahaan: null,
+            perusahaanData: null,
+            getPerusahaan: null,
+            errorPerusahaan: false,
+            msgErrorPerusahaan: '',
+            document: null,
+            documentData: null,
+            getDocument: null,
+            errorDocument: false,
+            msgErrorDocument: '',
+            listPeriode: null,
+            periode: null,
+            description: '',
+            errorDesc: false,
+            msgErrorDesc: '',
+            file: null,
+            alert: false,
+            tipeAlert: '',
+            messageAlert: '',
+            fileType: '',
+            konfirmasi: false,
+            docId:''
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.type === 'edit') {
+            this.getDetailDoc()
+            this.getDataCompany()
+            this.getDataDocument()
+            this.getPeriode()
+        }
+    }
+
+    getDetailDoc(){
+        api.create().getDetailDocument(this.props.idoc).then(response => {
+            console.log(response)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === "success") {
+                        let data = response.data.data
+                        this.setState({
+                            companyId: data.company_id,
+                            companyName: data.company_name,
+                            categoryId: data.setting_id,
+                            categoryName: data.values,
+                            period: data.document_periode,
+                            description: data.description
+                            // id: data.approval_matrix_id,
+                            // status: data.status,
+                            // created: data.created,
+                            // updated: data.updated === null ? "" : data.updated 
+                        }, () => this.getDataCompany(), this.getDataDocument(), this.getPeriode())
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+        })
+    }
+
+    getDataCompany() {
+        api.create().getPerusahaanUserActive().then((response) => {
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    let data = response.data.data
+                    let typeData = data.map((item) => {
+                        return {
+                            company_id: item.company_id,
+                            company_name: item.company_name
+                        }
+                    })
+                    // typeData.push({
+                    //     company_id: 0,
+                    //     company_name: 'Default'
+                    // })
+                    let index = typeData.findIndex((val) => val.company_id == this.state.companyId)
+                    let typeProps = {
+                        options: typeData.sort((a, b) => a.company_id - b.company_id),
+                        getOptionLabel: (option) => option.company_name,
+                    };
+                    this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index == -1 ? typeData[0]: typeData[index] })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        if (response.data.message.includes("Someone Logged In")) {
+                            setTimeout(() => {
+                                localStorage.removeItem(Constant.TOKEN)
+                                window.location.reload();
+                            }, 1000);
+                        }
+                    })
+                }
+            } else {
+                alert(response.problem)
+            }
+        })
+    }
+
+    getDataDocument() {
+        let payload = {
+            "setting_group_id": 7,
+            "setting_type_id": 167,
+            "company_id": 0
+
+        }
+        api.create().getDocumentCategory(payload).then(response => {
+            console.log(response);
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    let data = response.data.data
+                    let typeData = data.map((item) => {
+                        return {
+                            document_category_id: item.setting_id,
+                            document_category_name: item.value
+                        }
+                    })
+                    let typeProps = {
+                        options: typeData.sort((a, b) => a.document_category_id - b.document_category_id),
+                        getOptionLabel: (option) => option.document_category_name,
+                    };
+                    this.setState({ document: typeProps, documentData: response.data.data })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        if (response.data.message.includes("Someone Logged In")) {
+                            setTimeout(() => {
+                                localStorage.removeItem(Constant.TOKEN)
+                                window.location.reload();
+                            }, 1000);
+                        }
+                    })
+                }
+            } else {
+                alert(response.problem)
+            }
+        })
+    }
+
+    getPeriode() {
+        api.create().getPeriodeTransaction().then(response => {
+            let dateNow = new Date
+            let year = format(dateNow, 'yyyy')
+            if (response.data) {
+                if (response.data.status === "success") {
+                    let data = response.data.data
+                    let periodeData = data.map((item) => {
+                        return {
+                            periode: item,
+                        }
+                    })
+                    let defaultProps = {
+                        options: periodeData,
+                        getOptionLabel: (option) => option.periode,
+                    };
+                    let index = data.sort((a, b) => a - b).findIndex((val) => val == this.state.period)
+                    this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] })
+                }
+            }
+        })
+    }
+
+    clearMessage() {
+        this.setState({
+            errorPerusahaan: false,
+            msgErrorPerusahaan: '',
+            errorDocument: false,
+            msgErrorDocument: '',
+        })
+    }
+
+    fileHandler = (event) => {
+        let fileObj = event
+        let length = event.name.split(".").length
+        let fileType = event.name.split(".")[length - 1]
+        ExcelRenderer(fileObj, (err, resp) => {
+            console.log(fileType)
+            if (err) {
+                console.log(err);
+            }
+            else {
+                this.setState({ file: event, fileType: String(fileType) })
+            }
+        })
+    }
+
+    validasi() {
+        if (R.isNil(this.state.getPerusahaan)) {
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
+        } else if (R.isNil(this.state.getDocument)) {
+            this.setState({ errorDocument: true, msgErrorDocument: 'Category Cannot be Empty' })
+        } else if (R.isNil(this.state.file)) {
+            this.setState({ alert: true, messageAlert: 'File Cannot be Empty', tipeAlert: 'warning' })
+            // this.setState({ errorDocument: true, msgErrorDocument: 'File Cannot be Empty' })
+        } else {
+            const formData = new FormData();
+            formData.append("file", this.state.file);
+            formData.append("companyId", this.state.getPerusahaan.company_id);
+            formData.append("settingId", this.state.getDocument.document_category_id);
+            formData.append("documentPeriode", this.state.periode.periode);
+            formData.append("description", this.state.description);
+            formData.append("extension", this.state.fileType);
+            this.setState({ formData }, ()=> {
+                this.props.createDocument(this.state.formData, this.props.setting_id)
+            })
+        }
+    }
+
+    deleteFile(e){
+        this.setState({ file: null})
+    }
+
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
+    render() {
+        return (
+            <div>
+            <div className="test app-popup-show">
+                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
+                    <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                        <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
+                            <div className="popup-title">
+                                <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit</span>
+                            </div>
+                        </div>
+                        <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
+                            <button
+                                type="button"
+                                className="btn btn-circle btn-white"
+                                onClick={() => this.props.onClickClose()}
+                            >
+                                <img src={Images.close} />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 20 }}>
+                        <div className="column-1">
+                            <div style={{ padding: 10, borderRadius: 5 }}>
+                                <Autocomplete
+                                    {...this.state.perusahaan}
+                                    debug
+                                    // clearOnEscape
+                                    id="tipe"
+                                    onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
+                                    renderInput={(params) =>
+                                        <TextField {...params}
+                                            error={this.state.errorPerusahaan}
+                                            helperText={this.state.msgErrorPerusahaan}
+                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
+                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
+                                            label="Company Name" />}
+                                    value={this.state.getPerusahaan}
+                                />
+                            </div>
+
+                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
+                                <Autocomplete
+                                    {...this.state.listPeriode}
+                                    // debug
+                                    clearOnEscape
+                                    id="periode"
+                                    onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
+                                        this.clearMessage()
+                                    })}
+                                    style={{ width: 250 }}
+                                    renderInput={(params) =>
+                                        <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }}
+                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
+                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
+                                        />}
+                                    value={this.state.periode}
+                                />
+                            </div>
+                        </div>
+                        <div className="column-2">
+                            <div style={{ padding: 10, borderRadius: 5 }}>
+                                <Autocomplete
+                                    {...this.state.document}
+                                    // debug
+                                    clearOnEscape
+                                    id="tipe"
+                                    onChange={(event, newInputValue) => this.setState({ getDocument: newInputValue }, () => this.clearMessage())}
+                                    renderInput={(params) =>
+                                        <TextField {...params}
+                                            error={this.state.errorDocument}
+                                            helperText={this.state.msgErrorDocument}
+                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
+                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
+                                            label="Category" />}
+                                    value={this.state.getDocument}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{ paddingLeft: 30, paddingRight: 30 }}>
+                        <UploadFile
+                            type={this.state.uploadStatus}
+                            percentage={this.state.percentage}
+                            result={this.state.result}
+                            acceptedFiles={["xls", "xlsx", "pdf", "PDF"]}
+                            intent={"management"}
+                            onHandle={(dt) => {
+                                this.fileHandler(dt)
+                                this.setState({ uploadStatus: 'idle', percentage: '0' })
+                            }}
+                            onDelete={(e) => {
+                                this.deleteFile(e)
+                            }}
+                            onUpload={() => alert('sukses')}
+                        />
+                    </div>
+                    <div className="margin-top-10px" style={{ paddingLeft: 30, paddingRight: 30, borderRadius: 5, paddingBottom: 20 }}>
+                        <TextField
+                            style={{ width: '100%' }}
+                            id="description"
+                            label="Description"
+                            value={this.state.description}
+                            inputProps={{
+                                min: 0,
+                                style: {
+                                    fontSize: 11
+                                }
+                            }}
+
+                            InputLabelProps={{
+                                style: {
+                                    fontSize: 11,
+                                    color: '#7e8085'
+                                }
+                            }}
+                            name="Description"
+                            onChange={(e) => {
+                                this.setState({
+                                    description: e.target.value
+                                })
+                                this.clearMessage()
+                            }}
+                            error={this.state.errorDesc}
+                            helperText={this.state.msgErrorDesc}
+                        >
+                        </TextField>
+                    </div>
+                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
+                        <div className="column-1" style={{ alignSelf: 'center' }}>
+                            <button
+                                type="button"
+                                onClick={() => this.props.onClickClose()}
+                            >
+                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
+                                </div>
+                            </button>
+                        </div>
+                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                            <button
+                                type="button"
+                                onClick={() => this.validasi()}
+                            >
+                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
+            </div>
+            </div>
+        )
+    }
+}

src/container/DocumentManagement/ManualBookTia.js

 import React, { Component } from 'react'
+import ReactTooltip from 'react-tooltip';
+import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
+import {  withStyles } from '@material-ui/core/styles';
+import MuiAlert from '@material-ui/lab/Alert';
 import MUIDataTable from 'mui-datatables'
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
-import api from '../../api';
+import Constant from '../../library/Constant';
 import Images from '../../assets/Images';
-import ReactTooltip from 'react-tooltip';
+import EditManagementDoc from "./EditManagementDoc";
+import PopUpDelete from "./PopUpDelete";
+import api from '../../api';
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class ManualBookTia extends Component {
     constructor(props) {
         super(props)
         this.state = {
             dataTable: [],
             visibleCreate: false,
+            visibleEdit: false,
             refresh: '',
             alert: false,
+            popupDel: false,
         }
     }
 
@@ -40,32 +50,60 @@ export default class ManualBookTia extends Component {
 
         api.create().getAllDocument(payload).then(response => {
             console.log(response)
-            let dataTable = response.data.data.map((item, index) => {
-                return [
-                    index,
-                    item.document_name,
-                    item.description,
-                    item.company_name,
-                    item.document_periode,
-                    item.document_type,
-                    String(Number(item.document_size) / 1000 + ' KB'),
-                    item.created_by,
-                    item.created_at,
-                ]
-            })
-            this.setState({ dataTable })
-            let docPath = response.data.data.map((item) => {
-                return [
-                    item.document_filepath
-                ]
-            })
-            this.setState({ docPath })
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        let dataTable = response.data.data.map((item, index) => {
+                            return [
+                                index,
+                                item.document_name,
+                                item.description,
+                                item.company_name,
+                                item.document_periode,
+                                item.document_type,
+                                String(Number(item.document_size) / 1000 + ' KB'),
+                                item.created_by,
+                                item.created_at,
+                            ]
+                        })
+                        this.setState({ dataTable })
+                        let docPath = response.data.data.map((item) => {
+                            return [
+                                item.document_filepath
+                            ]
+                        })
+                        this.setState({ docPath })
+                        let docId = response.data.data.map((item) => {
+                            return [
+                                item.document_id
+                            ]
+                        })
+                        this.setState({ docId })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
+            }
         })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     openPopUp = async (index, val, type) =>{
         if (type === 'download') {
-            console.log(this.state.docPath[val])
             let res = await fetch(
                 "https://tia.eksad.com/tia-reporting-dev/public/document/download_document?documentName="+this.state.docPath[val]+"&&fileType="+index[5]
             )
@@ -79,6 +117,48 @@ export default class ManualBookTia extends Component {
                 a.click();
             }
         }
+        if (type === 'delete') {
+            this.setState({
+                id: this.state.docId[val],
+                rowData: index,
+                popupDel: true
+            })
+        }
+        if (type === 'edit') {
+            this.setState({
+                id: this.state.docId[val],
+                rowData: index,
+                visibleEdit: true
+            })
+        }
+    }
+
+    deleteDoc = (payload) => {
+        this.setState({ popupDel: false })
+        api.create().deleteDocument(payload).then(response => {
+            console.log(response.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        this.getData()
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+        })
     }
 
     render() {
@@ -88,7 +168,7 @@ export default class ManualBookTia extends Component {
                 filter: false,
                 sort: false,
                 customBodyRender: (val, tableMeta) => {
-                    console.log(tableMeta)
+                    // console.log(tableMeta)
                     return (
                         <div style={{ display: 'flex' }}>
                             {/* {this.state.btnedit && <span> */}
@@ -108,15 +188,53 @@ export default class ManualBookTia extends Component {
                                 </a>
                                 <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                             {/* </span>} */}
+                            {this.props.btnedit && <span>
+                                <a data-tip={'Edit'} data-for="edit">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                        marginRight: 15
+                                    }}
+                                    // onClick={() => console.log(tableMeta)}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
+                                    >
+                                        <img src={Images.editCopy} />
+                                    </button>
+                                </a>
+                                <ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
+                            </span>}
+                            {this.props.btndelete && <span>
+                                <a data-tip={'Delete'} data-for="delete">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                    }}
+                                    // onClick={() => console.log(tableMeta)}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
+                                    >
+                                        <img src={Images.delete} />
+                                    </button>
+                                </a>
+                                <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
+                            </span>}
                         </div >
                     );
                 }
             }
-        }, "Nama File", "Keterangan", "Perusahaan", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        }, "File Name", "Description", "Company Name", "Type", "File Size", "Created By", "Created Date"
         ]
         return (
             <div style={{ width: '100%' }}>
                 <div style={{ padding: 25 }}>
+                    <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                        <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                            {this.state.messageAlert}
+                        </Alert>
+                    </Snackbar>
                     <MuiThemeProvider theme={getMuiTheme()}>
                         <MUIDataTable
                             theme={getMuiTheme()}
@@ -126,6 +244,25 @@ export default class ManualBookTia extends Component {
                         />
                     </MuiThemeProvider>
                 </div>
+                {this.state.popupDel && (
+                    <PopUpDelete
+                        type={"delete"}
+                        onClickClose={() => this.setState({ popupDel: false })}
+                        data={this.state.rowData}
+                        idoc={this.state.id}
+                        // getList={() => this.getData.bind(this)}
+                        deleteDoc={this.deleteDoc.bind(this)}
+                    />
+                )}
+                {this.state.visibleEdit && (
+                    <EditManagementDoc
+                        type={"edit"}
+                        onClickClose={() => this.setState({ visibleEdit: false })}
+                        data={this.state.rowData}
+                        idoc={this.state.id}
+                        // updateAM={this.updateAM.bind(this)}
+                    />
+                )}
             </div>
         )
     }

src/container/DocumentManagement/PopUpDelete.js

+import React, { Component } from 'react';
+import Images from '../../assets/Images';
+import { Typography } from '@material-ui/core';
+import api from "../../api";
+import Constant from '../../library/Constant';
+
+export default class PopUpDelete extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            id: '',
+            getApprovedBy: null,
+            getTypes: null,
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.type === 'delete') {
+            console.log(this.props.idoc)
+            console.log(this.props.data)
+        }
+    }
+
+    onClickDelete() {
+        if (this.props.type == 'delete') {
+            let payload = this.props.idoc
+            this.props.deleteDoc(payload)
+        }
+    }
+    
+    render() {
+        return (
+            <div className="test app-popup-show">
+                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 20 }}>
+                        <img src={Images.failed} />
+                    </div>
+                    <div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
+                        <span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', fontFamily: 'Nunito Sans, sans-serif' }}>
+                            Delete {this.props.data[1]} ?
+                        </span>
+                    </div>
+                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
+                        <div className="column-1" style={{ alignSelf: 'center' }}>
+                            <button
+                                type="button"
+                                onClick={() => this.props.onClickClose()}
+                            >
+                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
+                                </div>
+                            </button>
+                        </div>
+                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                            <button
+                                type="button"
+                                onClick={()=> this.onClickDelete()}
+                            >
+                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                    <span style={{ color: '#fff', fontSize: 11 }}>Delete</span>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/container/DocumentManagement/QReview.js

@@ -2,11 +2,12 @@ import React, { Component } from 'react'
 import MUIDataTable from 'mui-datatables'
 import {  withStyles } from '@material-ui/core/styles';
 import { createMuiTheme, MuiThemeProvider, Snackbar } from '@material-ui/core';
-import api from '../../api';
 import MuiAlert from '@material-ui/lab/Alert';
 import Constant from '../../library/Constant';
 import Images from '../../assets/Images';
 import ReactTooltip from 'react-tooltip';
+import api from '../../api';
+import PopUpDelete from "./PopUpDelete";
 import CreateManagementDoc from './CreateManagementDoc';
 
 
@@ -25,6 +26,7 @@ export default class QReview extends Component {
             visibleCreate: false,
             refresh: '',
             alert: false,
+            popupDel: false,
         }
     }
 
@@ -71,6 +73,12 @@ export default class QReview extends Component {
                             ]
                         })
                         this.setState({ docPath })
+                        let docId = response.data.data.map((item) => {
+                            return [
+                                item.document_id
+                            ]
+                        })
+                        this.setState({ docId })
                     } else {
                         this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
@@ -105,12 +113,50 @@ export default class QReview extends Component {
                 a.click();
             }
         }
+        if (type === 'delete') {
+            this.setState({
+                id: this.state.docId[val],
+                rowData: index,
+                popupDel: true
+            })
+        }
+        if (type === 'edit') {
+            alert("edit")
+        }
     }
 
     closeAlert() {
         this.setState({ alert: false })
     }
 
+    deleteDoc = (payload) => {
+        this.setState({ popupDel: false })
+        api.create().deleteDocument(payload).then(response => {
+            console.log(response.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status == 'success') {
+                        this.getData()
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                            if (response.data.message.includes("Someone Logged In")) {
+                                setTimeout(() => {
+                                    localStorage.removeItem(Constant.TOKEN)
+                                    window.location.reload();
+                                }, 1000);
+                            }
+                        })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+        })
+    }
+
     render() {
         let columns = [{
             name: "Action",
@@ -120,8 +166,23 @@ export default class QReview extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            {/* {this.state.btnedit && <span> */}
-                                <a data-tip={'Download'} data-for="download">
+                            <a data-tip={'Download'} data-for="download">
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    cursor: 'pointer',
+                                    borderColor: 'transparent',
+                                    marginRight: 15
+                                }}
+                                // onClick={() => console.log(tableMeta)}
+                                onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')}
+                                >
+                                    <img src={Images.download} />
+                                </button>
+                            </a>
+                            <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
+                            {this.props.btnedit && <span>
+                            <a data-tip={'Edit'} data-for="edit">
                                 <button
                                     style={{
                                         backgroundColor: 'transparent',
@@ -130,18 +191,34 @@ export default class QReview extends Component {
                                         marginRight: 15
                                     }}
                                     // onClick={() => console.log(tableMeta)}
-                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'download')}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'edit')}
+                                    >
+                                        <img src={Images.editCopy} />
+                                    </button>
+                                </a>
+                                <ReactTooltip border={true} id="edit" place="bottom" type="light" effect="solid" />
+                            </span>}
+                            {this.props.btndelete && <span>
+                                <a data-tip={'Delete'} data-for="delete">
+                                <button
+                                    style={{
+                                        backgroundColor: 'transparent',
+                                        cursor: 'pointer',
+                                        borderColor: 'transparent',
+                                    }}
+                                    // onClick={() => console.log(tableMeta)}
+                                    onClick={() => this.openPopUp(tableMeta.rowData, val, 'delete')}
                                     >
-                                        <img src={Images.download} />
+                                        <img src={Images.delete} />
                                     </button>
                                 </a>
-                                <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
-                            {/* </span>} */}
+                                <ReactTooltip border={true} id="delete" place="bottom" type="light" effect="solid" />
+                            </span>}
                         </div >
                     );
                 }
             }
-        }, "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        }, "File Name", "Description", "Company Name", "Period", "Type", "File Size", "Created By", "Created Date"
         ]
         return (
             <div style={{ width: '100%' }}>
@@ -160,6 +237,16 @@ export default class QReview extends Component {
                         />
                     </MuiThemeProvider>
                 </div>
+                {this.state.popupDel && (
+                    <PopUpDelete
+                        type={"delete"}
+                        onClickClose={() => this.setState({ popupDel: false })}
+                        data={this.state.rowData}
+                        idoc={this.state.id}
+                        // getList={() => this.getData.bind(this)}
+                        deleteDoc={this.deleteDoc.bind(this)}
+                    />
+                )}
             </div>
         )
     }

src/container/MasterData/Parameter/Parameter.js

@@ -301,7 +301,7 @@ export default class Parameter extends Component {
                     setting: payload
                 }
                 console.log(resp.rows[1]);
-                this.setState({ payload: body, buttonError: false, judul: resp.rows[1][0] })
+                this.setState({ payload: body, buttonError: false, judul: resp.rows[1] === undefined ? "" : resp.rows[1][0] })
             }
         });
     }