import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper } 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';
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: [],
valueSubmit: 0,
listdmb: [],
dataTableMB: [],
loading: false
}
}
componentDidMount() {
this.setState({ loading: true })
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)
})
}
}
})
// 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.getApprMat()
this.getListUserSubco()
this.getDashboardMB()
this.getDashboard()
}
componentDidUpdate() {
window.onpopstate = e => {
//your code...
this.props.selectIndex('Home')
}
}
getListUserSubco() {
api.create().getDashboardUser().then(response => {
// console.log(response);
let valueSubmit = 0
if (response.data) {
if (response.data.status === "success") {
response.data.data.map((item, index) => {
if (item.is_submit === true) {
valueSubmit += 1
}
})
this.setState({
listSubcoMB: response.data.data,
valueSubmit,
loading: false
})
}
}
})
}
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) => {
let statusConvert = item.status == 'approval_review'? 'Waiting For Review' : item.status == 'approval_proccess'? 'Waiting For Approval' : titleCase(item.status)
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
})
this.setState({ listDashboard, rawData: response.data.data })
}
})
}
getApprMat() {
this.setState({loading: true})
api.create().getAM().then((response) => {
// console.log(response);
let actAM = response.data.data.map((item, index) => {
if (String(item.status).toLocaleLowerCase() == 'active') {
return item
}
})
let userId = localStorage.getItem(Constant.USER)
let indexId = actAM.findIndex((val) => val.user_id == userId)
if (indexId === -1) {
this.setState({ isApprover: false })
this.getListUserSubco()
}
this.getDashboardMB()
// 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 })
}
})
}
render() {
const columns = ["#", "ID", "Company", "Report Type", "Revision",
{
name: "",
options: {
display: false
}
}, '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 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>
);
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
{this.state.loading && 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 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 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%' }}>
<div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography>
</div>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ width: 450, padding: 20, borderRadius: 10 }}>
<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_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>
);
}
}
export default HomePage;