TaxPlanning.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 Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
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 TaxPlanning extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [
                // ["TOTAL ASSETS", "11,247,249", "10,702,196"],
                // ["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
                // ["Cash & Cash Equivalent", "1,464,571", "729,743"],
                // ["Cash & Bank Balance", "938,707", "265,584"],
                // ["Time & Call Deposit", "525,864", "464,159"],
                // ["BI Deposit", "", ""],
                // ["Marketable Securities", "150,250", "154,500"],
                // ["Notes Receivable", "", ""],
                // ["Accounts Receivable", "172,031", "97,112"],
                // ["Trade Receivables - Third Party", "142,668", "77,480"],
            ]
        }
    }
    
    componentDidMount() {
        this.getItemHierarki()
        console.log(this.props);
    }

    getItemHierarki() {
        let payload = {
            "report_id": this.props.report_id,
            "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.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.level,
                                            i.description
                                        ])
                                        i.children.map(val => {
                                            dataTable.push([
                                                val.type_report_id,
                                                val.id,
                                                val.parent,
                                                val.level,
                                                val.description
                                            ])
                                        })
                                    } else {
                                        dataTable.push([
                                            i.type_report_id,
                                            i.id,
                                            i.parent,
                                            i.level,
                                            i.description
                                        ])
                                    }
                                } else {
                                    dataTable.push([
                                        i.type_report_id,
                                        i.id,
                                        i.parent,
                                        i.level,
                                        i.description
                                    ])
                                }
                            })
                        } else {
                            dataTable.push([
                                item.type_report_id,
                                item.id,
                                item.parent,
                                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 ? (total + 0) : (total + 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) {
            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)
        // this.setState({
        //     data: a,
        // }, () => console.log(this.state.dataTable))
    }

    render() {
        const columns = [{
            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[3] == 0 ?
                                <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(val).toUpperCase()}</span>
                                :
                                tableMeta.rowData[3] === 1?
                                    <span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span> :
                                    <span style={{ fontSize: 12, marginLeft: 40 }}>{val}</span>
                            }
                        </div>
                    )
                }
            }
        // }, {
        //     name: "31 Dec 2020  Actual",
        //     options: {
        //         customHeadRender: (columnMeta) => (
        //             <TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
        //                 <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
        //             </TableCell>
        //         ),
        //         setCellProps: () => ({
        //             style: {
        //                 position: "sticky",
        //                 left: 420,
        //                 background: "white",
        //                 zIndex: 101
        //             }
        //         })
        //     }
        }, {
            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>
                ),
                customBodyRender: (value, tableMeta, updateValue) => {
                    console.log(tableMeta)
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 ?
                                <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="input"
                                                value={value}
                                                onChange={event => {
                                                    // console.log(event.target)
                                                    updateValue(event.target.value)
                                                    this.handleChange(event.target.value, tableMeta)
                                                }}
                                            />
                                        }
                                    />
                                </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={this.handleValue(tableMeta)}
                                        />
                                    </span>
                                :
                                tableMeta.rowData[0] === 1 ?
                                <span>-</span>
                                :
                                <span>validasi</span>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "February 2021",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <th key={3} style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, border: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span>{"Trial Balance (Commercial) MTD"}</span>
                            </div>
                            <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span>{"Fiscal Correction Positive /(Negative)"}</span>
                            </div>
                            <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span>{"Trial Balance (Fiscal) MTD"}</span>
                            </div>
                        </div>
                    </th>
                ),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="column-1" style={{ paddingRight: 20}}>
                                    {99}
                                </div>
                                <div className="column-2" style={{ }}>
                                    {tableMeta.rowData[0] === 4 ?
                                        <div style={{ flex: 1 }}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={value}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ color: "#5198ea", fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: '100%', backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder="input"
                                                        value={value}
                                                        onChange={event => {
                                                            // console.log(event.target)
                                                            updateValue(event.target.value)
                                                            this.handleChange(event.target.value, tableMeta)
                                                        }}
                                                    />
                                                }
                                            />
                                        </div> :
                                        tableMeta.rowData[0] === 2 ?
                                            <span style={{ fontSize: 12, textAlign: 'center' }}>
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'center', borderColor: 'transparent', margin: 0, width: '100%', backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={this.handleValue(tableMeta)}
                                                />
                                            </span>
                                            :
                                            tableMeta.rowData[0] === 1 ?
                                                <span>-</span>
                                                :
                                                <span>validasi</span>
                                    }
                                </div>
                                <div className="column-3" style={{ paddingLeft: 35}}>
                                    {99}
                                </div>
                            </div>
                        </div>
                    );
                }
            }
        }, {
            name: "March 2021",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <th style={{ cursor: 'pointer', backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, border: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderBottom: "1px #fff solid", textAlign: 'center', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ backgroundColor: '#354960', color: '#fff', fontSize: 13, fontWeight: 1, position: "sticky" }}>
                            <div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span style={{ textAlign: 'center' }}>{"Trial Balance (Commercial) MTD"}</span>
                            </div>
                            <div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span>{"Fiscal Correction Positive /(Negative)"}</span>
                            </div>
                            <div style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
                                <span>{"Trial Balance (Fiscal) MTD"}</span>
                            </div>
                        </div>
                    </th>
                ),
                customBodyRender: (val) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="col-1">
                                    {val}
                                </div>
                                <div className="col-2">
                                    {val}
                                </div>
                                <div className="col-3">
                                    {val}
                                </div>
                            </div>
                        </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>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </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>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </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>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2021 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2022 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }, {
            name: "31 Dec 2023 Total",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ backgroundColor: '#354960', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val) => {
                    return (
                        <div style={{ width: 96 }}>
                            {val}
                        </div>
                    )
                }
            }
        }
        ]
        
        return (
            <div style={{ height: this.props.height }}>
                <div class="main-color" style={{ height: 279, width: '100%' }} />
                <div>
                    <div style={{ alignItems: 'center', paddingLeft: 25, marginTop: -229 }} >
                        <Typography style={{ fontSize: '16px', color: 'white' }}>Master Budget - Tax Planning</Typography>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: 45 }}>
                        {/* <label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Budget - Tax Planning</label> */}
                        <div>
                            <Typography style={{ fontSize: '11px', color: 'white' }}>{this.props.company.company_name} Company</Typography>
                            <Typography style={{ fontSize: '11px', color: 'white' }}>Periode : 2021</Typography>
                            <Typography style={{ fontSize: '11px', color: 'white' }}>in IDR mn</Typography>
                        </div>
                        <div style={{ width: '30%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
                            <a data-tip={'Download Template'} data-for="template">
                                <button
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                        padding: 0,
                                        margin: 5
                                    }}
                                    // onClick={() => this.downloadFile()}
                                >
                                    <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',
                                        marginLeft: 16,
                                        padding: 0,
                                        margin: 5
                                    }}
                                    // onClick={() => this.setState({ visibleUpload: true })}
                                >
                                    <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',
                                        marginLeft: 16,
                                        padding: 0,
                                        margin: 5
                                    }}
                                    // onClick={() => this.downloadDataTable()}
                                >
                                    <img src={Images.download} />
                                </button>
                            </a>
                            <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                        </div >
                    </div>
                    <div style={{ padding: 25, width: '100%' }}>
                        <MuiThemeProvider theme={getMuiTheme()}>
                            <MUIDataTable
                                data={this.state.dataTable}
                                columns={columns}
                                options={options}
                            />
                        </MuiThemeProvider>
                    </div>
                    <div className="grid grid-2x" style={{ marginBottom: 20, paddingRight: 10, paddingLeft: 10 }}>
                        <div className="col-1">
                            <div onClick={() => this.props.onClickClose()} style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
                                <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
                            </div>
                        </div>
                        <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
                            <div onClick={() => this.props.onClickClose()} style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', cursor: 'pointer', 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', cursor: 'pointer' }}>
                                <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save</Typography>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            // <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' }}>Budget Tahunan - Tax Planning</Typography>
            //     </div>
            //     <div style={{ flex: 1, padding: 20, width: '100%' }}>
            //         {/* <Paper style={{ paddingTop: 10 }}>
            //             <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
            //                 <Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
            //             </div> */}
            //             <div style={{ padding: 20 }}>
            //                 <div>
            //                     <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
            //                     <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
            //                     <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
            //                 </div>

            //                 <div style={{ marginTop: 20, width: '100%' }}>
            //                     <MuiThemeProvider theme={getMuiTheme()}>
            //                         <MUIDataTable
            //                             data={dataTable}
            //                             columns={columns}
            //                             options={options}
            //                         />
            //                     </MuiThemeProvider>
            //                 </div>
            //             </div>
            //         {/* </Paper> */}
            //     </div>
            // </div>
        );
    }
}