HomePage.js

import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme } 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';

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

class HomePage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            userData: null,
            listDashboard: []
        }
    }

    componentDidMount() {
        let userId = localStorage.getItem(Constant.USER)
        api.create().getDetailUser(userId).then((response) => {
            if (response.data) {
                if (response.data.status === 'success') {
                    this.setState({ userData: response.data.data }, () => {
                        console.log(this.state.userData)
                    })
                }
            }
        })
        this.getDashboard()
    }

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

    getDashboard() {
        let listDashboard = []
        api.create().getDashboard().then((response) => {
            console.log(response);
            if (String(response.data.status).toLocaleLowerCase() == 'success') {
                let data = response.data.data
                data.map((item, index) => {
                    listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status])
                })
                this.setState({ listDashboard, rawData: response.data.data })
            }
        })
    }

    render() {
        const columns = ["#", "ID", "Nama Perusahaan", "Jenis Report", "Revisi", "Status", {
            name: "Action",
            options: {
                customBodyRender: (val, tableMeta) => {
                    // console.log(tableMeta);
                    return (
                        <div style={{ display: 'flex' }}>
                            <Link to={{
                                pathname: `/home/master-budget/`,
                                state: { 
                                    userType: 'approver',
                                    rawData: this.state.rawData[tableMeta.rowIndex]
                                }
                            }}>
                                <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: false,
            sort: false,
            responsive: "scroll",
            print: false,
            download: false,
            selectableRows: false,
            viewColumns: false,
            rowsPerPage: 5,
            search: false
        }
        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',
        }]
        return (
            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
                <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%' }}>
                    <div style={{ display: 'flex' }}>
                        <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Submission</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' }}>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>
        );
    }
}

export default HomePage;