fix header BS MR

src/api/index.js

@@ -249,6 +249,10 @@ const create = (type = "") => {
   const approvalSubmissionOLPA = (body) => api.post('transaction/outlook_pa/approval_submission', body)
   const checkApproverOLPA = () => api.get('transaction/outlook_pa/is_approver')
 
+  // Monthly
+  const getMonthlyReportID = (body) => api.post('transaction/monthly_report_bs/get_monthly_report_id', body)
+  const getHierarkiMontlyReport = (body) => api.post('transaction/monthly_report_bs/get_report_hierarki', body)
+
   //Template
   const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
 
@@ -431,7 +435,9 @@ const create = (type = "") => {
     getLastPeriodOI,
     getDashboardUser,
     getDetailReportCF,
-    getReportHierarkiPL
+    getReportHierarkiPL,
+    getMonthlyReportID,
+    getHierarkiMontlyReport
   }
 }
 

src/container/MonthlyReport.js

@@ -14,6 +14,7 @@ import BalanceSheetMR from './MonthlyReport/BalanceSheetMR';
 import ProfitLossMR from './MonthlyReport/ProfitLossMR';
 import TaxPlanningMR from './MonthlyReport/TaxPlanningMR';
 import FixedAssetsMovementMR from './MonthlyReport/FixedAssetsMovementMR';
+import ListOfCreditFacilities from './MonthlyReport/ListOfCreditFacilities'
 
 export default class MonthlyReport extends Component {
     constructor(props) {
@@ -135,6 +136,10 @@ export default class MonthlyReport extends Component {
         })
     }
 
+    onClickClose(){
+      this.setState({})
+    }
+
     getRevision() {
         let payload = {
             "company_id": this.state.company.company_id,
@@ -155,6 +160,25 @@ export default class MonthlyReport extends Component {
                         getOptionLabel: (option) => option.revision,
                     };
                     this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
+                        this.getMonthlyReportID()
+                    })
+                }
+            }
+        })
+    }
+
+    getMonthlyReportID(){
+      let payload = {
+          "company_id": this.state.company.company_id,
+          "periode": this.state.periode.periode,
+      }
+      api.create().getMonthlyReportID(payload).then(response => {
+        console.log(response);
+          if (response.data) {
+              if (response.data.status === 'success') {
+                  this.setState({
+                      monthlyReportId: response.data.data.monthly_report_id
+                  }, ()=> {
                     this.getReport()
                     this.getReportAttachment()
                   })
@@ -178,6 +202,7 @@ export default class MonthlyReport extends Component {
                     visibleCAT: false,
                     visibleFAM: false,
                     visibleTP: false,
+                    visibleLOCF: false,
                 })
             } else if (item === 'Profit Loss') {
                 this.setState({
@@ -186,7 +211,8 @@ export default class MonthlyReport extends Component {
                     visiblePL: true,
                     visibleCAT: false,
                     visibleFAM: false,
-                    visibleTP: false
+                    visibleTP: false,
+                    visibleLOCF: false,
                 })
             } else if (item === 'Tax Planning') {
                 this.setState({
@@ -195,7 +221,8 @@ export default class MonthlyReport extends Component {
                     visiblePL: false,
                     visibleCAT: false,
                     visibleFAM: false,
-                    visibleTP: true
+                    visibleTP: true,
+                    visibleLOCF: false,
                 })
             } else if (item === 'Fixed Assets Movement') {
                 this.setState({
@@ -204,7 +231,8 @@ export default class MonthlyReport extends Component {
                     visiblePL: false,
                     visibleCAT: false,
                     visibleFAM: true,
-                    visibleTP: false
+                    visibleTP: false,
+                    visibleLOCF: false,
                 })
             } else if (item === 'CAT') {
                 this.setState({
@@ -213,7 +241,18 @@ export default class MonthlyReport extends Component {
                     visiblePL: false,
                     visibleCAT: true,
                     visibleFAM: false,
-                    visibleTP: false
+                    visibleTP: false,
+                    visibleLOCF: false,
+                })
+            } else if (item === 'List of Credit Facilities') {
+              this.setState({
+                  visibleMonthlyReport: false,
+                  visibleBS: false,
+                  visiblePL: false,
+                  visibleCAT: false,
+                  visibleFAM: false,
+                  visibleTP: false,
+                  visibleLOCF: true,
               })
             }
         })
@@ -380,8 +419,7 @@ export default class MonthlyReport extends Component {
                                             {...this.state.listPeriode}
                                             id="periode"
                                             onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
-                                                this.getReport()
-                                                this.getReportAttachment()
+                                                this.getMonthlyReportID()
                                             })}
                                             disableClearable
                                             style={{ width: 250 }}
@@ -394,8 +432,7 @@ export default class MonthlyReport extends Component {
                                             {...this.state.listCompany}
                                             id="company"
                                             onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
-                                                this.getReport()
-                                                this.getReportAttachment()
+                                                this.getMonthlyReportID()
                                             })}
                                             disableClearable
                                             style={{ width: 250 }}
@@ -522,9 +559,9 @@ export default class MonthlyReport extends Component {
                         company={this.state.company}
                         revision={this.state.revisionTable}
                         periode={this.state.periode.periode}
-                        submissionID={this.state.submissionID}
+                        monthlyReportId={this.state.monthlyReportId}
                         // saveToMasterBudget={this.saveToMasterBudget.bind(this)}
-                        onClickClose={() => this.setState({ visibleBS: false, visibleBudgetTahunan: true })}
+                        onClickClose={() => this.setState({ visibleBS: false, visibleMonthlyReport: true })}
                     // getReport={this.getCompanyActive.bind(this)}
                     />
                 )}
@@ -578,6 +615,14 @@ export default class MonthlyReport extends Component {
                         onClickClose={() => this.setState({ visibleCAT: false, visibleMonthlyReport: true })}
                     />
                 )}
+                {this.state.visibleLOCF && (
+                    <ListOfCreditFacilities
+                        company={this.state.company}
+                        revision={this.state.revisionTable}
+                        periode={this.state.periode.periode}
+
+                    />
+                )}
             </div >
         );
     }

src/container/MonthlyReport/BalanceSheetMR.js

@@ -3,6 +3,7 @@ import MUIDataTable from 'mui-datatables';
 import React, { Component } from 'react'
 import ReactTooltip from 'react-tooltip';
 import Images from '../../assets/Images';
+import api from '../../api';
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable3());
@@ -23,6 +24,24 @@ const style2 = {
 };
 
 export default class BalanceSheetMR extends Component {
+
+    componentDidMount(){
+        this.getItemHierarki()
+    }
+
+    async getItemHierarki() {
+        let payload = {
+            "report_id": 2,
+            "revision": Number(this.props.revision),
+            "periode": this.props.periode,
+            "company_id": this.props.company.company_id,
+            "monthly_report_id": this.props.monthlyReportId
+        }
+        api.create().getHierarkiMontlyReport(payload).then(response => {
+            console.log(response);
+        })
+    }
+
     render() {
         let columns = [
             {
@@ -65,11 +84,11 @@ export default class BalanceSheetMR extends Component {
                 name: `Month To Date (MTD)`,
                 options: {
                     customHeadRender: (columnMeta) => (
-                        <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
+                          <th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                               {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                                   <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                               </TableCell> */}
-                            <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#07a7d0', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
+                              <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 50, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                               <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                                   <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                       <span>{"Master Budget (MB)"}</span>
@@ -77,7 +96,7 @@ export default class BalanceSheetMR extends Component {
                                   <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                       <span>{"Rolling Budget (RB)"}</span>
                                   </div>
-                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
+                                  <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6' }}>
                                       <span>{"Actual"}</span>
                                   </div>
                               </div>

src/container/MonthlyReport/ListOfCreditFacilities.js

+import React, { Component } from 'react';
+import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography } from '@material-ui/core'
+
+export default class ListOfCreditFacilities extends Component {
+
+    render(){
+        return(
+            <div>
+            <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
+                <Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
+            </div>
+            <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 }}>Monthly Report - List Of Credit Facilities</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' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
+                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
+                            </div>
+                        </div>
+                    </div>
+                </Paper>
+            </div>
+            </div>
+        )
+    }
+
+}