FixedAssetsMovement.js

import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';

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

const options = ct.customOptionsFixedColumn();
const style = {
    position: "sticky",
    left: 0,
    background: "white",
    zIndex: 101,
};
const style2 = {
    position: "sticky",
    left: 420,
    background: "white",
    zIndex: 101
};

export default class FixedAssetsMovement extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [
                // ["COST", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181", "9,884,181"],
                // ["Control", "-", "-"],
                // ["Accumulated Depreciation (negative value)", "2,647,647", "2,058,898"],
                // ["Control", "-", "-"],
                // ["Gain / (Loss) on Fixed Assets", "-", "-"],
                // ["Control", "-", "-"]
            ]
        }
        this.handleValue = this.handleValue.bind(this)
    }

    componentDidMount() {
        this.getItemHierarki()
        console.log(this.props);
    }

    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
        }
        api.create().getItemReportHierarki(payload).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === "success") {
                    let dataTable = []
                    response.data.data.map((item, index) => {
                        if (item.children && item.children.length > 0) {
                            dataTable.push([
                                item.type_report_id,
                                item.id,
                                item.parent,
                                item.formula,
                                item.level,
                                item.description
                            ])
                            item.children.map(i => {
                                if (i.children) {
                                    if (i.children.length > 0) {
                                        dataTable.push([
                                            i.type_report_id,
                                            i.id,
                                            i.parent,
                                            i.formula,
                                            i.level,
                                            i.description
                                        ])
                                        i.children.map(val => {
                                            if (val.children && val.children.length > 0) {
                                                dataTable.push([
                                                    val.type_report_id,
                                                    val.id,
                                                    val.parent,
                                                    val.formula,
                                                    val.level,
                                                    val.description
                                                ])
                                                val.children.map(items => {
                                                    console.log(items)
                                                    dataTable.push([
                                                        items.type_report_id,
                                                        items.id,
                                                        items.parent,
                                                        items.formula,
                                                        items.level,
                                                        items.description
                                                    ])
                                                })
                                            } else {
                                                dataTable.push([
                                                    val.type_report_id,
                                                    val.id,
                                                    val.parent,
                                                    val.formula,
                                                    val.level,
                                                    val.description
                                                ])
                                            }
                                        })
                                    } else {
                                        dataTable.push([
                                            i.type_report_id,
                                            i.id,
                                            i.parent,
                                            i.formula,
                                            i.level,
                                            i.description
                                        ])
                                    }
                                } else {
                                    dataTable.push([
                                        i.type_report_id,
                                        i.id,
                                        i.parent,
                                        i.formula,
                                        i.level,
                                        i.description
                                    ])
                                }
                            })
                        } else {
                            dataTable.push([
                                item.type_report_id,
                                item.id,
                                item.parent,
                                item.formula,
                                item.level,
                                item.description
                            ])
                        }
                    })
                    console.log(dataTable);
                    this.setState({ dataTable })
                }
            }
        })
    }

    handleValue(data) {
        let total = 0
        this.state.dataTable.map((item, index) => {
            if (data.rowData[1] == item[2]) {
                total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
            }
        })
        let indexParent = this.state.dataTable.findIndex((val) => val[1] == this.state.dataTable[data.rowIndex][2])
        let a = this.state.dataTable[data.rowIndex][data.columnIndex] = total
        // console.log(indexParent);
        return a
    }

    handleChange(value, tableMeta) {
        let val = String(value).split(",").join("")
        let data = this.state.dataTable
        let indexParent = data.findIndex((val) => val[1] == data[tableMeta.rowIndex][2])
        if (indexParent > 0) {
            // console.log(indexParent)
            let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
            let jagain = data[indexParent][tableMeta.columnIndex]
            a = data[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
        } else {
            data[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
        }
        // this.forceUpdate()
        // console.log(this.state.dataTable)
    }

    render() {
        let dataTable2 = this.state.dataTable
        const handleChange = (value, tableMeta) => {
            let val = String(value).split(",").join("")
            // let data = this.state.dataTable2
            let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[tableMeta.rowIndex][2])
            if (indexParent > 0) {
                // console.log(indexParent)
                let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
                let jagain = dataTable2[indexParent][tableMeta.columnIndex]
                a = dataTable2[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (jagain + Number(val))
            } else {
                dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
            }
        }
        const handleValue = (data) => {
            let total = 0
            dataTable2.map((item, index) => {
                if (data.rowData[1] == item[2]) {
                    total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[data.rowIndex][2])
            let a = dataTable2[data.rowIndex][data.columnIndex] = Number(total)
            // console.log(indexParent);
            return a
        }
        const 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: '#354960', width: 388 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                       <div style={{ width: 388 }}>
                            {tableMeta.rowData[4] == 0 ?
                                <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                :
                                tableMeta.rowData[4] === 1 ?
                                    <span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> :
                                    <span style={{ fontSize: 12, marginLeft: 20 * Number(tableMeta.rowData[4]) }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2020  Actual",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "January 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "February 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "March 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "April 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "May 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "June 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "July 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "August 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "September 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "October 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "November 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "December 2021",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "Current Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2022 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2023 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 3 ?
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                value={value}
                                                onBlur={(event) => {
                                                    // updateValue(event.target.value)
                                                    handleChange(event.target.value, tableMeta)
                                                    console.log(dataTable2)
                                                }}
                                            />
                                        }
                                    />
                                </div> :
                                tableMeta.rowData[0] === 2 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={handleValue(tableMeta)}
                                        />
                                    </span>
                                    :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        :
                                        tableMeta.rowData[0] === 6 ?
                                            <span>Formula</span>
                                            :
                                            tableMeta.rowData[0] === 5 ?
                                                <span>Formula Summary</span>
                                                :
                                                tableMeta.rowData[0] === 1 ?
                                                    value === "" ?
                                                        null :
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(value)}
                                                        />
                                                    :
                                                    <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }
        ]

        // console.log(this.props.width);

        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' }}>Pengajuan Budget Tahunan</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 }}>Budget Tahunan - Fixed Assets Movement</Typography>
                        </div>
                        <div style={{ padding: 20 }}>
                            <div>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : {this.props.periode}</Typography>
                                <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                            </div>

                            <div style={{ marginTop: 20, width: this.props.width - 200, height: this.props.height-200 }}>
                                <MuiThemeProvider theme={getMuiTheme()}>
                                    <MUIDataTable
                                        data={dataTable2}
                                        columns={columns}
                                        options={options}
                                    />
                                </MuiThemeProvider>
                            </div>
                        </div>
                        <div className="grid grid-2x">
                            <div className="col-1">
                                <button
                                    className="button"
                                    type="button"
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                    }}
                                    onClick={() => this.props.onClickClose()}
                                >
                                    <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 className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%'}}>
                                <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
                                    <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Cancel</Typography>
                                </div>
                                <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', marginRight: 20 }}>
                                    <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
                                </div>
                                <button
                                    className="button"
                                    type="button"
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                    }}
                                    onClick={() => this.forceUpdate()}
                                >
                                    <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Calculate</Typography>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </Paper>
                </div>
            </div>
        );
    }
}