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';

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

class HomePage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            userData: null,
            listDashboard: [],
            listMasterBudget: [
                { nama: 'Triputra Agro Persada', status: 'complete' },
                { nama: 'Puninar Infinite Raya', status: 'complete' },
                { nama: 'Dharma Group', status: 'overdue' },
                { nama: 'Daya Group', status: 'open' },
            ],
            isApprover: true,
            listSubcoMB: [],
            listSubcoMR: [],
            listSubcoRO: [],
            listSubcoOL: [],
            valueSubmit: 0,
            listdmb: [],
            dataTableMB: [],
            listPeriodeMB: null,
            listPeriodeMR: null,
            listPeriodeRO: null,
            listPeriodeOL: null,
            listMonth: null,
            periodeMB: null,
            periodeMR: null,
            periodeRO: null,
            periodeOL: null,
            month: null,
            monthCAT: null,
            periodeCAT: null,
            loading: false,
            accessMB: false,
            accessMR: false,
            accessRO: false,
            accessOL: false,
            company: [],
            dataDashboardCAT: [],
            loading2: false,
            loading3: false,
            parameterPerfom: [],
            quarterList: [
                { value: 'q1', name: 'Q1' },
                { value: 'q2', name: 'Q2' },
                { value: 'q3', name: 'Q3' },
            ],
            quarter: null
        }
    }

    componentDidMount() {
        this.setState({ loading: true, loading2: true, loading3: true })
        let userId = localStorage.getItem(Constant.USER)
        api.create().getDetailUser(userId).then((response) => {
            console.log(response);
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        this.setState({ userData: response.data.data })
                        // console.log(response.data.data)
                    } 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' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
        // api.create().checkApprover().then(response => {
        //     console.log(response);
        //     if (response.data.data.is_approver === true) {
        //         this.setState({ isApprover: true }, () =>
        //             this.getDashboard())
        //     } else {
        //         this.setState({ isApprover: false })
        //     }
        // })
        this.getPermissionMB()
        this.getPermissionMR()
        this.getPermissionRO()
        this.getPermissionOL()
        this.getApprMat()
        // this.getListUserSubco()
        this.getMonth()
    }

    componentDidUpdate() {
        window.onpopstate = e => {
            //your code...
            this.props.selectIndex('Home')
        }
    }

    getPeriode() {
        let currentYear = new Date().getFullYear()
        let MB = []
        let MR = []
        let ROut = []
        let OL = []
        for (var i = 2000; i <= currentYear; i++) {
            MB.push({ name: String(i), value: i })
            MR.push({ name: String(i), value: i })
            ROut.push({ name: String(i), value: i })
            OL.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,
        };

        let defaultPropsMR = {
            options: MR,
            getOptionLabel: (option) => option.name,
        };

        let defaultPropsRO = {
            options: ROut,
            getOptionLabel: (option) => option.name,
        };

        let defaultPropsOL = {
            options: OL,
            getOptionLabel: (option) => option.name,
        };
        // console.log(MR[MR.length - 1])
        let dateNow = new Date()
        dateNow.setMonth(dateNow.getMonth() - 1);
        let yearNow = dateNow.getFullYear()
        let indexMonthMR = MR.findIndex((val) => val.value == yearNow)
        let indexMonthRO = ROut.findIndex((val) => val.value == yearNow)
        let indexMonthOL = OL.findIndex((val) => val.value == yearNow)

        let defaultPropsQuarter = {
            options: this.state.quarterList,
            getOptionLabel: (option) => option.name
        }

        this.setState({ listPeriodeMB: defaultPropsMB, 
                        periodeMB: MB[MB.length - 1], 
                        listPeriodeMR: defaultPropsMR, 
                        periodeMR: MR[indexMonthMR], 
                        listPeriodeRO: defaultPropsRO, 
                        periodeRO: ROut[indexMonthRO],
                        listQuarter: defaultPropsQuarter, 
                        quarter: this.state.quarterList[0],
                        listPeriodeOL: defaultPropsOL, 
                        periodeOL: OL[indexMonthOL],
                        listPeriodeCAT: defaultPropsMB, 
                        periodeCAT: MB[indexMonthMR] }, () => {
            this.getParameterGroupPerfom()
        })
    }

    getDashboardCAT() {
        console.log(this.state.company)
        api.create().getListChildDashboardCAT(this.state.periodeCAT.value, this.state.monthCAT.month_id).then((res) => {
            if (res.data) {
                // console.log(res)
                let response = res.data.data.business_unit
                let data = []
                response.map((item, index) => {
                    let arrayChild = []
                    item.category.map((items, indexs) => {
                        if (this.state.company.includes(items.company_id)) {
                            let indexPerform = this.state.parameterPerfom.findIndex((val) => val.company_id == items.company_id)
                            let listPerfomanceDefault = []
                            if (indexPerform == -1) {
                                listPerfomanceDefault = this.state.parameterPerfom.filter((val) => String(val.company_name).toLocaleLowerCase() == "default")
                            } else {
                                listPerfomanceDefault = this.state.parameterPerfom.filter((val) => val.company_id == items.company_id)
                            }
                            let performanceScore = ''
                            let perfomanceScoreColor = '#fff'
                            if (listPerfomanceDefault.length > 0) {
                                listPerfomanceDefault.map((item, index) => {
                                    // console.log(Number(lastTotal))
                                    // console.log(Number(item.min_value))
                                    // console.log(Number(item.max_value))
                                    if (Number(items.current_value).toFixed(2) >= Number(item.min_value) && Number(items.current_value).toFixed(2) <= Number(item.max_value)) {
                                        // console.log('masuk')
                                        performanceScore = item.description
                                        perfomanceScoreColor = item.value
                                    }
                                })
                            }
                            arrayChild.push({ ...items, current_value: Number(items.current_value).toFixed(2), performanceColor: perfomanceScoreColor, performanceScore })
                        }
                    })
                    if (arrayChild.length > 0 && String(item.item_business).toLocaleLowerCase() != 'holding') {
                        data.push({ ...item, category: arrayChild })
                    }
                })
                // console.log(this.state.parameterPerfom)
                console.log(data)
                this.setState({ dataDashboardCAT: data, loading: false, loading2: false }, () => {
                    setTimeout(() => {
                        this.setState({loading3: false})
                    }, 1000);
                })
            }
        })
    }

    getMonth() {
        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, listMonthCAT: defaultProps, monthCAT: monthData[index], 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' })
            }
        })
    }

    getPermissionMB() {
        let payload = {
            menu: "Master Budget & CAT"
        }
        api.create().getPermission(payload).then(response => {
            // console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        btnCreateMB: response.data.data.create,
                        btnEditMB: response.data.data.edit,
                        load: true
                    }, () => {
                        if (this.state.btnCreateMB === true && this.state.btnEditMB === true) {
                            this.setState({ accessMB: true })
                        }
                    })
                } else {
                    this.setState({
                        load: true
                    })
                }
            } else {
                this.setState({ load: true })
            }
        })
    }

    getPermissionMR() {
        let payload = {
            menu: "monthly report"
        }
        api.create().getPermission(payload).then(response => {
            // console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        btnCreateMR: response.data.data.create,
                        btnEditMR: response.data.data.edit,
                        load: true
                    }, () => {
                        if (this.state.btnCreateMR === true && this.state.btnEditMR === true) {
                            this.setState({ accessMR: true })
                        }
                    })
                } else {
                    this.setState({
                        load: true
                    })
                }
            } else {
                this.setState({ load: true })
            }
        })
    }

    getPermissionRO() {
        let payload = {
            menu: "rolling outlook & cat revision"
        }
        api.create().getPermission(payload).then(response => {
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        btnCreateRO: response.data.data.create,
                        btnEditRO: response.data.data.edit,
                        load: true
                    }, () => {
                        if (this.state.btnCreateRO === true && this.state.btnEditRO === true) {
                            this.setState({ accessRO: true })
                        }
                    })
                } else {
                    this.setState({
                        load: true
                    })
                }
            } else {
                this.setState({ load: true })
            }
        })
    }

    getPermissionOL() {
        let payload = {
            menu: "outlook performance appraisal"
        }
        api.create().getPermission(payload).then(response => {
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    this.setState({
                        btnCreateOL: response.data.data.create,
                        btnEditOL: response.data.data.edit,
                        load: true
                    }, () => {
                        if (this.state.btnCreateOL === true && this.state.btnEditOL === true) {
                            this.setState({ accessOL: true })
                        }
                    })
                } else {
                    this.setState({
                        load: true
                    })
                }
            } else {
                this.setState({ load: true })
            }
        })
    }

    getDetailUser() {
        let userId = localStorage.getItem(Constant.USER)
        api.create().getDetailUser(userId).then((response) => {
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        this.setState({ tempData: response.data.data, company: response.data.data.company }, () =>
                            this.getDashboardCAT())
                        // console.log(response.data.data)
                    } 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' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
            }
        })
    }

    getListUserSubcoMB() {
        // console.log(this.state.month.month_id)
        // console.log(this.state.periodeMR.value)
        api.create().getListUserSubcoMB(this.state.periodeMB.value).then((response) => {
            // console.log(response)
            let valueSubmit = 0
            let dataMB = []
            if (response.data) {
                if (response.data.status === "success") {
                    response.data.data.map((item, index) => {
                        if (item.is_submit === true) {
                            valueSubmit += 1
                        }
                        dataMB.push(item)

                    })
                    this.setState({
                        listSubcoMB: dataMB,
                        valueSubmit,
                        loading: false
                    })
                }
            } else {
                this.setState({ loading: false })
            }
        })
    }

    getListUserSubcoMR() {
        // console.log(this.state.month.month_id)
        // console.log(this.state.periodeMR.value)
        api.create().getListUserSubcoMR(this.state.month.month_id, this.state.periodeMR.value).then((response) => {
            let valueSubmitMR = 0
            let dataMR = []
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    response.data.data.map((item, index) => {
                        if (item.is_submit === true) {
                            valueSubmitMR += 1
                        }
                        dataMR.push(item)
                    })
                    this.setState({
                        listSubcoMR: dataMR,
                        valueSubmitMR,
                        loading: false
                    })
                }
            } else {
                this.setState({ loading: false })
            }
        })
    }

    getListUserSubcoRO() {
        // console.log(this.state.month.month_id)
        // console.log(this.state.periodeMR.value)
        api.create().getListUserSubcoRO(this.state.periodeRO.value, this.state.quarter.value).then((response) => {
            let valueSubmitRO = 0
            let dataRO = []
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    response.data.data.map((item, index) => {
                        if (item.is_submit === true) {
                            valueSubmitRO += 1
                        }
                        dataRO.push(item)
                    })
                    this.setState({
                        listSubcoRO: dataRO,
                        valueSubmitRO,
                        loading: false
                    })
                }
            } else {
                this.setState({ loading: false })
            }
        })
    }

    getListUserSubcoOL() {
        // console.log(this.state.month.month_id)
        // console.log(this.state.periodeOL.value)
        api.create().getListUserSubcoOL(this.state.periodeOL.value).then((response) => {
            let valueSubmitOL = 0
            let dataOL = []
            console.log(response)
            if (response.data) {
                if (response.data.status === "success") {
                    response.data.data.map((item, index) => {
                        if (item.is_submit === true) {
                            valueSubmitOL += 1
                        }
                        dataOL.push(item)
                    })
                    this.setState({
                        listSubcoOL: dataOL,
                        valueSubmitOL,
                        loading: false
                    })
                }
            } else {
                this.setState({ loading: false })
            }
        })
    }

    getListUserSubco() {
        api.create().getDashboardUser().then(response => {
            // console.log(response);
            let valueSubmit = 0
            let valueSubmitMR = 0
            let dataMB = []
            let dataMR = []
            if (response.data) {
                if (response.data.status === "success") {
                    response.data.data.map((item, index) => {
                        if (item.is_submit === true && item.type === "master_budget") {
                            valueSubmit += 1
                        } else if (item.is_submit === true && item.type === "monthly_report") {
                            valueSubmitMR += 1
                        }

                        if (item.type === "master_budget") {
                            dataMB.push(item)
                        } else {
                            dataMR.push(item)
                        }
                    })
                    this.setState({
                        listSubcoMB: dataMB,
                        listSubcoMR: dataMR,
                        valueSubmit,
                        valueSubmitMR,
                        loading: false
                    })
                }
            }
            // console.log(this.state.listSubcoMB)
            // console.log(this.state.listSubcoMR)
        })
    }

    getDashboard() {
        let listDashboard = []
        let rawData = []
        api.create().getDashboard().then((response) => {
            console.log(response);
            console.log(this.state.isApproverMB);
            console.log(this.state.isApproverMR);
            console.log(this.state.isApproverRO);
            console.log(this.state.isApproverOL);
            if (String(response.data.status).toLocaleLowerCase() == 'success') {
                let data = response.data.data
                data.map((item, index) => {
                    let statusConvert = item.status == 'approval_review' ? 'Waiting For Review' : item.status == 'approval_proccess' ? 'Waiting For Approval' : titleCase(item.status)
                    if (this.state.isApproverMB && this.state.isApproverMR && this.state.isApproverRO && this.state.isApproverOL) {
                        if (String(item.type_report).toLocaleLowerCase().includes("master")) {
                            listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
                            rawData.push(item)
                        } else if (String(item.type_report).toLocaleLowerCase().includes("monthly")) {
                            listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                            rawData.push(item)
                        } else if (String(item.type_report).toLocaleLowerCase().includes("rolling")) {
                            listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                            rawData.push(item)
                        } else if (String(item.type_report).toLocaleLowerCase().includes("pa")) {
                            listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                            rawData.push(item)
                        } 
                    } else {
                        if (this.state.isApproverMB) {
                            if (String(item.type_report).toLocaleLowerCase().includes("master")) {
                                listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
                                rawData.push(item)
                            }
                        } 
                        if (this.state.isApproverMR) {
                            if (String(item.type_report).toLocaleLowerCase().includes("monthly")) {
                                listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                                rawData.push(item)
                            }
                        } 
                        if (this.state.isApproverRO) {
                            if (String(item.type_report).toLocaleLowerCase().includes("rolling")) {
                                listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                                rawData.push(item)
                            }
                        }
                        if (this.state.isApproverOL) {
                            if (String(item.type_report).toLocaleLowerCase().includes("pa")) {
                                listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
                                rawData.push(item)
                            }
                        }
                    }
                })
                this.setState({ listDashboard, rawData })
            }
        })
    }

    getApprMat() {
        this.setState({ loading: true })
        let isApproverMR = false
        let isApproverMB = false
        let isApproverRO = false
        let isApproverOL = false
        api.create().getAM().then((response) => {
            console.log(response);
            let actAMActive = []
            let actAM = response.data.data.map((item, index) => {
                if (String(item.status).toLocaleLowerCase() == 'active') {
                    actAMActive.push(item)
                    return item
                }
            })
            let userId = localStorage.getItem(Constant.USER)
            // console.log(userId);
            let indexId = actAMActive.findIndex((val) => val.user_id == userId)
            actAMActive.map((item, index) => {
                if (item.approval_type_name === "MONTHLY_REPORT") {
                    isApproverMR = true
                } else if (item.approval_type_name === "MASTER_BUDGET") {
                    isApproverMB = true
                } else if (item.approval_type_name === "ROLLING_OUTLOOK") {
                    isApproverRO = true
                } else if (item.approval_type_name === "OUTLOOK_PA") {
                    isApproverOL = true
                }
            })

            if (indexId === -1) {
                this.setState({ isApprover: false })
                this.getMonth()
                // this.getListUserSubco()
            }
            this.setState({ isApproverMB, isApproverMR, isApproverRO, isApproverOL })
            this.getDashboardMB()
            // this.getDashboardMB()
            this.getDashboard()
            // console.log(actAM)
            this.setState({ loading: false })
        })
    }

    getDashboardMB() {
        api.create().getDashboardMB().then((response) => {
            // console.log(response)
            if (String(response.data.status).toLocaleLowerCase() == 'success') {
                let data = response.data.data
                let listdmb = data.sort((a, b) => a.company_id - b.company_id).map((item, index) => {
                    return [
                        item.company_name,
                        item.master_budget,
                        item.operating_indicator
                    ]
                })
                this.setState({ dataTableMB: listdmb, loading: false })
            }
        })
    }

    handleBackgroundPerform(total) {
        let color = 'white'
        if (total >= 1.00 && total <= 2.00) {
            color = 'red'
        } else if (total >= 2.01 && total <= 2.75) {
            color = 'yellow'
        } else if (total >= 2.76 && total <= 3.00) {
            color = 'lightgreen'
        } else if (total >= 3.01 && total <= 3.75) {
            color = 'yellowgreen'
        } else if (total >= 3.76 && total <= 4.00) {
            color = 'forestgreen'
        } else if (total >= 4.01 && total <= 4.75) {
            color = 'deepskyblue'
        } else if (total >= 4.76 && total <= 5.00) {
            color = 'dodgerblue'
        }
        return color
    }

    getParameterGroupPerfom() {
        api.create().getParameterByGroupName({
            "group_name": "PERFORMANCE_KPI"
        }).then((response) => {
            console.log(response.data)
            if (response.data) {
                this.setState({ parameterPerfom: response.data.data } , () => {
                    this.getListUserSubcoMB()
                    this.getListUserSubcoMR()
                    this.getListUserSubcoRO()
                    this.getListUserSubcoOL()
                    this.getDetailUser()
                })
            } else {
                this.setState({ parameterPerfom: [] } , () => {
                    this.getListUserSubcoMB()
                    this.getListUserSubcoMR()
                    this.getListUserSubcoRO()
                    this.getListUserSubcoOL()
                    this.getDetailUser()
                })
            }
        })
    }

    render() {
        const getDataMonth = (item) => {
            let months = item.months
            let dataMonth = this.state.listMonth.options
            let indexID = dataMonth.findIndex((val) => val.month_id == months)
            // console.log(dataMonth[indexID])
            return dataMonth[indexID]
        }

        const columns = ["#", "ID", "Company", "Report Type", "Revision",
            {
                name: "",
                options: {
                    display: false
                }
            }, 'Status', {
                name: "Action",
                options: {
                    customBodyRender: (val, tableMeta) => {
                        // console.log(tableMeta);
                        // console.log(this.state.rawData);
                        return (
                            <div style={{ display: 'flex' }}>
                                <Link to={{
                                    pathname: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? `/home/master-budget/` : String(tableMeta.rowData[3]).toLocaleLowerCase().includes("monthly") ? `/home/monthly-report/` : String(tableMeta.rowData[3]).toLocaleLowerCase().includes("rolling") ? `/home/rolling-outlook/` : `/home/outlook-performance/`,
                                    state: {
                                        userType: 'approver',
                                        rawData: {...this.state.rawData[tableMeta.rowIndex], quarter: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("rolling") ? this.state.rawData[tableMeta.rowIndex].quartal : null },
                                        month: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? null : getDataMonth(this.state.rawData[tableMeta.rowIndex]),
                                        quarter: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("rolling") ? this.state.rawData[tableMeta.rowIndex].quartal : null
                                    }
                                }}>
                                    <button
                                        style={{
                                            backgroundColor: 'transparent',
                                            cursor: 'pointer',
                                            borderColor: 'transparent',
                                            marginRight: 10
                                        }}
                                        onClick={() => null}
                                    >
                                        <img src={Images.editCopy2} />
                                    </button>
                                </Link>
                            </div >
                        );
                    }
                }
            }]
        const data = [
            ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
            ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
            ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
            ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
            ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
        ]
        const options = {
            filter: true,
            sort: false,
            responsive: "scroll",
            print: false,
            download: false,
            selectableRows: false,
            viewColumns: true,
            rowsPerPage: 5,
            search: true
        }

        const columnsMB = ["Company", "Master Budget & CAT", "Operating Indicator"]

        const dataChart = [{
            count: 90,
            color: '#5198ea',
            name: 'My name',
        }, {
            count: 10,
            color: '#ffd600',
            name: 'name',
        }]
        const dataChart2 = [{
            count: 90,
            color: '#f65a4c',
            name: 'My name',
        }, {
            count: 10,
            color: '#5198ea',
            name: 'name',
        }]
        const dataChart3 = [{
            count: 90,
            color: '#4caf51',
            name: 'My name',
        }, {
            count: 10,
            color: '#f65a4c',
            name: 'name',
        }]
        const loadingComponent = (
            <div style={{ position: 'absolute', 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>
        );
        let bulan = format(new Date(), 'MMM')
        let tahun = new Date().getFullYear()
        return (
            <div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
                {(this.state.loading || this.state.loading2 || this.state.loading3) && loadingComponent}
                {this.state.isApprover === true ?
                    <div>
                        <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                            <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
                        </div>
                        <div>
                            <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Dashboard CAT</Typography>
                                <div style={{ display: 'flex' }}>
                                    <Autocomplete
                                        {...this.state.listMonthCAT}
                                        id="monthCAT"
                                        onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true}, () => {
                                            this.getDashboardCAT()
                                            // if (this.state.isApprover === true) {
                                            //     this.getCompanySubmitted()
                                            // } else {
                                            // this.setState({ visibleTableHistory: false })
                                            // this.getRevision()
                                            // }
                                        })}
                                        disableClearable
                                        style={{ minWidth: 250, marginRight: 20 }}
                                        renderInput={(params) => <TextField {...params} label="Month CAT" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.monthCAT}
                                    />
                                    <Autocomplete
                                        {...this.state.listPeriodeCAT}
                                        id="periodeCAT"
                                        onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
                                            this.getDashboardCAT()
                                            // if (this.state.isApprover === true) {
                                            //         this.getCompanySubmitted()
                                            // } else {
                                            // this.setState({ visibleTableHistory: false })
                                            // this.getRevision()
                                            // }
                                        })}
                                        disableClearable
                                        style={{ width: 250 }}
                                        renderInput={(params) => <TextField {...params} label="Periode CAT" margin="normal" style={{ marginTop: 7 }} />}
                                        value={this.state.periodeCAT}
                                    />
                                </div>
                                {this.state.dataDashboardCAT.map((item, index) => {
                                    return (
                                        <div>
                                            <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
                                            <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.95 }}>
                                                {item.category.map((items, indexs) => {
                                                    return (
                                                        <Link to={{
                                                            pathname: `/home/cat-dashboard/`,
                                                            state: {
                                                                userType: 'user',
                                                                rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: items.company_id }
                                                            }
                                                        }}>
                                                            <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 0 ? 5 : 25 }}>
                                                                {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
                                                                <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
                                                                    <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{items.category_name}</Typography>
                                                                </div>
                                                                {items.total_kpi != null &&
                                                                    <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
                                                                        <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
                                                                        {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
                                                                    </div>}
                                                                <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
                                                                    <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
                                                                        <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performanceScore}</Typography>
                                                                    </div>
                                                                </div>
                                                                <div style={{ display: 'flex', justifyContent: 'center' }}>
                                                                    <ReactSpeedometer
                                                                        maxSegmentLabels={0}
                                                                        segmentColors={[
                                                                            items.performanceColor,
                                                                            "#d8d8d8"
                                                                        ]}
                                                                        needleColor={"#4b4b4b"}
                                                                        value={Number(items.current_value).toFixed(2)}
                                                                        valueFormat={'.2f'}
                                                                        minValue={Number(items.low)}
                                                                        maxValue={Number(items.high)}
                                                                        customSegmentStops={[0, Number(items.current_value), 5]}
                                                                        width={200}
                                                                        height={140}
                                                                        ringWidth={25}
                                                                        textColor={'#4b4b4b'}
                                                                    />
                                                                </div>
                                                                <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
                                                                    {items.is_higher == '-' ?
                                                                        <div style={{ textAlign: '-webkit-center' }}>
                                                                            <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
                                                                        </div>
                                                                        :
                                                                        <div style={{ textAlign: '-webkit-center' }}>
                                                                            {items.is_higher == 'true' ?
                                                                                <img src={Images.up} /> : <img src={Images.down} />}
                                                                            <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
                                                                        </div>
                                                                    }
                                                                </div>
                                                            </div>
                                                        </Link>
                                                    )
                                                })}
                                            </div>
                                        </div>
                                    )

                                })}
                            </div>
                            <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                <div style={{ display: 'flex' }}>
                                    <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography>
                                </div>

                            </div>

                            <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                <div>
                                    <MuiThemeProvider theme={getMuiTheme()}>
                                        <MUIDataTable
                                            data={this.state.listDashboard}
                                            columns={columns}
                                            options={options}
                                        />
                                    </MuiThemeProvider>
                                </div>
                                <div style={{ marginTop: 20 }}>
                                    <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Master Budget & CAT</Typography>
                                    <div style={{ marginTop: 10, width: '100%' }}>
                                        <MuiThemeProvider theme={getMuiTheme()}>
                                            <MUIDataTable
                                                data={this.state.dataTableMB}
                                                columns={columnsMB}
                                                options={options}
                                            />
                                        </MuiThemeProvider>
                                    </div>
                                </div>
                            </div>
                            {/* <div style={{ marginTop: 20 }}>
                                <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
                                <div style={{ marginTop: 10, display: 'flex' }}>
                                    <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25 }}>
                                        <Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold' }}>Budget Tahunan - 2021</Typography>
                                        <div style={{ textAlign: 'center' }}>
                                            <DonutChart
                                                innerRadius={70}
                                                outerRadius={100}
                                                transition={true}
                                                pieClass="pie1"
                                                displayTooltip={true}
                                                strokeWidth={3}
                                                data={dataChart} />
                                        </div>
                                        <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.red} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
                                                </div>
                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
                                                </div>

                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25 }}>
                                        <Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold' }}>Laporan Bulanan - Oct 2020</Typography>
                                        <div style={{ textAlign: 'center' }}>
                                            <DonutChart
                                                innerRadius={70}
                                                outerRadius={100}
                                                transition={true}
                                                pieClass="pie5"
                                                displayTooltip={true}
                                                strokeWidth={3}
                                                data={dataChart2}
                                            />
                                        </div>
                                        <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.red} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
                                                </div>
                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
                                                </div>

                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', }}>
                                        <Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold', height: 71 }}>Lainnya</Typography>
                                        <div style={{ textAlign: 'center' }}>
                                            <DonutChart
                                                innerRadius={70}
                                                outerRadius={100}
                                                transition={true}
                                                pieClass="pie2"
                                                displayTooltip={true}
                                                strokeWidth={3}
                                                data={dataChart3}
                                            />
                                        </div>
                                        <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.red} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
                                                </div>
                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
                                                </div>

                                            </div>
                                            <div style={{ width: '33%' }}>
                                                <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
                                                <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
                                                <div style={{ display: 'flex' }} >
                                                    <img src={Images.green} />
                                                    <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> */}
                        </div>
                    </div>
                    :
                    <div>
                        <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                            <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
                        </div>
                        <div style={{ flex: 1, padding: 20, width: '100%' }}>
                            <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Dashboard CAT</Typography>
                            <div style={{ display: 'flex' }}>
                                <Autocomplete
                                    {...this.state.listMonthCAT}
                                    id="monthCAT"
                                    onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true, loading3: true }, () => {
                                        this.getDashboardCAT()
                                        // if (this.state.isApprover === true) {
                                        //     this.getCompanySubmitted()
                                        // } else {
                                        // this.setState({ visibleTableHistory: false })
                                        // this.getRevision()
                                        // }
                                    })}
                                    disableClearable
                                    style={{ minWidth: 250, marginRight: 20 }}
                                    renderInput={(params) => <TextField {...params} label="Month CAT" margin="normal" style={{ marginTop: 7 }} />}
                                    value={this.state.monthCAT}
                                />
                                <Autocomplete
                                    {...this.state.listPeriodeCAT}
                                    id="periodeCAT"
                                    onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true, loading3: true }, () => {
                                        this.getDashboardCAT()
                                        // if (this.state.isApprover === true) {
                                        //         this.getCompanySubmitted()
                                        // } else {
                                        // this.setState({ visibleTableHistory: false })
                                        // this.getRevision()
                                        // }
                                    })}
                                    disableClearable
                                    style={{ width: 250 }}
                                    renderInput={(params) => <TextField {...params} label="Periode CAT" margin="normal" style={{ marginTop: 7 }} />}
                                    value={this.state.periodeCAT}
                                />
                            </div>
                            {this.state.dataDashboardCAT.map((item, index) => {
                                return (
                                    <div>
                                        <Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{item.item_business}</Typography>
                                        <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.95 }}>
                                            {item.category.map((items, indexs) => {
                                                return (
                                                    <Link to={{
                                                        pathname: `/home/cat-dashboard/`,
                                                        state: {
                                                            userType: 'user',
                                                            rawData: { month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: items.company_id }
                                                        }
                                                    }}>
                                                        <div style={{ padding: 10, backgroundColor: '#fff', height: 350, borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: indexs == item.category.length - 1 ? 25 : 0, marginLeft: indexs == 0 ? 5 : 25 }}>
                                                            {/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
                                                            <div style={{ fontSize: '17px', width: '100%', height: 25 }}>
                                                                <Typography style={{ textAlign: 'left', color: '#4b4b4b' }}>{items.category_name}</Typography>
                                                            </div>
                                                            {items.total_kpi != null &&
                                                                <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 10 }}>
                                                                    <span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{items.total_kpi}</span>
                                                                    {/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
                                                                </div>}
                                                            <div style={{ display: 'flex', justifyContent: 'center', marginTop: items.total_kpi == null ? 50 : 0 }}>
                                                                <div style={{ backgroundColor: items.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
                                                                    <Typography style={{ textAlign: 'center', color: '#4b4b4b' }}>{items.performanceScore}</Typography>
                                                                </div>
                                                            </div>
                                                            {!this.state.loading3 && <div style={{ display: 'flex', justifyContent: 'center' }}>
                                                                <ReactSpeedometer
                                                                    maxSegmentLabels={0}
                                                                    segmentColors={[
                                                                        items.performanceColor,
                                                                        "#d8d8d8"
                                                                    ]}
                                                                    needleColor={"#4b4b4b"}
                                                                    value={Number(items.current_value).toFixed(2)}
                                                                    valueFormat={'.2f'}
                                                                    minValue={Number(items.low)}
                                                                    maxValue={Number(items.high)}
                                                                    customSegmentStops={[0, Number(items.current_value), 5]}
                                                                    width={200}
                                                                    height={140}
                                                                    ringWidth={25}
                                                                    textColor={'#4b4b4b'}
                                                                />
                                                            </div>}
                                                            <div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
                                                                {items.is_higher == '-' ?
                                                                    <div style={{ textAlign: '-webkit-center' }}>
                                                                        <Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
                                                                    </div>
                                                                    :
                                                                    <div style={{ textAlign: '-webkit-center' }}>
                                                                        {items.is_higher == 'true' ?
                                                                            <img src={Images.up} /> : <img src={Images.down} />}
                                                                        <Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
                                                                    </div>
                                                                }
                                                            </div>
                                                        </div>
                                                    </Link>
                                                )
                                            })}
                                        </div>
                                    </div>
                                )

                            })}
                        </div>
                        {(this.state.accessMB || this.state.accessMR || this.state.accessRO || this.state.accessOL ) &&
                            <div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}>
                                <div style={{ display: 'flex' }}>
                                    <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
                                </div>
                            </div>
                        }
                        {(this.state.accessMB === false && this.state.accessMR === false && this.state.accessRO === false && this.state.accessOL === false ) &&
                            <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                <div style={{ display: 'flex' }}>
                                    <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>You don't have pending task</Typography>
                                </div>
                            </div>
                        }
                        <div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.95 }}>
                            {this.state.accessMB &&
                                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                    <div style={{ display: 'flex' }}>
                                        <Autocomplete
                                            {...this.state.listPeriodeMB}
                                            id="periodeMB"
                                            onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
                                                // if (this.state.isApprover === true) {
                                                //         this.getCompanySubmitted()
                                                // } else {
                                                // this.setState({ visibleTableHistory: false })
                                                // this.getRevision()
                                                // }\
                                                this.getListUserSubcoMB()
                                            })}
                                            disableClearable
                                            style={{ width: 250 }}
                                            renderInput={(params) => <TextField {...params} label="Periode MB" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.periodeMB}
                                        />
                                    </div>
                                    <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
                                        <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`}</Typography>
                                        {this.state.listSubcoMB.map((item, index) => {
                                            return (
                                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
                                                    <div style={{ display: 'flex' }}>
                                                        <img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
                                                        <Link to={{
                                                            pathname: `/home/master-budget/`,
                                                            state: {
                                                                userType: 'user',
                                                                rawData: item
                                                            }
                                                        }}>
                                                            <button
                                                                style={{
                                                                    backgroundColor: 'transparent',
                                                                    cursor: 'pointer',
                                                                    borderColor: 'transparent',
                                                                    margin: 5,
                                                                    outline: 'none'
                                                                }}>
                                                                <Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
                                                            </button>
                                                        </Link>
                                                    </div>
                                                    {item.is_submit === false && item.is_overdue && (
                                                        <div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
                                                            <Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
                                                        </div>
                                                    )}
                                                </div>
                                            )
                                        })}
                                    </Paper>
                                </div>
                            }
                            {this.state.accessMR &&
                                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                    <div style={{ display: 'flex' }}>
                                        <Autocomplete
                                            {...this.state.listMonth}
                                            id="month"
                                            onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
                                                this.getListUserSubcoMR()
                                                // if (this.state.isApprover === true) {
                                                //     this.getCompanySubmitted()
                                                // } else {
                                                // this.setState({ visibleTableHistory: false })
                                                // this.getRevision()
                                                // }
                                            })}
                                            disableClearable
                                            style={{ minWidth: 210, marginRight: 20 }}
                                            renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.month}
                                        />
                                        <Autocomplete
                                            {...this.state.listPeriodeMR}
                                            id="periodeMR"
                                            onChange={(event, newInputValue) => this.setState({ periodeMR: newInputValue, loading: true }, () => {
                                                this.getListUserSubcoMR()
                                                // if (this.state.isApprover === true) {
                                                //         this.getCompanySubmitted()
                                                // } else {
                                                // this.setState({ visibleTableHistory: false })
                                                // this.getRevision()
                                                // }
                                            })}
                                            disableClearable
                                            style={{ width: 210 }}
                                            renderInput={(params) => <TextField {...params} label="Periode MR" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.periodeMR}
                                        />
                                    </div>
                                    <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
                                        {!this.state.loading2 && <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report - ${this.state.month.month_value} ${this.state.periodeMR.value} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography>}
                                        {this.state.listSubcoMR.map((item, index) => {
                                            return (
                                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
                                                    <div style={{ display: 'flex' }}>
                                                        <img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
                                                        <Link to={{
                                                            pathname: `/home/monthly-report/`,
                                                            state: {
                                                                userType: 'user',
                                                                rawData: item,
                                                                month: this.state.month
                                                            }
                                                        }}>
                                                            <button
                                                                style={{
                                                                    backgroundColor: 'transparent',
                                                                    cursor: 'pointer',
                                                                    borderColor: 'transparent',
                                                                    margin: 5,
                                                                    outline: 'none'
                                                                }}>
                                                                <Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
                                                            </button>
                                                        </Link>
                                                    </div>
                                                    {item.is_submit === false && item.is_overdue && (
                                                        <div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
                                                            <Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
                                                        </div>
                                                    )}
                                                </div>
                                            )
                                        })}
                                    </Paper>
                                </div>
                            }
                            {this.state.accessRO &&
                                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                    <div style={{ display: 'flex' }}>
                                        <Autocomplete
                                            {...this.state.listPeriodeRO}
                                            id="periodeRO"
                                            onChange={(event, newInputValue) => this.setState({ periodeRO: newInputValue, loading: true }, () => {
                                                this.getListUserSubcoRO()
                                                // if (this.state.isApprover === true) {
                                                //         this.getCompanySubmitted()
                                                // } else {
                                                // this.setState({ visibleTableHistory: false })
                                                // this.getRevision()
                                                // }
                                            })}
                                            disableClearable
                                            style={{ minWidth: 210, marginRight: 20 }}
                                            renderInput={(params) => <TextField {...params} label="Periode RO" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.periodeRO}
                                        />
                                        <Autocomplete
                                            {...this.state.listQuarter}
                                            id="quartal"
                                            disabled={this.state.intent === 'Home' ? true : false}
                                            onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
                                                this.getListUserSubcoRO()
                                                // this.setState({ visibleTableHistory: false })
                                                // if (this.state.listCompany == null) {
                                                //     this.getCompanySubmitted()
                                                // } else {
                                                //     this.getRevision()
                                                // }
                                            })}
                                            disableClearable
                                            style={{ width: 210 }}
                                            renderInput={(params) => <TextField {...params} label="Quarter" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.quarter}
                                        />
                                    </div>
                                    <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
                                        {!this.state.loading2 && <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Rolling Outlook & CAT - ${this.state.periodeRO.value} ${this.state.quarter.value} ${this.state.valueSubmitRO}/${this.state.listSubcoRO.length}`}</Typography>}
                                        {this.state.listSubcoRO.map((item, index) => {
                                            return (
                                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
                                                    <div style={{ display: 'flex' }}>
                                                        <img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
                                                        <Link to={{
                                                            pathname: `/home/rolling-outlook/`,
                                                            state: {
                                                                userType: 'user',
                                                                rawData: {...item, quarter: this.state.quarter.value},
                                                            }
                                                        }}>
                                                            <button
                                                                style={{
                                                                    backgroundColor: 'transparent',
                                                                    cursor: 'pointer',
                                                                    borderColor: 'transparent',
                                                                    margin: 5,
                                                                    outline: 'none'
                                                                }}>
                                                                <Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
                                                            </button>
                                                        </Link>
                                                    </div>
                                                    {item.is_submit === false && item.is_overdue && (
                                                        <div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
                                                            <Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
                                                        </div>
                                                    )}
                                                </div>
                                            )
                                        })}
                                    </Paper>
                                </div>
                            }
                            {this.state.accessOL &&
                                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                                    <div style={{ display: 'flex' }}>
                                        <Autocomplete
                                            {...this.state.listPeriodeOL}
                                            id="periodeOL"
                                            onChange={(event, newInputValue) => this.setState({ periodeOL: newInputValue, loading: true }, () => {
                                                // if (this.state.isApprover === true) {
                                                //         this.getCompanySubmitted()
                                                // } else {
                                                // this.setState({ visibleTableHistory: false })
                                                // this.getRevision()
                                                // }\
                                                this.getListUserSubcoOL()
                                            })}
                                            disableClearable
                                            style={{ width: 250 }}
                                            renderInput={(params) => <TextField {...params} label="Periode OL" margin="normal" style={{ marginTop: 7 }} />}
                                            value={this.state.periodeOL}
                                        />
                                    </div>
                                    <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
                                        {!this.state.loading2 && <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Outlook Performance Appraisal - ${this.state.periodeOL.value} ${this.state.valueSubmit}/${this.state.listSubcoOL.length}`}</Typography>}
                                        {this.state.listSubcoOL.map((item, index) => {
                                            return (
                                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
                                                    <div style={{ display: 'flex' }}>
                                                        <img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
                                                        <Link to={{
                                                            pathname: `/home/outlook-performance/`,
                                                            state: {
                                                                userType: 'user',
                                                                rawData: item
                                                            }
                                                        }}>
                                                            <button
                                                                style={{
                                                                    backgroundColor: 'transparent',
                                                                    cursor: 'pointer',
                                                                    borderColor: 'transparent',
                                                                    margin: 5,
                                                                    outline: 'none'
                                                                }}>
                                                                <Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
                                                            </button>
                                                        </Link>
                                                    </div>
                                                    {item.is_submit === false && item.is_overdue && (
                                                        <div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
                                                            <Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
                                                        </div>
                                                    )}
                                                </div>
                                            )
                                        })}
                                    </Paper>
                                </div>
                            }
                        </div>
                    </div>
                }
            </div>
        );

    }
}

export default HomePage;