Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
11eab1f5
Commit
11eab1f5
authored
Jan 25, 2021
by
faisalhamdi
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://103.44.149.204/d.arizona/tia-dev
into faisal
parents
268cc999
9747c8f0
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
1457 additions
and
2 deletions
+1457
-2
SubHolding.js
src/container/Laporan/SubHolding.js
+316
-0
TableSubHolding.js
src/container/Laporan/TableSubHolding.js
+1141
-2
No files found.
src/container/Laporan/SubHolding.js
View file @
11eab1f5
...
...
@@ -33,6 +33,9 @@ export default class SubHolding extends Component {
{
value
:
5
,
label
:
'DB Tax Planning'
},
{
value
:
21
,
label
:
'DB Operating Indicator'
},
{
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
,
loading
:
false
,
...
...
@@ -988,7 +991,320 @@ export default class SubHolding extends Component {
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
)
{
...
...
src/container/Laporan/TableSubHolding.js
View file @
11eab1f5
...
...
@@ -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" }]
]
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 = [{
name: "",
options: {
...
...
@@ -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 = []
return (
...
...
@@ -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) }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data
=
{
this
.
props
.
type
===
7
?
data
s
:
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
?
column
DBCF
:
this
.
props
.
type
===
21
?
columnDBOI
:
this
.
props
.
type
===
6
?
columnDBCF
:
columns
}
data={this.props.type === 7 ? data
SummaryBS : 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 ? column
SummaryBS : this.props.type === 21 ? columnDBOI : this.props.type === 6? columnDBCF : this.props.type === 8 ? columnSummaryPL : this.props.type === 9 ? columnSummaryFR
: columns}
options={options}
/>
</MuiThemeProvider>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment