Skip to content

T
Tia-dev
Commit 9747c8f0 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'riri' into 'master' 

summary

See merge request !1022
parents 3243d475 86d80e8e
Show whitespace changes
Inline Side-by-side
Showing with 1457 additions and 2 deletions
src/container/Laporan/SubHolding.js
View file @ 9747c8f0
...@@ -33,6 +33,9 @@ export default class SubHolding extends Component { ...@@ -33,6 +33,9 @@ export default class SubHolding extends Component {
{ value: 5, label: 'DB Tax Planning' }, { value: 5, label: 'DB Tax Planning' },
{ value: 21, label: 'DB Operating Indicator' }, { value: 21, label: 'DB Operating Indicator' },
{ value: 6, label: 'Cash FLow - Summary' }, { value: 6, label: 'Cash FLow - Summary' },
{ value: 7, label: 'Balance Sheet - Summary' },
{ value: 8, label: 'Profit Loss - Summary' },
{ value: 9, label: 'financial Ratio - Summary' },
], ],
report: null, report: null,
loading: false, loading: false,
...@@ -988,7 +991,320 @@ export default class SubHolding extends Component { ...@@ -988,7 +991,320 @@ export default class SubHolding extends Component {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
} }
}) })
} else if (this.state.report.value === 7) {
api.create().getReportBSMB(payload).then(response => {
console.log(payload);
console.log(response);
// let dataTable = []
// if (response.data) {
// 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_actual_before === null ? "0.0" : item.balance_sheet.total_actual_before === "" ? "0.0" : item.balance_sheet.total_actual_before,
// Number(item.balance_sheet.january).toFixed(1),
// Number(item.balance_sheet.february).toFixed(1),
// Number(item.balance_sheet.march).toFixed(1),
// Number(item.balance_sheet.april).toFixed(1),
// Number(item.balance_sheet.may).toFixed(1),
// Number(item.balance_sheet.june).toFixed(1),
// Number(item.balance_sheet.july).toFixed(1),
// Number(item.balance_sheet.august).toFixed(1),
// Number(item.balance_sheet.september).toFixed(1),
// Number(item.balance_sheet.october).toFixed(1),
// Number(item.balance_sheet.november).toFixed(1),
// Number(item.balance_sheet.december).toFixed(1),
// Number(item.balance_sheet.total_current_year).toFixed(1),
// Number(item.balance_sheet.total_next_year).toFixed(1),
// Number(item.balance_sheet.total_more_year).toFixed(1),
// 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_actual_before === null ? "0.0" : item.balance_sheet.total_actual_before === "" ? "0.0" : item.balance_sheet.total_actual_before,
// Number(item.balance_sheet.january).toFixed(1),
// Number(item.balance_sheet.february).toFixed(1),
// Number(item.balance_sheet.march).toFixed(1),
// Number(item.balance_sheet.april).toFixed(1),
// Number(item.balance_sheet.may).toFixed(1),
// Number(item.balance_sheet.june).toFixed(1),
// Number(item.balance_sheet.july).toFixed(1),
// Number(item.balance_sheet.august).toFixed(1),
// Number(item.balance_sheet.september).toFixed(1),
// Number(item.balance_sheet.october).toFixed(1),
// Number(item.balance_sheet.november).toFixed(1),
// Number(item.balance_sheet.december).toFixed(1),
// Number(item.balance_sheet.total_current_year).toFixed(1),
// Number(item.balance_sheet.total_next_year).toFixed(1),
// Number(item.balance_sheet.total_more_year).toFixed(1),
// 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)
// })
// }
// }
// })
// // this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true })
// this.setState({ dataTable }, () => {
// console.log(this.state.dataTable)
// this.getBalanceSheetMR(payload)
// })
// } else {
// this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false })
// }
this.setState({ previewTable: true, loading: false, previewDownload: false })
})
} else if (this.state.report.value === 8) {
api.create().getReportPLMB(payload).then(response => {
// console.log(response);
// if (response.data) {
// let dataTable = []
// console.log(response)
// let res = response.data.data
// const handlePushChild = (item) => {
// dataTable.push([
// item.type_report_id,
// item.id,
// item.parent,
// item.formula,
// item.level,
// item.description,
// item.profit_detail.total_actual_before === null ? "0" : item.profit_detail.total_actual_before === "" ? "0" : item.profit_detail.total_actual_before,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.january, formula: item.profit_detail.january_formula } : item.profit_detail.january,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.february, formula: item.profit_detail.february_formula } : item.profit_detail.february,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.march, formula: item.profit_detail.march_formula } : item.profit_detail.march,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.april, formula: item.profit_detail.april_formula } : item.profit_detail.april,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.may, formula: item.profit_detail.may_formula } : item.profit_detail.may,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.june, formula: item.profit_detail.june_formula } : item.profit_detail.june,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.july, formula: item.profit_detail.july_formula } : item.profit_detail.july,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.august, formula: item.profit_detail.august_formula } : item.profit_detail.august,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.september, formula: item.profit_detail.september_formula } : item.profit_detail.september,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.october, formula: item.profit_detail.october_formula } : item.profit_detail.october,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.november, formula: item.profit_detail.november_formula } : item.profit_detail.november,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.december, formula: item.profit_detail.december_formula } : item.profit_detail.december,
// item.profit_detail.total_current_year,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_next_year,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_more_year,
// item.order,
// item.condition_it_should_be,
// item.condition_if_wrong,
// item.profit_detail.forecast_formula == null ? [] : item.profit_detail.forecast_formula
// ])
// 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.profit_detail.total_actual_before === null ? "0" : item.profit_detail.total_actual_before === "" ? "0" : item.profit_detail.total_actual_before,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.january, formula: item.profit_detail.january_formula } : item.profit_detail.january,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.february, formula: item.profit_detail.february_formula } : item.profit_detail.february,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.march, formula: item.profit_detail.march_formula } : item.profit_detail.march,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.april, formula: item.profit_detail.april_formula } : item.profit_detail.april,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.may, formula: item.profit_detail.may_formula } : item.profit_detail.may,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.june, formula: item.profit_detail.june_formula } : item.profit_detail.june,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.july, formula: item.profit_detail.july_formula } : item.profit_detail.july,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.august, formula: item.profit_detail.august_formula } : item.profit_detail.august,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.september, formula: item.profit_detail.september_formula } : item.profit_detail.september,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.october, formula: item.profit_detail.october_formula } : item.profit_detail.october,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.november, formula: item.profit_detail.november_formula } : item.profit_detail.november,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.december, formula: item.profit_detail.december_formula } : item.profit_detail.december,
// item.profit_detail.total_current_year,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_next_year,
// item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_more_year,
// item.order,
// item.condition_it_should_be,
// item.condition_if_wrong,
// item.profit_detail.forecast_formula == null ? [] : item.profit_detail.forecast_formula
// ])
// if (item.children !== null) {
// if (item.children.length > 0) {
// item.children.map((items, indexs) => {
// handlePushChild(items)
// })
// }
// }
// })
// // this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true })
// this.setState({ dataTable }, () => {
// console.log(this.state.dataTable)
// this.getReportPLMR(payload)
// })
// } else {
// this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false })
// }
this.setState({ previewTable: true, loading: false, previewDownload: false })
})
} else if (this.state.report.value === 9) {
api.create().getReportHierarkiFRMB(payload).then(response => {
// console.log(payload);
// 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.uom,
// item.ratio.total_actual_before === null ? "0.0" : item.ratio.total_actual_before === "" ? "0.0" : item.ratio.total_actual_before,
// Number(item.ratio.january).toFixed(1),
// Number(item.ratio.february).toFixed(1),
// Number(item.ratio.march).toFixed(1),
// Number(item.ratio.april).toFixed(1),
// Number(item.ratio.may).toFixed(1),
// Number(item.ratio.june).toFixed(1),
// Number(item.ratio.july).toFixed(1),
// Number(item.ratio.august).toFixed(1),
// Number(item.ratio.september).toFixed(1),
// Number(item.ratio.october).toFixed(1),
// Number(item.ratio.november).toFixed(1),
// Number(item.ratio.december).toFixed(1),
// Number(item.ratio.total_next_year).toFixed(1),
// Number(item.ratio.total_more_year).toFixed(1),
// // Number(item.ratio.monthly_january).toFixed(2),
// // Number(item.ratio.monthly_february).toFixed(2),
// // Number(item.ratio.monthly_march).toFixed(2),
// // Number(item.ratio.monthly_april).toFixed(2),
// // Number(item.ratio.monthly_may).toFixed(2),
// // Number(item.ratio.monthly_june).toFixed(2),
// // Number(item.ratio.monthly_july).toFixed(2),
// // Number(item.ratio.monthly_august).toFixed(2),
// // Number(item.ratio.monthly_september).toFixed(2),
// // Number(item.ratio.monthly_october).toFixed(2),
// // Number(item.ratio.monthly_november).toFixed(2),
// // Number(item.ratio.monthly_december).toFixed(2),
// // 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.oum,
// item.ratio.total_actual_before === null ? "0.0" : item.ratio.total_actual_before === "" ? "0.0" : item.ratio.total_actual_before,
// Number(item.ratio.january).toFixed(1),
// Number(item.ratio.february).toFixed(1),
// Number(item.ratio.march).toFixed(1),
// Number(item.ratio.april).toFixed(1),
// Number(item.ratio.may).toFixed(1),
// Number(item.ratio.june).toFixed(1),
// Number(item.ratio.july).toFixed(1),
// Number(item.ratio.august).toFixed(1),
// Number(item.ratio.september).toFixed(1),
// Number(item.ratio.october).toFixed(1),
// Number(item.ratio.november).toFixed(1),
// Number(item.ratio.december).toFixed(1),
// Number(item.ratio.total_next_year).toFixed(1),
// Number(item.ratio.total_more_year).toFixed(1),
// // Number(item.ratio.monthly_january).toFixed(2),
// // Number(item.ratio.monthly_february).toFixed(2),
// // Number(item.ratio.monthly_march).toFixed(2),
// // Number(item.ratio.monthly_april).toFixed(2),
// // Number(item.ratio.monthly_may).toFixed(2),
// // Number(item.ratio.monthly_june).toFixed(2),
// // Number(item.ratio.monthly_july).toFixed(2),
// // Number(item.ratio.monthly_august).toFixed(2),
// // Number(item.ratio.monthly_september).toFixed(2),
// // Number(item.ratio.monthly_october).toFixed(2),
// // Number(item.ratio.monthly_november).toFixed(2),
// // Number(item.ratio.monthly_december).toFixed(2),
// // 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)
// })
// }
// }
// })
// this.setState({ dataTable }, () => {
// console.log(this.state.dataTable)
// this.getRatioMR(payload)
// })
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
// if (response.data.message.includes("Someone Logged In")) {
// setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN)
// window.location.reload();
// }, 1000);
// }
// })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
// }
this.setState({ previewTable: true, loading: false, previewDownload: false })
})
} }
} }
getCFSumaMR(payload) { getCFSumaMR(payload) {
......
src/container/Laporan/TableSubHolding.js
View file @ 9747c8f0
...@@ -1034,6 +1034,21 @@ export default class TableSubHolding extends Component { ...@@ -1034,6 +1034,21 @@ export default class TableSubHolding extends Component {
["Total Assets", "Notes", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }] ["Total Assets", "Notes", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
] ]
let dataSummaryBS = [
["ABCD", { a: "0", b: "0", c: "0", d: "0" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
let dataSummaryPL = [
["ABCD", { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
let dataSummaryFR = [
["ABCD", "test unit", { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }, { a: "2", b: "3", c: "4", d: "5" }],
["Total Assets", "unit try", { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }, { a: "6", b: "7", c: "8", d: "9" }]
]
const columnDBBS = [{ const columnDBBS = [{
name: "", name: "",
options: { options: {
...@@ -14502,6 +14517,1130 @@ export default class TableSubHolding extends Component { ...@@ -14502,6 +14517,1130 @@ export default class TableSubHolding extends Component {
}, },
] ]
const columnSummaryBS = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
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: `MTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#000', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#000', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Month"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"OL"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of OL"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-2x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(1).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(2).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(3).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(4).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(5).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(6).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(7).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: "2022",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}, {
name: "2023",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}
]
const columnSummaryPL = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{ val }
</div>
)
}
}
}, {
name: `MTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `YTD 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `Q1 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d06' }}>
<span>{"Last Year"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-1x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `FY 2021`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50}}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, backgroundColor: '#37b5e6', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#rgb(200 224 229)' }}>
<span>{"OL"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of OL"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Year"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"% of LY"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% ach OL to MB"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
console.log(tableMeta)
console.log(val)
return (
<div>
<div className="grid grid-2x content-center">
<div className="col-1">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
<div className="col-2">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'center', width: 90 }}>
0.0
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: "2022",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}, {
name: "2023",
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 50 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#1c71b8', width: 96 }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{textAlign: 'right' }}>
</div>
)
}
}
}
]
const columnSummaryFR = [
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{
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: "Unit",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ width: 90, textAlign: 'center' }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
null :
<div>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
</div>
}
</div>
)
}
}
},{
name: `MTD ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
{/* <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}> */}
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Last Year"}</span>
</div>
{/* </div> */}
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div>
{/* <div className="grid grid-3x content-center"> */}
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value= {value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value= {value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
{/* </div> */}
</div>
)
}
}
}, {
name: `FY ${this.props.periode}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#000', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#000', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)', width: 495 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Actual"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"OL"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: 'rgb(200 224 229)' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"% of OL"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: 'rgb(200 224 229)' }}>
<span>{"Last Year"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"% of LY"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
console.log(tableMeta)
return (
<div>
<div className="grid grid-2x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-4">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-2">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
<div className="col-3">
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `${Number(this.props.periode) + 1}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
)
}
}
}, {
name: `${Number(this.props.periode) + 2}`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
<span>{"ForeCast"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowData[0] === 4 ?
null
: tableMeta.rowData[0] === 1 ?
null :
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
<NumberFormat
thousandSeparator={true}
style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
disabled={true}
value={Number(0.0).toFixed(1)}
/>
}
/>
</div>
}
</div>
)
}
}
},
]
const columns = [] const columns = []
return ( return (
...@@ -14509,8 +15648,8 @@ export default class TableSubHolding extends Component { ...@@ -14509,8 +15648,8 @@ export default class TableSubHolding extends Component {
<div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}> <div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.props.type === 7 ? datas : dataTable2} data={this.props.type === 7 ? dataSummaryBS : this.props.type === 8 ? dataSummaryPL : this.props.type === 9 ? dataSummaryFR : dataTable2}
columns={this.props.type === 2 ? columnDBBS : this.props.type === 1 ? columnDBPLDetail : this.props.type === 3 ? columnDBPL : this.props.type === 4 ? columnDBFR : this.props.type === 5 ? columnDBTP : this.props.type === 7 ? columnDBCF : this.props.type === 21 ? columnDBOI : this.props.type === 6? columnDBCF : columns} columns={this.props.type === 2 ? columnDBBS : this.props.type === 1 ? columnDBPLDetail : this.props.type === 3 ? columnDBPL : this.props.type === 4 ? columnDBFR : this.props.type === 5 ? columnDBTP : this.props.type === 7 ? columnSummaryBS : this.props.type === 21 ? columnDBOI : this.props.type === 6? columnDBCF : this.props.type === 8 ? columnSummaryPL : this.props.type === 9 ? columnSummaryFR : columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
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