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 = [] let rawData = [] 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]) rawData.push(item) }) this.setState({ listDashboard, rawData }) } }) } getApprMat() { this.setState({loading: true}) 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) let indexId = actAMActive.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 (
); } } }] 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 = (
); return (
{this.state.loading && loadingComponent} {this.state.isApprover === true ?
{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}
Waiting Your Approval
Master Budget & CAT
{/*
Status Laporan
Budget Tahunan - 2021
Submit 92.8 %
-0.6%
On Time 6.1 %
0.7%
Overdue 1.1 %
0.1%
Laporan Bulanan - Oct 2020
Submit 92.8 %
-0.6%
On Time 6.1 %
0.7%
Overdue 1.1 %
0.1%
Lainnya
Submit 92.8 %
-0.6%
On Time 6.1 %
0.7%
Overdue 1.1 %
0.1%
*/}
:
{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}
Tasks to be Complete
{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`} {this.state.listSubcoMB.map((item, index) => { return (
{item.is_overdue && (
Overdue
)}
) })}
}
); } } export default HomePage;