ProfitLossMR.js

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 api from '../../api';

const LightTooltip = withStyles((theme) => ({
    tooltip: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}))(Tooltip);

var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());

const options = ct.customOptionsFixedColumn();

const style = {
    position: "sticky",
    left: 0,
    zIndex: 101,
    background: "white",
};
const style2 = {
    position: "sticky",
    background: "white",
    zIndex: 100,
    top: 0
};
const stylenotes = {
    position: "sticky",
    background: "white",
    zIndex: 101,
    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: [],
            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: {
                    customHeadRender: (columnMeta) => (
                        <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, 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[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) => (
                        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>
                    ),
                    setCellProps: () => ({
                        style: {
                            position: "sticky",
                            background: "white",
                            zIndex: 101,
                            left: 350
                        }
                      }),
                    customBodyRender: (value, tableMeta, updateValue) => {
                        return (
                            <div style={{ textAlign: 'right' }}>
                                <div style={{ flex: 1 }}>
                                    {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: '#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 }}>
                                {tableMeta.rowData[0] === 4 ?
                                    null :
                                    val
                                }
                            </div>
                        )
                    }
                }
            },
            {
                name: `Month To Date (MTD)`,
                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 }} >
                            {/* <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: 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', 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: '#37b5e6', height: '100%' }}>
                                    <span>{"Actual"}</span>
                                </div>
                            </div>
                        </th>
                    ),
                    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 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.mb
                                            }
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.rb
                                            }
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.actual
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            },
            {
                name: "YTD Actual",
                options: {
                    customHeadRender: (columnMeta) => (
                        <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>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div style={{ textAlign: 'right', width: 90 }}>
                                {tableMeta.rowData[0] === 4 ?
                                    null :
                                    val
                                }
                            </div>
                        )
                    }
                }
            },
            {
                name: "Actual Previous Month",
                options: {
                    customHeadRender: (columnMeta) => (
                        <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>
                    ),
                    setCellProps: () => ({ style2 }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div style={{ textAlign: 'right', width: 90 }}>
                                {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", 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, 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">
                                        <div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
                                            <span>{"Amount"}</span>
                                        </div>
                                        <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', 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">
                                        <div className="column-1" style={{ borderRight: '1px #fff solid' }}>
                                            <span>{"Amount"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
                                            <span>{"%"}</span>
                                        </div>
                                    </div>
                                </div>
                                <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">
                                        <div className="column-1" style={{ borderRight: '1px #fff solid' }}>
                                            <span>{"Amount"}</span>
                                        </div>
                                        <div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
                                            <span>{"%"}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                    ),
                    setCellProps: () => ({
                        style: {
                            paddingLeft: 0,
                            paddingRight: 0
                        }
                    }),
                    customBodyRender: (val, tableMeta, updateValue) => {
                        return (
                            <div>
                                <div className="grid grid-3x content-center">
                                    <div className="column-1">
                                        <div className="grid grid-2x content-center">
                                            <div className="column-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.aavpm
                                                    }
                                                </div>
                                            </div>
                                            <div className="column-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.pavpm
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="column-2">
                                        <div className="grid grid-2x content-center">
                                            <div className="column-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.aavmb
                                                    }
                                                </div>
                                            </div>
                                            <div className="column-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.pavmb
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="column-3">
                                        <div className="grid grid-2x content-center">
                                            <div className="column-1">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.aavrb
                                                    }
                                                </div>
                                            </div>
                                            <div className="column-2">
                                                <div style={{ textAlign: 'right', width: 90 }}>
                                                    {tableMeta.rowData[0] === 4 ?
                                                        null :
                                                        val.pavrb
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            },
            {
                name: `MTD Explanation`,
                options: {
                    customHeadRender: (columnMeta) => (
                        <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", 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", 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, justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45, backgroundColor: '#07a7d0' }}>
                                    <span>{"vs RB"}</span>
                                </div>
                            </div>
                        </th>
                    ),
                    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 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.mtdvpm
                                            }
                                        </div>
                                    </div>
                                    <div className="col-2">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.mtdvmb
                                            }
                                        </div>
                                    </div>
                                    <div className="col-3">
                                        <div style={{ textAlign: 'right', width: 90 }}>
                                            {tableMeta.rowData[0] === 4 ?
                                                null :
                                                val.mtdvrb
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }
                }
            },
        ]

        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 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Profit Loss</Typography>
                        </div>
                        <div style={{ padding: 20 }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                                </div>
                                <div style={{ width: '50%' }}>
                                    <div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
                                        <a data-tip={'Download Template'} data-for="template">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => null}
                                            >
                                                <img src={Images.template} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
                                        <a data-tip={'Upload'} data-for="upload">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => null}
                                            >
                                                <img src={Images.upload} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
                                        <a data-tip={'Download'} data-for="download">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => null}
                                            >
                                                <img src={Images.download} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                                    </div>
                                </div>
                            </div>

                            <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
                                {!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' }}>Back</Typography>
                                        </div>
                                    </button>
                                </div>
                        </div>
                    </Paper>
                </div>
            </div>
        )
    }
}