Skip to content

T
Tia-dev
Commit eb0eaf92 authored by rifkaki's avatar rifkaki
Browse files
Options

cuma get hierarki bs rolling outlook

parent 0d8527cc
Show whitespace changes
Inline Side-by-side
Showing with 701 additions and 95 deletions
src/api/index.js
View file @ eb0eaf92
...@@ -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 @ eb0eaf92
...@@ -46,7 +46,7 @@ export default class RollingOutlook extends Component { ...@@ -46,7 +46,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,
...@@ -363,26 +363,26 @@ export default class RollingOutlook extends Component { ...@@ -363,26 +363,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,
...@@ -404,7 +404,7 @@ export default class RollingOutlook extends Component { ...@@ -404,7 +404,7 @@ export default class RollingOutlook extends Component {
}) })
}) })
} else { } else {
this.setState({ submissionID: null, loading: false }) this.setState({ rollingOutlookID: null, loading: false })
} }
} }
}) })
...@@ -449,7 +449,7 @@ export default class RollingOutlook extends Component { ...@@ -449,7 +449,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))
...@@ -537,7 +537,7 @@ export default class RollingOutlook extends Component { ...@@ -537,7 +537,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()
}) })
} }
} }
...@@ -548,7 +548,7 @@ export default class RollingOutlook extends Component { ...@@ -548,7 +548,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()
} }
} }
}) })
...@@ -565,15 +565,15 @@ export default class RollingOutlook extends Component { ...@@ -565,15 +565,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()
}) })
} }
}) })
...@@ -618,13 +618,13 @@ export default class RollingOutlook extends Component { ...@@ -618,13 +618,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()
} }
} }
}) })
...@@ -1200,7 +1200,13 @@ export default class RollingOutlook extends Component { ...@@ -1200,7 +1200,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 })}
/> />
)} )}
...@@ -1222,7 +1228,7 @@ export default class RollingOutlook extends Component { ...@@ -1222,7 +1228,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 @ eb0eaf92
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