import React, { Component } from 'react'; import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core'; import MUIDataTable from 'mui-datatables'; import NumberFormat from 'react-number-format'; import api from '../../api'; import AddIcon from '@material-ui/icons/Add'; 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()); const options = ct.customOptionsFixedColumn(); const style = { position: "sticky", left: 0, zIndex: 101, background: "white", }; const style2 = { position: "sticky", background: "white", zIndex: 100 }; export default class BalanceSheet extends Component { constructor(props) { super(props) this.state = { dataTable: [ // ["TOTAL ASSETS", "11,247,249", "10,702,196"], // ["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"], // ["Cash & Cash Equivalent", "1,464,571", "729,743"], // ["Cash & Bank Balance", "938,707", "265,584"], // ["Time & Call Deposit", "525,864", "464,159"], // ["BI Deposit", "", ""], // ["Marketable Securities", "150,250", "154,500"], // ["Notes Receivable", "", ""], // ["Accounts Receivable", "172,031", "97,112"], // ["Trade Receivables - Third Party", "142,668", "77,480"], ], visibleBalanceSheet: true, disabledSave: true } this.handleValue = this.handleValue.bind(this) this.fileHandler = this.fileHandler.bind(this); } componentDidMount() { // this.getItemHierarki() this.getDataDetail() console.log(this.props.data); } getDataDetail() { this.setState({ loading: true }) let payload = { "submission_id": this.props.data.submissionID, "report_id": this.props.data.report_id, "revision": Number(this.props.data.revision), "company_id": this.props.data.company.company_id, "periode": this.props.data.periode } console.log(payload) api.create().getOperatingIndDetail(payload).then(response => { let dataTable = [] let res = response.data.data console.log(res) const handlePushChild = (item) => { let indexIDzz = dataTable.findIndex((val) => val[1] === item.id) if (indexIDzz === -1) { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.master_budget.total_actual_before, item.master_budget.january, item.master_budget.february, item.master_budget.march, item.master_budget.april, item.master_budget.may, item.master_budget.june, item.master_budget.july, item.master_budget.august, item.master_budget.september, item.master_budget.october, item.master_budget.november, item.master_budget.december, item.master_budget.total_current_year ]) } if (item.children !== null) { if (item.children.length > 0) { item.children.map((items,indexs) => { handlePushChild(items) }) } } } res.map((item,index) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.uom, item.master_budget.total_actual_before, item.master_budget.january, item.master_budget.february, item.master_budget.march, item.master_budget.april, item.master_budget.may, item.master_budget.june, item.master_budget.july, item.master_budget.august, item.master_budget.september, item.master_budget.october, item.master_budget.november, item.master_budget.december, item.master_budget.total_current_year ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items,indexs) => { handlePushChild(items) }) } } }) this.setState({dataTable, loading: false}) }) } createData() { let payloadMB = [] this.state.dataTable.map((item,index) => { payloadMB.push({ "item_report_id": item[1], "total_actual_before": item[7], "january": item[8], "february": item[9], "march": item[10], "april": item[11], "may": item[12], "june": item[13], "july": item[14], "august": item[15], "september": item[16], "october": item[17], "november": item[18], "december": item[19], "total_current_year": item[20], }) }) let payload = { "submission_id": this.props.data.submissionID, "report_id": this.props.data.report_id, "company_id": this.props.data.company.company_id, "periode": this.props.data.periode, "status":"submitted", "master_budget": payloadMB } console.log('=========================') console.log(JSON.stringify(payload)) api.create().createOpetaingInd(payload).then((response) => { console.log(response) }) } handleValue(data) { let total = 0 this.state.dataTable.map((item, index) => { if (data.rowData[1] == item[2]) { total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex])) } }) let indexParent = this.state.dataTable.findIndex((val) => val[1] == this.state.dataTable[data.rowIndex][2]) let a = this.state.dataTable[data.rowIndex][data.columnIndex] = total // console.log(indexParent); return a } handleChange(value, tableMeta) { let val = String(value).split(",").join("") let data = this.state.dataTable let indexParent = data.findIndex((val) => val[1] == data[tableMeta.rowIndex][2]) if (indexParent > 0) { let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val) let jagain = data[indexParent][tableMeta.columnIndex] a = data[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val)) } else { data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val) } } 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() } downloadTemplate = async () => { let res = await fetch( `https://tia.eksad.com/tia-reporting-dev/public/transaction/master_budget/download_template?report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}` ) res = await res.blob() console.log(res) if (res.size > 0) { let url = window.URL.createObjectURL(res); let a = document.createElement('a'); a.href = url; a.download = 'Template Balance Sheet.xlsx'; a.click(); } } fileHandler = (event) => { let fileObj = event ExcelRenderer(fileObj, (err, resp) => { // console.log(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(), total_actual_before: i[2] === undefined ? "" : String(i[2]).trim(), january: i[3] === undefined ? "" : String(i[3]).trim(), february: i[4] === undefined ? "" : String(i[4]).trim(), march: i[5] === undefined ? "" : String(i[5]).trim(), april: i[6] === undefined ? "" : String(i[6]).trim(), may: i[7] === undefined ? "" : String(i[7]).trim(), june: i[8] === undefined ? "" : String(i[8]).trim(), july: i[9] === undefined ? "" : String(i[9]).trim(), august: i[10] === undefined ? "" : String(i[10]).trim(), september: i[11] === undefined ? "" : String(i[11]).trim(), october: i[12] === undefined ? "" : String(i[12]).trim(), november: i[13] === undefined ? "" : String(i[13]).trim(), december: i[14] === undefined ? "" : String(i[14]).trim(), total_current_year: i[15] === undefined ? "" : String(i[15]).trim(), total_next_year: i[16] === undefined ? "" : String(i[16]).trim(), total_more_year: i[16] === undefined ? "" : String(i[17]).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]) ] }) let body = { company_id: this.props.company.company_id, periode: this.props.periode, report_id: this.props.report_id, balance_sheet: 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, visibleBalanceSheet: 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.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) => { let val = String(value).split(",").join("") // let data = this.state.dataTable2 let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[tableMeta.rowIndex][2]) if (indexParent > 0) { // console.log(indexParent) let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val) let jagain = dataTable2[indexParent][tableMeta.columnIndex] a = dataTable2[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val)) } else { dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val) } } const handleValue = (data) => { let total = 0 dataTable2.map((item, index) => { if (data.rowData[1] == item[2]) { total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex])) } }) let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[data.rowIndex][2]) let a = dataTable2[data.rowIndex][data.columnIndex] = Number(total) // 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: { display: false } }, { name: "", options: { display: false } }, { name: "", options: { display: false } }, { name: "", options: { display: false } }, { name: "", options: { display: false } }, { name: "Account", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style }), customBodyRender: (val, tableMeta) => { return (
{tableMeta.rowData[22] ? tableMeta.rowData[22].length > 0 ? tableMeta.rowData[22][0].field === 'item' ? tableMeta.rowData[4] == 0 ? {String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()} :
{tableMeta.rowData[0] === 4 ? "" : val}
: tableMeta.rowData[4] == 0 ? {String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()} :
{tableMeta.rowData[0] === 4 ? "" : val}
: tableMeta.rowData[4] == 0 ? {String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()} :
{tableMeta.rowData[0] === 4 ? "" : val}
: tableMeta.rowData[4] == 0 ? {String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()} :
{tableMeta.rowData[0] === 4 ? "" : val}
}
) } } }, { name: "UOM", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
) } } }, { name: "31 Dec 2020 Actual", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
) } } }, { name: "Jan 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } } , { name: "Feb 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Mar 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Apr 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "May 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Jun 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Jul 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Aug 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Sep 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Oct 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Nov 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "Dec 2021", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "31 Dec 2022 Total", options: { customHeadRender: (columnMeta) => ( {columnMeta.name} ), setCellProps: () => ({ style2 }), customBodyRender: (value, tableMeta, updateValue) => { return (
{tableMeta.rowData[0] === 4 ? null :
{ // updateValue(event.target.value) handleChange(event.target.value, tableMeta) console.log(dataTable2) }} /> } />
}
) } } }, { name: "", options: { display: false } } ] const loadingComponent = (
); return (
Pengajuan Budget Tahunan
{this.state.loading && loadingComponent}
{this.state.visibleBalanceSheet === true ?
Budget Tahunan - Operating Indicator
{this.props.data.company.company_name} Periode : {this.props.data.periode} in IDR mn
{!this.state.loading && }
:
{this.props.company.company_name} Periode : {this.props.periode} in IDR mn
{this.state.dataLoaded && (
{!this.state.loading && }
)}
}
{this.state.visibleUpload && (
Upload File
{ this.fileHandler(dt) this.setState({ uploadStatus: 'idle', percentage: '0' }) }} onUpload={() => { this.state.judul === "MASTER BUDGET - OPERATING INDICATOR" ? this.checkUpload() : this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' }) }} />
)}
); } }