Skip to content

T
Tia-dev
Commit 2a8f0979 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'riri' into 'master' 

monthly pl

See merge request !665
parents b0faafcb b5ed8d3c
Hide whitespace changes
Inline Side-by-side
Showing with 679 additions and 211 deletions
src/api/index.js
View file @ 2a8f0979
......@@ -257,6 +257,9 @@ const create = (type = "") => {
const getHierarkiMontlyReportOI = (body) => api.post('transaction/monthly_report_oi/get_report_hierarki', body)
const getHierarkiMontlyReportTP = (body) => api.post('transaction/monthly_report_tp/get_report_hierarki', body)
// MonthlyPL
const getHierarkiMontlyReportPL = (body) => api.post('transaction/monthly_report_pl/get_report_hierarki', body)
//Template
const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
......@@ -446,6 +449,7 @@ const create = (type = "") => {
getMonthlyReportID,
getReportHierarkiFR,
getDetailHierarkiCF,
getHierarkiMontlyReportPL
}
}
......
src/container/MonthlyReport.js
View file @ 2a8f0979
......@@ -761,7 +761,8 @@ export default class MonthlyReport extends Component {
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
submissionID={this.state.submissionID}
monthlyReportId={this.state.monthlyReportId}
month={this.state.month}
// saveToMasterBudget={this.saveToMasterBudget.bind(this)}
onClickClose={() => this.setState({ visiblePL: false, visibleMonthlyReport: true })}
// getReport={this.getCompanyActive.bind(this)}
......
src/container/MonthlyReport/ProfitLossMR.js
View file @ 2a8f0979
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography, Tooltip, withStyles, Input, FormControlLabel } from '@material-ui/core'
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip';
import Images from '../../assets/Images';
import NumberFormat from 'react-number-format';
import api from '../../api';
const LightTooltip = withStyles((theme) => ({
tooltip: {
......@@ -38,15 +38,163 @@ const stylenotes = {
left: 350
};
const styleNotesEmpty = {
position: "sticky",
background: "white",
zIndex: 99,
left: 0
}
export default class ProfitLossMR extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: []
dataTable: [],
loading: true
}
}
componentDidMount() {
this.getItemHierarki()
}
getItemHierarki() {
let payload = {
"report_id": this.props.report_id,
"revision": Number(this.props.revision),
"periode": this.props.periode,
"company_id": this.props.company.company_id,
"monthly_report_id": this.props.monthlyReportId,
"month": this.props.month.month_id
}
api.create().getHierarkiMontlyReportPL(payload).then(response => {
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.profit_loss.notes === "" ? null : item.profit_loss.notes,
item.profit_loss.rolling_outlook === null ? "0.0" : item.profit_loss.rolling_outlook === "" ? "0.0" : item.profit_loss.rolling_outlook,
{
mb: item.profit_loss.master_budget === "" ? "0.0" : item.profit_loss.master_budget,
rb: item.profit_loss.rolling_budget === "" ? "0.0" : item.profit_loss.rolling_budget,
actual: item.profit_loss.actual === "" ? "0.0" : item.profit_loss.actual
},
item.profit_loss.ytd_actual === null ? "0.0" : item.profit_loss.ytd_actual === "" ? "0.0" : item.profit_loss.ytd_actual,
item.profit_loss.actual_previous_month === null ? "0.0" : item.profit_loss.actual_previous_month === "" ? "0.0" : item.profit_loss.actual_previous_month,
{
aavpm: item.profit_loss.amount_act_vs_previous_month === "" ? "0.0" : item.profit_loss.amount_act_vs_previous_month,
pavpm: item.profit_loss.percent_act_vs_previous_month === "" ? "0.0" : item.profit_loss.percent_act_vs_previous_month,
aavmb: item.profit_loss.amount_act_vs_mb === "" ? "0.0" : item.profit_loss.amount_act_vs_mb,
pavmb: item.profit_loss.percent_act_vs_mb === "" ? "0.0" : item.profit_loss.percent_act_vs_mb,
aavrb: item.profit_loss.amount_act_vs_rb === "" ? "0.0" : item.profit_loss.amount_act_vs_rb,
pavrb: item.profit_loss.percent_act_vs_rb === "" ? "0.0" : item.profit_loss.percent_act_vs_rb,
},
{
mtdvpm: item.profit_loss.mtd_vs_previous_month === "" ? "0.0" : item.profit_loss.mtd_vs_previous_month,
mtdvmb: item.profit_loss.mtd_vs_mb === "" ? "0.0" : item.profit_loss.mtd_vs_mb,
mtdvrb: item.profit_loss.mtd_vs_rb === "" ? "0.0" : item.profit_loss.mtd_vs_rb,
}
])
}
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_loss.notes === "" ? null : item.profit_loss.notes,
item.profit_loss.rolling_outlook === null ? "0.0" : item.profit_loss.rolling_outlook === "" ? "0.0" : item.profit_loss.rolling_outlook,
{
mb: item.profit_loss.master_budget === "" ? "0.0" : item.profit_loss.master_budget,
rb: item.profit_loss.rolling_budget === "" ? "0.0" : item.profit_loss.rolling_budget,
actual: item.profit_loss.actual === "" ? "0.0" : item.profit_loss.actual
},
item.profit_loss.ytd_actual === null ? "0.0" : item.profit_loss.ytd_actual === "" ? "0.0" : item.profit_loss.ytd_actual,
item.profit_loss.actual_previous_month === null ? "0.0" : item.profit_loss.actual_previous_month === "" ? "0.0" : item.profit_loss.actual_previous_month,
{
aavpm: item.profit_loss.amount_act_vs_previous_month === "" ? "0.0" : item.profit_loss.amount_act_vs_previous_month,
pavpm: item.profit_loss.percent_act_vs_previous_month === "" ? "0.0" : item.profit_loss.percent_act_vs_previous_month,
aavmb: item.profit_loss.amount_act_vs_mb === "" ? "0.0" : item.profit_loss.amount_act_vs_mb,
pavmb: item.profit_loss.percent_act_vs_mb === "" ? "0.0" : item.profit_loss.percent_act_vs_mb,
aavrb: item.profit_loss.amount_act_vs_rb === "" ? "0.0" : item.profit_loss.amount_act_vs_rb,
pavrb: item.profit_loss.percent_act_vs_rb === "" ? "0.0" : item.profit_loss.percent_act_vs_rb,
},
{
mtdvpm: item.profit_loss.mtd_vs_previous_month === "" ? "0.0" : item.profit_loss.mtd_vs_previous_month,
mtdvmb: item.profit_loss.mtd_vs_mb === "" ? "0.0" : item.profit_loss.mtd_vs_mb,
mtdvrb: item.profit_loss.mtd_vs_rb === "" ? "0.0" : item.profit_loss.mtd_vs_rb,
}
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
this.setState({ dataTable, loading: false })
}
})
}
render() {
let dataTable2 = this.state.dataTable
const handleNotes = (value, tableMeta) => {
console.log(value)
let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = value
console.log(dataTable2[tableMeta.rowIndex]);
}
let columns = [
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "Account",
options: {
......@@ -59,17 +207,37 @@ export default class ProfitLossMR extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{val}
{tableMeta.rowData[0] === null ?
tableMeta.rowData[4] == 0 ?
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, fontWeight: 'bold', color: 'red' }}>{String(val).toUpperCase()}</span>
</LightTooltip> :
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</LightTooltip>
</div>
:
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
},
{
}, {
name: "Notes",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...stylenotes, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96, borderLeft: '1px #fff solid'}}>
dataTable2.length > 0 ?
<TableCell style={{ ...stylenotes, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> :
<TableCell style={{ ...styleNotesEmpty, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
......@@ -81,44 +249,51 @@ export default class ProfitLossMR extends Component {
left: 350
}
}),
customBodyRender: (val, tableMeta) => {
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
// value={value}
control={
<Input
disableUnderline={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
// disabled={this.props.isApprover ? true : ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? false : true)}
defaultValue=""
/>
}
/>
{tableMeta.rowData[0] === 3 ?
<FormControlLabel
style={{ margin: 0 }}
// value={value}
control={
<Input
disableUnderline={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'left', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
// disabled={this.props.isApprover ? true : ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? false : true)}
defaultValue={value}
onBlur={(event) => {
// updateValue(event.target.value)
handleNotes(event.target.value, tableMeta)
// console.log(dataTable2)
}}
/>
}
/>: null}
</div>
</div>
)
}
}
},
{
}, {
name: "Rolling Outlook (FY2021)",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderLeft: '1px #fff solid', borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'black', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#07a7d0', width: 96, borderLeft: '1px #fff solid', borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{val}
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
......@@ -130,40 +305,55 @@ export default class ProfitLossMR extends Component {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', 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', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 52, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky", height: 25 }}>
<div className="column-1" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', color: 'black', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6', height: '100%' }}>
<span>{"Actual"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{tableMeta.rowData[0] === 4 ?
null :
val.mb
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{tableMeta.rowData[0] === 4 ?
null :
val.rb
}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{tableMeta.rowData[0] === 4 ?
null :
val.actual
}
</div>
</div>
</div>
......@@ -171,11 +361,12 @@ export default class ProfitLossMR extends Component {
)
}
}
},{
},
{
name: "YTD Actual",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#07a7d0', width: 96, borderRight: '1px #fff solid' }}>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
......@@ -183,7 +374,10 @@ export default class ProfitLossMR extends Component {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{val}
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
......@@ -193,7 +387,7 @@ export default class ProfitLossMR extends Component {
name: "Actual Previous Month",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#07a7d0', width: 96, borderRight: '1px #fff solid' }}>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
......@@ -201,54 +395,57 @@ export default class ProfitLossMR extends Component {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{val}
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
},
},
{
name: `Variance`,
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 }}>{columnMeta.name}</div>
<div style={{ borderBottom: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#07a7d0', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Act vs Previous Month"}</span>
</div>
<div className="grid grid-2x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs MB"}</span>
</div>
<div className="grid grid-2x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', color: 'black' }}>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', color: 'black' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs RB"}</span>
</div>
<div className="grid grid-2x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', color: 'black' }}>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#37b5e6', color: 'black' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
......@@ -256,49 +453,72 @@ export default class ProfitLossMR extends Component {
</div>
</th>
),
setCellProps: () => ({ style2 }),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div className="column-1">
<div className="grid grid-2x content-center">
<div className="col-1">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{tableMeta.rowData[0] === 4 ?
null :
val.aavpm
}
</div>
</div>
<div className="col-2">
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{tableMeta.rowData[0] === 4 ?
null :
val.pavpm
}
</div>
</div>
</div>
</div>
<div className="col-2">
<div className="column-2">
<div className="grid grid-2x content-center">
<div className="col-1">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{tableMeta.rowData[0] === 4 ?
null :
val.aavmb
}
</div>
</div>
<div className="col-2">
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.d}
{tableMeta.rowData[0] === 4 ?
null :
val.pavmb
}
</div>
</div>
</div>
</div>
<div className="col-3">
<div className="column-3">
<div className="grid grid-2x content-center">
<div className="col-1">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.e}
{tableMeta.rowData[0] === 4 ?
null :
val.aavrb
}
</div>
</div>
<div className="col-2">
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.f}
{tableMeta.rowData[0] === 4 ?
null :
val.pavrb
}
</div>
</div>
</div>
......@@ -313,42 +533,56 @@ export default class ProfitLossMR extends Component {
name: `MTD Explanation`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', 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', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 50, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky", height: 25 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, backgroundColor: '#37b5e6' }}>
<span>{"vs Prev Month"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6', color: 'black' }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, backgroundColor: '#07a7d0' }}>
<span>{"vs MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6', color: 'black' }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, backgroundColor: '#07a7d0' }}>
<span>{"vs RB"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvpm
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvmb
}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvrb
}
</div>
</div>
</div>
......@@ -358,10 +592,7 @@ export default class ProfitLossMR extends Component {
}
},
]
let data = [
["Total Assets", "0", "1", { a: "2", b: "3", c: "4" }, "4.5", "5", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }, { a: "12", b: "13", c: "14" }],
["Total Assets", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
......@@ -428,36 +659,38 @@ export default class ProfitLossMR extends Component {
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
</div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Cancel</Typography>
</div>
</button>
</div>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
</div>
</Paper>
</div>
......
src/container/SummaryTriputra/TableSummaryTriputra.js
View file @ 2a8f0979
......@@ -24,15 +24,15 @@ const style2 = {
export default class TableSummaryTriputra extends Component {
render() {
let datas = [
["ABCD", { a: "1", b: "3", c: "4", d: "5", e: "6", f: "7" }, { a: "2", b: "3", c: "4", d: "5", e: "6", f: "7" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "8", b: "9", c: "10", d: "11", e: "12", f: "13" }, { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }]
["ABCD", { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3" } ],
["Total Assets", { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "7", b: "8", c: "9", d: "10", e: "11", f: "12" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }]
]
let datasHistorical = [
["ABCD", { a: "2", b: "3", c: "4", d: "5", e: "6", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "2", b: "3", c: "4", d: "5", e: "6" }, { a: "3", b: "3", c: "4", d: "5", e: "6" }, { a: "4", b: "3", c: "4", d: "5", e: "6" }, { a: "5", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }],
["Total Assets", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "1", g: "3", h: "4", i: "5", j: "6", k: "6" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "7", c: "8", d: "9", e: "10" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }, { a: "6", b: "3", c: "4", d: "5", e: "6" }]
]
let datasMTD = [
["ABCD", { a: "1", b: "3", c: "4" }, { a: "2", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }],
["ABCD", { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8", i: "9", j: "10", k: "11", l: "12" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4" }, { q: "1" }, { a: "1", b: "2", c: "3" }, { a: "1", b: "2", c: "3", d: "4" }, { a: "1", b: "2", c: "3", d: "4", e: "5", f: "6", g: "7", h: "8" }],
["Total Assets", { a: "6", b: "7", c: "8" }, { a: "6", b: "7", c: "8" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }, { a: "1", b: "3", c: "4" }]
]
let datasYTD = [
......@@ -66,66 +66,66 @@ export default class TableSummaryTriputra extends Component {
<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 }}>{columnMeta.name}</div>
<div className="grid grid-4x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 52 }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"Ravenue"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"% of MB"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"EBITDA"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"% of MB"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"TPAT"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"% of MB"}</span>
</div>
</div>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"NPAT"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"% of MB"}</span>
</div>
</div>
......@@ -137,7 +137,7 @@ export default class TableSummaryTriputra extends Component {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div className="grid grid-3x content-center">
<div className="col-1">
......@@ -161,17 +161,17 @@ export default class TableSummaryTriputra extends Component {
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{val.d}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{val.e}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{val.f}
</div>
</div>
</div>
......@@ -180,17 +180,17 @@ export default class TableSummaryTriputra extends Component {
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{val.g}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{val.h}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{val.i}
</div>
</div>
</div>
......@@ -199,17 +199,17 @@ export default class TableSummaryTriputra extends Component {
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
{val.j}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
{val.k}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
{val.l}
</div>
</div>
</div>
......@@ -225,74 +225,98 @@ export default class TableSummaryTriputra extends Component {
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 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"Ravenue"}</span>
<div className="grid grid-5x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"Cash Flow"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFO"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFI"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CFF"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Net CF"}</span>
</div>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"EBITDA"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"OS Bank Loan"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"TPAT"}</span>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"KI"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"Act"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"WC"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Others"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Total"}</span>
</div>
</div>
</div>
<div className="column-2 grid grid-2x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#07a7d0', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25 }}>
<span>{"Ravenue"}</span>
<div className="column-3" style={{ placeSelf: 'center', borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 65 }}>
<span>{"OS SHL"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"Balance Sheet"}</span>
</div>
<div className="grid grid-4x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Cash & Bank"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CA"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CL"}</span>
</div>
<div className="column-4" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Equity"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"Act"}</span>
</div>
</div>
<div className="column-5" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 65 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"Financial Ratio"}</span>
</div>
<div className="grid grid-2x" style={{ height: 25}}>
<div className="column-1 grid grid-4x" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CR"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"DER"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"% of MB"}</span>
<div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Debt to EBITDA"}</span>
</div>
<div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"to Interest"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', border: '1px #fff solid', backgroundColor: '#37b5e6', height: 52 }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', color: 'white', height: 25, color: 'black' }}>
<span>{"TPAT"}</span>
</div>
<div className="grid grid-3x" style={{ height: 25}}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"Act"}</span>
<div className="column-2 grid grid-4x" style={{ justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<div className="column-1" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"AR Days"}</span>
</div>
<div className="column-2" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"Inv Days"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"MB"}</span>
<div className="column-3" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"AP Days"}</span>
</div>
<div className="column-3" style={{ borderLeft: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0' }}>
<span>{"% of MB"}</span>
<div className="column-4" style={{ borderRight: '1px #fff solid', justifyContent: 'center', display: 'flex', alignItems: 'center', backgroundColor: '#07a7d0', height: 40 }}>
<span>{"CCC"}</span>
</div>
</div>
</div>
......@@ -304,11 +328,11 @@ export default class TableSummaryTriputra extends Component {
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="grid grid-5x content-center">
<div className="col-1">
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
<div style={{ textAlign: 'right' , width: 90 }}>
{val.a}
</div>
</div>
......@@ -322,15 +346,15 @@ export default class TableSummaryTriputra extends Component {
{val.c}
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'right', width: 90 }}>
{val.d}
</div>
</div>
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
</div>
</div>
<div className="col-3">
<div className="grid grid-3x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
......@@ -346,8 +370,94 @@ export default class TableSummaryTriputra extends Component {
{val.c}
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'right', width: 90 }}>
{val.d}
</div>
</div>
</div>
</div>
<div className="col-3">
<div className="grid grid-1x content-center">
<div className="col-1">
<div style={{ textAlign: 'right' }}>
11122234567
</div>
</div>
</div>
</div>
<div className="col-4">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
1
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
2
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
3
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'right', width: 90 }}>
4
</div>
</div>
</div>
</div>
<div className="col-5">
<div className="grid grid-2x content-center">
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'right' , width: 90 }}>
1
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right' , width: 90 }}>
2
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right' , width: 90 }}>
3
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'right' , width: 90 }}>
4
</div>
</div>
</div>
<div className="grid grid-4x content-center">
<div className="col-1">
<div style={{ textAlign: 'right' , width: 90 }}>
5
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right' , width: 90 }}>
6
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right' , width: 90 }}>
7
</div>
</div>
<div className="col-4">
<div style={{ textAlign: 'right' , width: 90 }}>
8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
......@@ -1475,7 +1585,7 @@ export default class TableSummaryTriputra extends Component {
}
}
}, {
name: `TPAT`,
name: `NPAT`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
......@@ -1528,6 +1638,65 @@ export default class TableSummaryTriputra extends Component {
</div>
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `TPAT`,
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 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"2020"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
<span>{"MB 2021"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ placeSelf: 'center', textAlign: 'center' }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "2px #fff solid", backgroundColor: '#37b5e6' }}>
<span>{"% of MB"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
<span>{"2022"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
<span>{"2023"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-2x content-center">
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
......@@ -1545,6 +1714,67 @@ export default class TableSummaryTriputra extends Component {
</div>
</div>
</div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'center', width: 90 }}>
{val.d}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'center', width: 90 }}>
{val.e}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'center', width: 90 }}>
{val.f}
</div>
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `TPAT`,
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 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#37b5e6' }}>
<span>{"OL 2021"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
<span>{"2022"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8' }}>
<span>{"2023"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{val.a}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{val.b}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{val.c}
</div>
</div>
</div>
</div>
)
......
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