Skip to content

T
Tia-dev
Commit 64eac1cd authored by Rifka Kurnia's avatar Rifka Kurnia
Browse files
Options

Merge branch 'rifka' into 'master' 

cuma get hierarki bs rolling outlook

See merge request !1186
parents 2ce357a5 e01684b5
Show whitespace changes
Inline Side-by-side
Showing with 701 additions and 95 deletions
src/api/index.js
View file @ 64eac1cd
...@@ -233,6 +233,10 @@ const create = (type = "") => { ...@@ -233,6 +233,10 @@ const create = (type = "") => {
const getReportHierarkiPL = (body) => api.post('transaction/db_profit_loss_detail/get_report_hierarki', body) const getReportHierarkiPL = (body) => api.post('transaction/db_profit_loss_detail/get_report_hierarki', body)
const getLastestUpdateMROI = (body) => api.post('transaction/operating_indicator/monthly_report/get_latest_update', body) const getLastestUpdateMROI = (body) => api.post('transaction/operating_indicator/monthly_report/get_latest_update', body)
const getRollingOutlookID = (body) => api.post('transaction/rolling_outlook/get_rolling_outlook_id', body)
const getRollingOutlookBS = (body) => api.post('transaction/balance_sheet/rolling_outlook/get_report_hierarki', body)
//REPORT NEW //REPORT NEW
const getAllReportBS = (body) => api.post('/transaction/db_balance_sheet/get_report_hierarki', body) const getAllReportBS = (body) => api.post('/transaction/db_balance_sheet/get_report_hierarki', body)
const getReportBSMB = (body) => api.post('/transaction/db_balance_sheet/master_budget/get_report_hierarki', body) const getReportBSMB = (body) => api.post('/transaction/db_balance_sheet/master_budget/get_report_hierarki', body)
...@@ -677,7 +681,9 @@ const create = (type = "") => { ...@@ -677,7 +681,9 @@ const create = (type = "") => {
getHierarkiCronJobMBRatio, getHierarkiCronJobMBRatio,
getHierarkiCronJobMRPL, getHierarkiCronJobMRPL,
getHierarkiCronJobMRCF, getHierarkiCronJobMRCF,
getHierarkiCronJobMRRatio getHierarkiCronJobMRRatio,
getRollingOutlookID,
getRollingOutlookBS
} }
} }
......
src/container/RollingOutlook.js
View file @ 64eac1cd
...@@ -47,7 +47,7 @@ export default class RollingOutlook extends Component { ...@@ -47,7 +47,7 @@ export default class RollingOutlook extends Component {
alert: false, alert: false,
tipeAlert: '', tipeAlert: '',
messageAlert: '', messageAlert: '',
submissionID: null, rollingOutlookID: null,
isSubmit: false, isSubmit: false,
visibleTableHistory: false, visibleTableHistory: false,
isApprover: false, isApprover: false,
...@@ -364,26 +364,26 @@ export default class RollingOutlook extends Component { ...@@ -364,26 +364,26 @@ export default class RollingOutlook extends Component {
getOptionLabel: (option) => option.revision, getOptionLabel: (option) => option.revision,
}; };
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => { this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getSubmission() this.getRollingOutlookID()
}) })
} }
} }
}) })
} }
getSubmission() { getRollingOutlookID() {
this.setState({ loading: true }) this.setState({ loading: true })
let payload = { let payload = {
"company_id": this.state.company.company_id, "company_id": this.state.company.company_id,
"periode": this.state.periode.periode, "periode": this.state.periode.periode,
"is_approver": this.state.isApprover "is_approver": this.state.isApprover
} }
api.create().getSubmission(payload).then(response => { api.create().getRollingOutlookID(payload).then(response => {
console.log(response) console.log(response)
if (response) { if (response) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ this.setState({
submissionID: response.data.data.submission_id, rollingOutlookID: response.data.data.rolling_outlook_id,
submitter: response.data.data.submitter, submitter: response.data.data.submitter,
approverID: response.data.data.approve_id, pic: response.data.data.approver == null ? '' : response.data.data.approver, approverID: response.data.data.approve_id, pic: response.data.data.approver == null ? '' : response.data.data.approver,
lastStatus: response.data.data.last_status === null ? 'SUBMIT' : response.data.data.last_status, lastStatus: response.data.data.last_status === null ? 'SUBMIT' : response.data.data.last_status,
...@@ -405,7 +405,7 @@ export default class RollingOutlook extends Component { ...@@ -405,7 +405,7 @@ export default class RollingOutlook extends Component {
}) })
}) })
} else { } else {
this.setState({ submissionID: null, loading: false }) this.setState({ rollingOutlookID: null, loading: false })
} }
} }
}) })
...@@ -450,7 +450,7 @@ export default class RollingOutlook extends Component { ...@@ -450,7 +450,7 @@ export default class RollingOutlook extends Component {
api.create().approvalSubmission(body).then((res) => { api.create().approvalSubmission(body).then((res) => {
console.log(res) console.log(res)
this.setState({ loading: false }, () => { this.setState({ loading: false }, () => {
this.getSubmission() this.getRollingOutlookID()
}) })
if (type == 'revision') { if (type == 'revision') {
api.create().createPeriodeRevision(payload).then((res) => console.log(res)) api.create().createPeriodeRevision(payload).then((res) => console.log(res))
...@@ -538,7 +538,7 @@ export default class RollingOutlook extends Component { ...@@ -538,7 +538,7 @@ export default class RollingOutlook extends Component {
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ visibleUpload: false }, () => { this.setState({ visibleUpload: false }, () => {
this.getSubmission() this.getRollingOutlookID()
}) })
} }
} }
...@@ -549,7 +549,7 @@ export default class RollingOutlook extends Component { ...@@ -549,7 +549,7 @@ export default class RollingOutlook extends Component {
api.create().deleteAttachment(item.attachment_id).then(response => { api.create().deleteAttachment(item.attachment_id).then(response => {
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.getSubmission() this.getRollingOutlookID()
} }
} }
}) })
...@@ -566,15 +566,15 @@ export default class RollingOutlook extends Component { ...@@ -566,15 +566,15 @@ export default class RollingOutlook extends Component {
console.log(response); console.log(response);
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.getSubmission() this.getRollingOutlookID()
} else { } else {
this.setState({ loading: false }, () => { this.setState({ loading: false }, () => {
this.getSubmission() this.getRollingOutlookID()
}) })
} }
} else { } else {
this.setState({ loading: false }, () => { this.setState({ loading: false }, () => {
this.getSubmission() this.getRollingOutlookID()
}) })
} }
}) })
...@@ -619,13 +619,13 @@ export default class RollingOutlook extends Component { ...@@ -619,13 +619,13 @@ export default class RollingOutlook extends Component {
}) })
if (canSubmit === true) { if (canSubmit === true) {
let body = { let body = {
submission_id: this.state.submissionID rolling_outlook_id: this.state.rollingOutlookID
} }
api.create().submitMasterBudget(body).then(response => { api.create().submitMasterBudget(body).then(response => {
console.log(response); console.log(response);
if (response.data) { if (response.data) {
if (response.data.status === "Success") { if (response.data.status === "Success") {
this.getSubmission() this.getRollingOutlookID()
} }
} }
}) })
...@@ -1201,7 +1201,13 @@ export default class RollingOutlook extends Component { ...@@ -1201,7 +1201,13 @@ export default class RollingOutlook extends Component {
{this.state.visibleBS && ( {this.state.visibleBS && (
<BalanceSheetRO <BalanceSheetRO
width={this.props.width} width={this.props.width}
height={this.props.height}
open={this.props.open} open={this.props.open}
report_id={this.state.report_id}
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
rollingOutlookID={this.state.rollingOutlookID}
onClickClose={() => this.setState({ visibleBS: false, visibleRollingOutlook: true })} onClickClose={() => this.setState({ visibleBS: false, visibleRollingOutlook: true })}
/> />
)} )}
...@@ -1223,7 +1229,7 @@ export default class RollingOutlook extends Component { ...@@ -1223,7 +1229,7 @@ export default class RollingOutlook extends Component {
company={this.state.company} company={this.state.company}
revision={this.state.revisionTable} revision={this.state.revisionTable}
periode={this.state.periode.periode} periode={this.state.periode.periode}
submissionID={this.state.submissionID} rollingOutlookID={this.state.rollingOutlookID}
onClickClose={() => this.setState({ visibleTP: false, visibleRollingOutlook: true })} onClickClose={() => this.setState({ visibleTP: false, visibleRollingOutlook: true })}
status={this.state.status} status={this.state.status}
lastStatus={this.state.lastStatus} lastStatus={this.state.lastStatus}
......
src/container/RollingOutlook/BalanceSheetRO.js
View file @ 64eac1cd
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography } from '@material-ui/core' import { createMuiTheme, FormControlLabel, Input, Snackbar, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'
import MUIDataTable from 'mui-datatables' import MUIDataTable from 'mui-datatables'
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip';
import Images from '../../assets/Images';
import api from '../../api';
import NumberFormat from 'react-number-format';
import { type } from 'ramda';
import { PropagateLoader } from 'react-spinners';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import Constant from '../../library/Constant';
import * as R from 'ramda';
import { Alert } from '@material-ui/lab';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3()); const getMuiTheme = () => createMuiTheme(ct.customTable3());
...@@ -20,11 +40,161 @@ const style2 = { ...@@ -20,11 +40,161 @@ const style2 = {
}; };
export default class BalanceSheetRO extends Component { export default class BalanceSheetRO extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: true,
get_for: "view",
}
}
componentDidMount() {
this.getItemHierarki()
}
getItemHierarki() {
this.setState({ loading: true, judulColumn: null })
let payload = {
"company_id": this.props.company.company_id,
"get_for": this.state.get_for,
"months": 0,
"periode": this.props.periode,
"report_id": this.props.report_id,
"revision": Number(this.props.revision),
"rolling_outlook_id": this.props.rollingOutlookID
}
api.create().getRollingOutlookBS(payload).then(response => {
console.log(response);
let dataTable = []
if (response.data) {
if (response.data.status == 'success') {
let res = response.data.data
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.balance_sheet.total_december_last_year === "" ? "0" : item.balance_sheet.total_december_last_year,
item.balance_sheet.january === "" ? "0" : item.balance_sheet.january,
item.balance_sheet.february === "" ? "0" : item.balance_sheet.february,
item.balance_sheet.march === "" ? "0" : item.balance_sheet.march,
item.balance_sheet.april === "" ? "0" : item.balance_sheet.april,
item.balance_sheet.may === "" ? "0" : item.balance_sheet.may,
item.balance_sheet.june === "" ? "0" : item.balance_sheet.june,
item.balance_sheet.july === "" ? "0" : item.balance_sheet.july,
item.balance_sheet.august === "" ? "0" : item.balance_sheet.august,
item.balance_sheet.september === "" ? "0" : item.balance_sheet.september,
item.balance_sheet.october === "" ? "0" : item.balance_sheet.october,
item.balance_sheet.november === "" ? "0" : item.balance_sheet.november,
item.balance_sheet.december === "" ? "0" : item.balance_sheet.december,
item.balance_sheet.total_december_year === "" ? "0" : item.balance_sheet.total_december_year,
item.order,
item.condition_it_should_be,
item.condition_if_wrong
])
}
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.balance_sheet.total_december_last_year === "" ? "0" : item.balance_sheet.total_december_last_year,
item.balance_sheet.january === "" ? "0" : item.balance_sheet.january,
item.balance_sheet.february === "" ? "0" : item.balance_sheet.february,
item.balance_sheet.march === "" ? "0" : item.balance_sheet.march,
item.balance_sheet.april === "" ? "0" : item.balance_sheet.april,
item.balance_sheet.may === "" ? "0" : item.balance_sheet.may,
item.balance_sheet.june === "" ? "0" : item.balance_sheet.june,
item.balance_sheet.july === "" ? "0" : item.balance_sheet.july,
item.balance_sheet.august === "" ? "0" : item.balance_sheet.august,
item.balance_sheet.september === "" ? "0" : item.balance_sheet.september,
item.balance_sheet.october === "" ? "0" : item.balance_sheet.october,
item.balance_sheet.november === "" ? "0" : item.balance_sheet.november,
item.balance_sheet.december === "" ? "0" : item.balance_sheet.december,
item.balance_sheet.total_december_year === "" ? "0" : item.balance_sheet.total_december_year,
item.order,
item.condition_it_should_be,
item.condition_if_wrong
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
// console.log(dataTable)
this.setState({ dataTable, loading: false, buttonError: true, editable: true })
} else {
this.setState({ loading: false, 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({ dataTable, loading: false, buttonError: true, editable: true })
}
})
}
render() { render() {
let dataTable = [ // let dataTable = [
["Total Assets", "1"], // ["Total Assets", "1"],
] // ]
let columns = [{ let columns = [
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "Account", name: "Account",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
...@@ -36,253 +206,675 @@ export default class BalanceSheetRO extends Component { ...@@ -36,253 +206,675 @@ export default class BalanceSheetRO extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ width: 300 }}> <div style={{ width: 300 }}>
{val} {tableMeta.rowData[0] === null ?
tableMeta.rowData[4] == 0 ?
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, fontWeight: 'bold', color: 'red' }}>{String(val).toUpperCase()}</span>
</LightTooltip> :
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</LightTooltip>
</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> </div>
) )
} }
} }
}, { }, {
name: `31 Dec 2020 Actual`, name: `31 Dec ${Number(this.props.periode) - 1 } Actual`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Jan 2021`, name: `Jan ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Feb 2021`, name: `Feb ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Mar 2021`, name: `Mar ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Apr 2021`, name: `Apr ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `May 2021`, name: `May ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Jun 2021`, name: `Jun ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Jul 2021`, name: `Jul ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Aug 2021`, name: `Aug ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Sep 2021`, name: `Sep ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Oct 2021`, name: `Oct ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Nov 2021`, name: `Nov ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `Dec 2021`, name: `Dec ${this.props.periode}`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, { }, {
name: `2021 Outlook`, name: `${this.props.periode} Outlook`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}> <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (val, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{value} {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 7 ?
null :
this.state.get_for == 'view' ?
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
:
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(val).toFixed(1)}
/>
}
/>
</div>
}
</div> </div>
) )
} }
} }
}, },
] ]
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
{this.state.loading && loadingComponent}
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revision CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revision CAT</Typography>
</div> </div>
...@@ -294,19 +886,21 @@ export default class BalanceSheetRO extends Component { ...@@ -294,19 +886,21 @@ export default class BalanceSheetRO extends Component {
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div> <div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Company Name</Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2020 rev.1</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> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div> </div>
</div> </div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable} data={this.state.dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
)}
</div> </div>
</div> </div>
<div className="grid grid-2x" style={{ marginTop: 20 }}> <div className="grid grid-2x" style={{ marginTop: 20 }}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment