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;