OperatingIndicator.js

import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../../assets/Images';
import BalanceSheet from '../BudgetTahunan/BalanceSheet';

export default class BudgetTahunan extends Component {
    constructor(props) {
        super(props)
        this.state = {
            periode: '2020',
            perusahaan: 'TAP Group',
            revisi: '0',
            visibleBudgetTahunan: true,
            visibleBalanceSheet: false
        }
    }
    render() {
        const columns = ["#", "Jenis Laporan",
            {
                name: "Status",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
                                {val == 'done' ?
                                    <img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
                                    null
                                }
                            </div >
                        );
                    }
                }
            },
            {
                name: "Action",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        return (
                            <div style={{ display: 'flex' }}>
                                <button
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent'
                                    }}
                                    onClick={() => this.setState({ visibleBudgetTahunan: false, visibleBalanceSheet: true })}
                                >
                                    <Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
                                </button>
                            </div >
                        );
                    }
                }
            }]
        const dataTable = [
            ["1", "Balance Sheet", "done"],
            ["2", "Profit & Loss", ""],
            ["3", "CAT", "done"],
            ["4", "Fixed Assets Movement", ""],
            ["5", "Tax Planning", "done"],
            ["6", "Balance Sheet", "done"],
            ["7", "Profit & Loss", ""],
            ["8", "CAT", "done"],
            ["9", "Fixed Assets Movement", ""],
            ["10", "Tax Planning", "done"],
            ["11", "Balance Sheet", "done"],
            ["12", "Profit & Loss", "done"],
            ["13", "CAT", "done"],
            ["14", "Fixed Assets Movement", "done"],
            ["15", "Tax Planning", "done"],
        ]
        const options = {
            filter: false,
            sort: false,
            responsive: "scroll",
            print: false,
            download: false,
            selectableRows: false,
            viewColumns: false,
            rowsPerPage: 5,
            rowsPerPageOptions: [5, 25, 100],
            search: false
        }
        const periode = [
            { value: '2020', label: '2020' },
            { value: '2019', label: '2019' },
            { value: '2018', label: '2018' },
            { value: '2017', label: '2017' },
            { value: '2016', label: '2016' },
        ]
        const perusahaan = [
            { value: 'TAP Group', label: 'TAP Group' },
            { value: '2019', label: '2019' },
            { value: '2018', label: '2018' },
            { value: '2017', label: '2017' },
            { value: '2016', label: '2016' },
        ]
        const revisi = [
            { value: '0', label: '0' },
            { value: '1', label: '1' },
        ]
        return (
            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
                {this.state.visibleBudgetTahunan && (
                    <div>
                        <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                            <Typography style={{ fontSize: '16px', color: 'white' }}>Operating Indicator</Typography>
                        </div>
                        <div style={{ padding: 20, width: '100%' }}>
                            <Paper style={{ paddingTop: 10 }}>
                                <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                                    <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Operating Indicator</Typography>
                                </div>
                                <div style={{ padding: 20 }}>
                                    <div>
                                        <TextField
                                            style={{ width: 250, }}
                                            id="periode"
                                            select
                                            label="Periode"
                                            value={this.state.periode}
                                            onChange={(e) => this.setState({ periode: e.target.value })}
                                        >
                                            {periode.map((option) => (
                                                <MenuItem key={option.value} value={option.value}>
                                                    {option.label}
                                                </MenuItem>
                                            ))}
                                        </TextField>
                                    </div>
                                    <div style={{ marginTop: 20 }}>
                                        <TextField
                                            style={{ width: 250, }}
                                            id="perusahaan"
                                            select
                                            label="Perusahaan"
                                            value={this.state.perusahaan}
                                            onChange={(e) => this.setState({ perusahaan: e.target.value })}
                                        >
                                            {perusahaan.map((option) => (
                                                <MenuItem key={option.value} value={option.value}>
                                                    {option.label}
                                                </MenuItem>
                                            ))}
                                        </TextField>
                                    </div>
                                    <div style={{ marginTop: 20 }}>
                                        <MUIDataTable
                                            data={dataTable}
                                            columns={columns}
                                            options={options}
                                        />
                                    </div>
                                </div>
                                <div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
                                    <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
                                    </div>
                                </div>
                            </Paper>

                        </div>
                    </div>
                )}

                {this.state.visibleBalanceSheet && (
                    <BalanceSheet />
                )}
            </div >
        );
    }
}