ProgressReport.js

import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField } from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../../assets/Images';
import DonutChart from 'react-d3-donut';
import Constant from '../../library/Constant';
import api from '../../api';
import { Link } from 'react-router-dom';
import { PropagateLoader } from 'react-spinners';
import { titleCase } from '../../library/Utils';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
import TableProgressReport from './TableProgressReport'

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

class ReportProgress extends Component {
    constructor(props) {
        super(props)
        this.state = {
            listApproval: null,
            listCategory: {
                options: [{ name: 'Report Status', value: 'report-status' }, { name: 'Approval Progress', value: 'approval-progress' }],
                getOptionLabel: (option) => option.name,
            },
            listReportType: null,
            listQuarter: {
                options: [{ name: 'Q1', value: 'q1' }, { name: 'Q2', value: 'q2' }, { name: 'Q3', value: 'q3' }],
                getOptionLabel: (option) => option.name,
            },
            listMonth: null,
            listPeriodeMB: null,
            quarter: {
                name: 'Q1', value: 'q1'
            },
            category: {
                name: 'Report Status', value: 'report-status'
            },
            month: null,
            periodeMB: null,
            reportType: null,
        }
    }

    componentDidMount() {
        this.getMonth()
        this.getReportType()
        // console.log(this.state.listCategory);
        // console.log(this.state.category);
    }

    getReportType() {
        let arrayReportType = [
            {
                name: 'Master Budget',
                value: 0
            }, {
                name: 'Monthly Report',
                value: 1
            }, {
                name: 'Operating Indicator',
                value: 2
            }, {
                name: 'Rolling Outlook',
                value: 3
            },
        ]

        let arrayReportTypeFinal = this.state.category.value.includes('status') ? arrayReportType : arrayReportType.filter((val) => val.value != 2)
        let defaultProps = {
            options: arrayReportTypeFinal,
            getOptionLabel: (option) => option.name,
        };
        this.setState({ listReportType: defaultProps, reportType: arrayReportTypeFinal[0] }, () => {
            console.log(this.state.listReportType)
            console.log(this.state.reportType)
        })
    }


    getMonth() {
        this.setState({ loading: true })
        api.create().getMonthTransaction().then(response => {
            let dateNow = new Date()
            dateNow.setMonth(dateNow.getMonth() - 1);
            let month = format(dateNow, 'MMMM')
            // console.log(month);
            if (response.data) {
                if (response.data.status === "success") {
                    // console.log(response);
                    let data = response.data.data
                    let monthData = data.map((item) => {
                        return {
                            month_id: item.id,
                            month_value: String(item.month_name).substr(0, 3)
                        }
                    })
                    let defaultProps = {
                        options: monthData,
                        getOptionLabel: (option) => option.month_value,
                    };
                    let index = data.findIndex((val) => val.month_name == month)
                    // console.log(month)
                    // console.log(index)
                    this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
                        // if (this.state.isApprover === true) {
                        //     if (this.state.submittedOnly) {
                        //         console.log('masuk cuk')
                        //         this.getPeriode()
                        //     } else {
                        //         this.getLastPeriod()
                        //     }
                        this.getPeriode()
                        // } else {
                        // this.getLastPeriod()
                        // this.getPeriode()
                        // }
                    })
                } else {
                    // this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
                    //     if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
                    //         setTimeout(() => {
                    //             localStorage.removeItem(Constant.TOKEN)
                    //             window.location.reload();
                    //         }, 1000);
                    //     }
                    // })
                }
            } else {
                // this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
            }
        })
    }

    getPeriode() {
        let currentYear = new Date().getFullYear()
        let MB = []
        for (var i = 2000; i <= currentYear; i++) {
            MB.push({ name: String(i), value: i })
            if (i == currentYear) {
                MB.push({ name: String(i + 1), value: i + 1 })
            }
        }

        let defaultPropsMB = {
            options: MB,
            getOptionLabel: (option) => option.name,
        };

        this.setState({
            listPeriodeMB: defaultPropsMB,
            periodeMB: MB[MB.length - 1],
            loading: false
        }, () => {
            console.log(this.state.listMonth)
            console.log(this.state.listPeriodeMB)
        })
    }

    render() {

        const dataTableMB = [
            ['Tax Planning', '2', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'],
            ['CAT', '1', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03'],
            ['Profit Loss', '0', 'ABA: Anugerah Buminusantara Abadi', '2021-05-03']
        ]

        const dataTableMBStatus = [
            ['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '2', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved'],
            ['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '1', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved'],
            ['ABA: Anugerah Buminusantara Abadi', '2021', 'approved', '0', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved', 'Sudah Approved']
        ]

        const loadingComponent = (
            <div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
                <PropagateLoader
                    // css={override}
                    size={20}
                    color={"#274B80"}
                    loading={this.state.loading}
                />
            </div>
        );

        return (
            <div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
                <div>
                    <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                        <Typography style={{ fontSize: '16px', color: 'white' }}>Report Status & Approval Progress Monitoring</Typography>
                    </div>
                    <div style={{ padding: 20, width: '100%' }}>
                        <Paper style={{ paddingTop: 10, paddingBottom: 50 }}>
                            <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                                <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography>
                            </div>
                            <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
                                <div style={{ marginTop: 15, display: 'flex' }}>
                                    <Autocomplete
                                        {...this.state.listCategory}
                                        id="category"
                                        onChange={(event, newInputValue) => this.setState({ category: newInputValue, loading: true }, () => {
                                            // this.getListUserSubcoRO()
                                            this.getReportType()
                                            this.setState({ loading: false })
                                        })}
                                        disableClearable
                                        style={{ minWidth: 210, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Category" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.category}
                                    />
                                    <Autocomplete
                                        {...this.state.listReportType}
                                        id="report-type"
                                        onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, loading: true }, () => {
                                            // this.getListUserSubcoRO()
                                            this.setState({ loading: false })
                                        })}
                                        disableClearable
                                        style={{ minWidth: 210, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.reportType}
                                    />
                                </div>
                            </div>
                            <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
                                <div style={{ marginTop: 15, display: 'flex' }}>
                                    <Autocomplete
                                        {...this.state.listPeriodeMB}
                                        id="periode"
                                        onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
                                            // this.getListUserSubcoRO()
                                            this.setState({ loading: false })
                                        })}
                                        disableClearable
                                        style={{ minWidth: 210, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.periodeMB}
                                    />
                                    {this.state.reportType != null && this.state.reportType.value == 1 && <Autocomplete
                                        {...this.state.listMonth}
                                        id="month"
                                        onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
                                            // this.getListUserSubcoRO()
                                            this.setState({ loading: false })
                                        })}
                                        disableClearable
                                        style={{ minWidth: 210, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.month}
                                    />}
                                    {this.state.reportType != null && this.state.reportType.value == 3 && <Autocomplete
                                        {...this.state.listQuarter}
                                        id="quarter"
                                        onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
                                            // this.getListUserSubcoRO()
                                            this.setState({ loading: false })
                                        })}
                                        disableClearable
                                        style={{ minWidth: 210, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Quarter" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.quarter}
                                    />}
                                </div>
                            </div>
                            <div style={{ marginTop: 20, marginBottom: 20 }}>
                                {/* <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0px 20px 10px 20px' }}>
                                    <div></div>
                                    {this.state.previewDownload && (
                                        <div style={{ width: '50%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
                                            <a data-tip={'Download'} data-for="download">
                                                <button
                                                    style={{
                                                        backgroundColor: 'transparent',
                                                        cursor: 'pointer',
                                                        borderColor: 'transparent',
                                                        margin: 5,
                                                        outline: 'none'
                                                    }}
                                                    onClick={() => this.setState({ loading: true }, () => {
                                                        setTimeout(() => {
                                                            this.downloadAllData()
                                                        }, 100);
                                                    })}
                                                >
                                                    <img src={Images.download} />
                                                </button>
                                            </a>
                                            <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                                        </div>
                                    )}
                                </div> */}
                                {this.state.loading && loadingComponent}
                                {/* {this.state.previewTable && ( */}
                                <TableProgressReport
                                    width={this.props.width}
                                    height={this.props.height}
                                    open={this.props.open}
                                    // month={this.state.month.month_value}
                                    category={this.state.category ? this.state.category.value : 1}
                                    reportType={this.state.reportType ? this.state.reportType.value : 0}
                                    dataTable={this.state.category.value == 'report-status' ? dataTableMBStatus : dataTableMB}
                                    // dataTable={this.state.dataTable}
                                    periode={this.state.periode ? this.state.periode.periode : null}
                                    quarter={this.state.quarter.name}
                                    company={this.state.company}
                                />
                                {/* )} */}
                            </div>
                        </Paper>
                    </div>
                </div>
            </div>
        );

    }
}

export default ReportProgress;