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
Hide 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 = "") => {
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 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
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)
......@@ -677,7 +681,9 @@ const create = (type = "") => {
getHierarkiCronJobMBRatio,
getHierarkiCronJobMRPL,
getHierarkiCronJobMRCF,
getHierarkiCronJobMRRatio
getHierarkiCronJobMRRatio,
getRollingOutlookID,
getRollingOutlookBS
}
}
......
src/container/RollingOutlook.js
View file @ 64eac1cd
......@@ -47,7 +47,7 @@ export default class RollingOutlook extends Component {
alert: false,
tipeAlert: '',
messageAlert: '',
submissionID: null,
rollingOutlookID: null,
isSubmit: false,
visibleTableHistory: false,
isApprover: false,
......@@ -364,26 +364,26 @@ export default class RollingOutlook extends Component {
getOptionLabel: (option) => option.revision,
};
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getSubmission()
this.getRollingOutlookID()
})
}
}
})
}
getSubmission() {
getRollingOutlookID() {
this.setState({ loading: true })
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"is_approver": this.state.isApprover
}
api.create().getSubmission(payload).then(response => {
api.create().getRollingOutlookID(payload).then(response => {
console.log(response)
if (response) {
if (response.data.status === "success") {
this.setState({
submissionID: response.data.data.submission_id,
rollingOutlookID: response.data.data.rolling_outlook_id,
submitter: response.data.data.submitter,
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,
......@@ -405,7 +405,7 @@ export default class RollingOutlook extends Component {
})
})
} else {
this.setState({ submissionID: null, loading: false })
this.setState({ rollingOutlookID: null, loading: false })
}
}
})
......@@ -450,7 +450,7 @@ export default class RollingOutlook extends Component {
api.create().approvalSubmission(body).then((res) => {
console.log(res)
this.setState({ loading: false }, () => {
this.getSubmission()
this.getRollingOutlookID()
})
if (type == 'revision') {
api.create().createPeriodeRevision(payload).then((res) => console.log(res))
......@@ -538,7 +538,7 @@ export default class RollingOutlook extends Component {
if (response.data) {
if (response.data.status === "success") {
this.setState({ visibleUpload: false }, () => {
this.getSubmission()
this.getRollingOutlookID()
})
}
}
......@@ -549,7 +549,7 @@ export default class RollingOutlook extends Component {
api.create().deleteAttachment(item.attachment_id).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.getSubmission()
this.getRollingOutlookID()
}
}
})
......@@ -566,15 +566,15 @@ export default class RollingOutlook extends Component {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
this.getSubmission()
this.getRollingOutlookID()
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
this.getRollingOutlookID()
})
}
} else {
this.setState({ loading: false }, () => {
this.getSubmission()
this.getRollingOutlookID()
})
}
})
......@@ -619,13 +619,13 @@ export default class RollingOutlook extends Component {
})
if (canSubmit === true) {
let body = {
submission_id: this.state.submissionID
rolling_outlook_id: this.state.rollingOutlookID
}
api.create().submitMasterBudget(body).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "Success") {
this.getSubmission()
this.getRollingOutlookID()
}
}
})
......@@ -1201,7 +1201,13 @@ export default class RollingOutlook extends Component {
{this.state.visibleBS && (
<BalanceSheetRO
width={this.props.width}
height={this.props.height}
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 })}
/>
)}
......@@ -1223,7 +1229,7 @@ export default class RollingOutlook extends Component {
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
submissionID={this.state.submissionID}
rollingOutlookID={this.state.rollingOutlookID}
onClickClose={() => this.setState({ visibleTP: false, visibleRollingOutlook: true })}
status={this.state.status}
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 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");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
......@@ -20,11 +40,161 @@ const style2 = {
};
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() {
let dataTable = [
["Total Assets", "1"],
]
let columns = [{
// let dataTable = [
// ["Total Assets", "1"],
// ]
let 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) => (
......@@ -36,253 +206,675 @@ export default class BalanceSheetRO extends Component {
customBodyRender: (val, tableMeta) => {
return (
<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>
)
}
}
}, {
name: `31 Dec 2020 Actual`,
name: `31 Dec ${Number(this.props.periode) - 1 } Actual`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Jan 2021`,
name: `Jan ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Feb 2021`,
name: `Feb ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Mar 2021`,
name: `Mar ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Apr 2021`,
name: `Apr ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `May 2021`,
name: `May ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Jun 2021`,
name: `Jun ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Jul 2021`,
name: `Jul ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Aug 2021`,
name: `Aug ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Sep 2021`,
name: `Sep ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Oct 2021`,
name: `Oct ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Nov 2021`,
name: `Nov ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `Dec 2021`,
name: `Dec ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
}, {
name: `2021 Outlook`,
name: `${this.props.periode} Outlook`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<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>
)
}
}
},
]
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 (
<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 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revision CAT</Typography>
</div>
......@@ -294,19 +886,21 @@ export default class BalanceSheetRO extends Component {
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Company Name</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : 2020 rev.1</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
</div>
<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