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

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

class HomePage extends Component {
    render() {
        const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
            name: "Action",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                    marginRight: 10
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.editCopy2} />
                            </button>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent'
                                }}
                                onClick={() => null}
                            >
                                <img src={Images.editCopy} />
                            </button>
                        </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' }}>Selamat Datang, John!</Typography>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <div style={{ display: 'flex' }}>
                        <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Menunggu Persetujuan Anda</Typography>
                    </div>

                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <div>
                        <MuiThemeProvider theme={getMuiTheme()}>
                            <MUIDataTable
                                data={data}
                                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;