import React, { Component } from 'react' import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core' import Constant from '../../library/Constant' import api from '../../api' import { titleCase } from '../../library/Utils' import { Autocomplete } from '@material-ui/lab' import TableSummaryTriputra from './TableSummaryTriputra' import { PropagateLoader } from 'react-spinners' import ReactTooltip from 'react-tooltip' import Images from '../../assets/Images' export default class SummaryOfTriputra extends Component { constructor(props) { super(props) this.state = { periode: '2020', perusahaan: 'TAP Group', laporan: 'Balance Sheet - Montly', tab: 0, listCompany: null, company: null, listPeriode: null, periode: null, reportType: [ { value: 1, label: 'MTD Report' }, { value: 2, label: 'YTD Report' }, { value: 3, label: 'CPSM Report' }, { value: 4, label: 'Historical' }, ], report: null, loading: false, previewTable: false } } selectTab = (event, newEvent) => { this.setState({ tab: newEvent }) } componentDidMount() { this.getDetailUser() this.setState({ report: this.state.reportType[0], loading: true }) } getDetailUser() { let userId = localStorage.getItem(Constant.USER) api.create().getDetailUser(userId).then((response) => { if (response.data) { if (response.ok) { if (response.data.status === 'success') { this.setState({ userCompany: response.data.data.company }, () => { this.getCompanyActive() }) } } } }) } getCompanyActive() { api.create().getPerusahaanActive().then((response) => { // console.log(response); if (response.data) { if (response.data.status === 'success') { let data = response.data.data let comID = this.state.rawData ? this.state.rawData.company_id : 0 let companyData = data.map((item) => { return { company_id: item.company_id, company_name: item.company_name, } }) let arrayBaru = [] this.state.userCompany.map((item, index) => { let indexID = companyData.findIndex((val) => val.company_id == item) if (indexID !== -1) { arrayBaru.push(companyData[indexID]) } }) let defaultProps = { options: arrayBaru, getOptionLabel: (option) => titleCase(option.company_name), }; let index = arrayBaru.findIndex((val) => val.company_id == comID) this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => { this.getLastPeriod() }) } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { if (response.data.message.includes("Someone Logged In")) { setTimeout(() => { localStorage.removeItem(Constant.TOKEN) window.location.reload(); }, 1000); } }) } } else { this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', listCompany: null, company: null }) } }) } getLastPeriod() { api.create().getLastPeriod(this.state.company.company_id).then(response => { // console.log(response); if (response.data.status === "success") { this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => { this.getPeriode() }) } }) } getPeriode() { api.create().getPeriodeTransaction().then(response => { let currentYear = new Date().getFullYear() // console.log(currentYear) if (response.data) { if (response.data.status === "success") { let data = [] response.data.data.map((item) => { if (this.state.isApprover) { if (item >= 2000 && item <= (Number(currentYear) + 1)) { data.push(item) } } else { if ((item >= 2000) && (item == this.state.lastPeriod || item < this.state.lastPeriod)) { data.push(item) } } }) let periodeData = data.map((item) => { return { periode: item, } }) let defaultProps = { options: periodeData, getOptionLabel: (option) => option.periode, }; let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod) let index = data.sort((a, b) => a - b).findIndex((val) => val === periode) // console.log(data) // console.log(this.state.latestPeriode) // console.log(periodeData) // console.log(index) this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => { // this.getDataTable() this.getSubmission() // if (this.state.isApprover === true) { // this.getCompanySubmitted() // } else { // this.getRevision() // } }) } } }) } getReportType() { let payload = { "company_id": this.state.company.company_id, "periode": this.state.periode.periode, "report_type": "Master Budget", } api.create().getReportTypeBody(payload).then(response => { console.log(response); if (response.data) { if (response.data.status === "success") { if (this.state.report.value === 1) { response.data.data.map((item, index) => { if (item.report_name === 'MTD Report') { this.setState({ revisionType: item.revision }, ()=> { this.getSubmission() }) } }) } else if (this.state.report.value === 1) { response.data.data.map((item, index) => { if (item.report_name === 'YTD Report') { this.setState({ revisionType: item.revision }, ()=> { this.getSubmission() }) } }) } else { this.setState({ revisionType: 0 }, ()=> { this.getSubmission() }) } } } }) } getSubmission() { this.setState({ loading: true }) let payload = { "company_id": this.state.company.company_id, "periode": this.state.periode.periode, "is_approver": true } api.create().getSubmission(payload).then(response => { // console.log(response) if (response.data) { if (response.data.status === "success") { this.setState({ submissionID: response.data.data.submission_id, lastRevision: response.data.data.last_revision, }, () => { this.getDataTable() }) } else { this.setState({ submissionID: null, loading: false }) } } }) } getDataTable() { let payload = { "report_id": this.state.report.value, "revision": this.state.lastRevision, "periode": this.state.periode.periode, "company_id": this.state.company.company_id, "submission_id": this.state.submissionID } if (this.state.report.value === 1) { api.create().getDetailReportMB(payload).then(response => { // console.log(response); // console.log(payload) let dataTable = [] if (response.data) { let res = response.data.data const handlePushChild = (item) => { let indexIDzz = dataTable.findIndex((val) => val[1] === item.id) if (indexIDzz === -1) { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.profit_loss.total_actual_before === null ? "0" : item.profit_loss.total_actual_before === "" ? "0" : item.profit_loss.total_actual_before, item.profit_loss.january, item.profit_loss.february, item.profit_loss.march, item.profit_loss.april, item.profit_loss.may, item.profit_loss.june, item.profit_loss.july, item.profit_loss.august, item.profit_loss.september, item.profit_loss.october, item.profit_loss.november, item.profit_loss.december, item.profit_loss.total_current_year, item.profit_loss.total_next_year, item.profit_loss.total_more_year, item.order ]) } if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } } res.map((item, index) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.profit_loss.total_actual_before === null ? "0" : item.profit_loss.total_actual_before === "" ? "0" : item.profit_loss.total_actual_before, item.profit_loss.january, item.profit_loss.february, item.profit_loss.march, item.profit_loss.april, item.profit_loss.may, item.profit_loss.june, item.profit_loss.july, item.profit_loss.august, item.profit_loss.september, item.profit_loss.october, item.profit_loss.november, item.profit_loss.december, item.profit_loss.total_current_year, item.profit_loss.total_next_year, item.profit_loss.total_more_year, item.order ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } }) // console.log(dataTable) this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true }) } else { this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false }) } }) } else if (this.state.report.value === 2) { api.create().getDetailReportMB(payload).then(response => { console.log(payload); console.log(response); let dataTable = [] if (response.data) { let res = response.data.data const handlePushChild = (item) => { let indexIDzz = dataTable.findIndex((val) => val[1] === item.id) if (indexIDzz === -1) { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.balance_sheet.total_actual_before === null ? "0.0" : item.balance_sheet.total_actual_before === "" ? "0.0" : item.balance_sheet.total_actual_before, Number(item.balance_sheet.january).toFixed(1), Number(item.balance_sheet.february).toFixed(1), Number(item.balance_sheet.march).toFixed(1), Number(item.balance_sheet.april).toFixed(1), Number(item.balance_sheet.may).toFixed(1), Number(item.balance_sheet.june).toFixed(1), Number(item.balance_sheet.july).toFixed(1), Number(item.balance_sheet.august).toFixed(1), Number(item.balance_sheet.september).toFixed(1), Number(item.balance_sheet.october).toFixed(1), Number(item.balance_sheet.november).toFixed(1), Number(item.balance_sheet.december).toFixed(1), Number(item.balance_sheet.total_current_year).toFixed(1), Number(item.balance_sheet.total_next_year).toFixed(1), Number(item.balance_sheet.total_more_year).toFixed(1), item.order, item.condition_it_should_be, item.condition_if_wrong ]) } if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } } res.map((item, index) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.balance_sheet.total_actual_before === null ? "0.0" : item.balance_sheet.total_actual_before === "" ? "0.0" : item.balance_sheet.total_actual_before, Number(item.balance_sheet.january).toFixed(1), Number(item.balance_sheet.february).toFixed(1), Number(item.balance_sheet.march).toFixed(1), Number(item.balance_sheet.april).toFixed(1), Number(item.balance_sheet.may).toFixed(1), Number(item.balance_sheet.june).toFixed(1), Number(item.balance_sheet.july).toFixed(1), Number(item.balance_sheet.august).toFixed(1), Number(item.balance_sheet.september).toFixed(1), Number(item.balance_sheet.october).toFixed(1), Number(item.balance_sheet.november).toFixed(1), Number(item.balance_sheet.december).toFixed(1), Number(item.balance_sheet.total_current_year).toFixed(1), Number(item.balance_sheet.total_next_year).toFixed(1), Number(item.balance_sheet.total_more_year).toFixed(1), item.order, item.condition_it_should_be, item.condition_if_wrong ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } }) this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true }) } else { this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false }) } }) } else if (this.state.report.value === 3) { api.create().getReportHierarkiPL(payload).then(response => { // console.log(response); if (response.data) { let dataTable = [] console.log(response) let res = response.data.data const handlePushChild = (item) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.profit_detail.total_actual_before === null ? "0" : item.profit_detail.total_actual_before === "" ? "0" : item.profit_detail.total_actual_before, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.january, formula: item.profit_detail.january_formula } : item.profit_detail.january, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.february, formula: item.profit_detail.february_formula } : item.profit_detail.february, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.march, formula: item.profit_detail.march_formula } : item.profit_detail.march, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.april, formula: item.profit_detail.april_formula } : item.profit_detail.april, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.may, formula: item.profit_detail.may_formula } : item.profit_detail.may, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.june, formula: item.profit_detail.june_formula } : item.profit_detail.june, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.july, formula: item.profit_detail.july_formula } : item.profit_detail.july, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.august, formula: item.profit_detail.august_formula } : item.profit_detail.august, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.september, formula: item.profit_detail.september_formula } : item.profit_detail.september, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.october, formula: item.profit_detail.october_formula } : item.profit_detail.october, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.november, formula: item.profit_detail.november_formula } : item.profit_detail.november, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.december, formula: item.profit_detail.december_formula } : item.profit_detail.december, item.profit_detail.total_current_year, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_next_year, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_more_year, item.order, item.condition_it_should_be, item.condition_if_wrong, item.profit_detail.forecast_formula == null ? [] : item.profit_detail.forecast_formula ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } } res.map((item, index) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.profit_detail.total_actual_before === null ? "0" : item.profit_detail.total_actual_before === "" ? "0" : item.profit_detail.total_actual_before, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.january, formula: item.profit_detail.january_formula } : item.profit_detail.january, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.february, formula: item.profit_detail.february_formula } : item.profit_detail.february, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.march, formula: item.profit_detail.march_formula } : item.profit_detail.march, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.april, formula: item.profit_detail.april_formula } : item.profit_detail.april, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.may, formula: item.profit_detail.may_formula } : item.profit_detail.may, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.june, formula: item.profit_detail.june_formula } : item.profit_detail.june, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.july, formula: item.profit_detail.july_formula } : item.profit_detail.july, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.august, formula: item.profit_detail.august_formula } : item.profit_detail.august, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.september, formula: item.profit_detail.september_formula } : item.profit_detail.september, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.october, formula: item.profit_detail.october_formula } : item.profit_detail.october, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.november, formula: item.profit_detail.november_formula } : item.profit_detail.november, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? { value: item.profit_detail.december, formula: item.profit_detail.december_formula } : item.profit_detail.december, item.profit_detail.total_current_year, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_next_year, item.type_report_id == 5 || item.type_report_id == 6 || item.type_report_id == 7 ? 0 : item.profit_detail.total_more_year, item.order, item.condition_it_should_be, item.condition_if_wrong, item.profit_detail.forecast_formula == null ? [] : item.profit_detail.forecast_formula ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } }) this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true }) } else { this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false }) } }) } else if (this.state.report.value === 4) { api.create().getReportHierarkiFR(payload).then(response => { // console.log(payload); console.log(response); let dataTable = [] if (response.data) { let res = response.data.data const handlePushChild = (item) => { let indexIDzz = dataTable.findIndex((val) => val[1] === item.id) if (indexIDzz === -1) { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.ratio.total_actual_before === null ? "0.0" : item.ratio.total_actual_before === "" ? "0.0" : item.ratio.total_actual_before, Number(item.ratio.january).toFixed(1), Number(item.ratio.february).toFixed(1), Number(item.ratio.march).toFixed(1), Number(item.ratio.april).toFixed(1), Number(item.ratio.may).toFixed(1), Number(item.ratio.june).toFixed(1), Number(item.ratio.july).toFixed(1), Number(item.ratio.august).toFixed(1), Number(item.ratio.september).toFixed(1), Number(item.ratio.october).toFixed(1), Number(item.ratio.november).toFixed(1), Number(item.ratio.december).toFixed(1), Number(item.ratio.total_current_year).toFixed(1), Number(item.ratio.total_next_year).toFixed(1), Number(item.ratio.total_more_year).toFixed(1), item.order, item.condition_it_should_be, item.condition_if_wrong ]) } if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } } res.map((item, index) => { dataTable.push([ item.type_report_id, item.id, item.parent, item.formula, item.level, item.description, item.ratio.total_actual_before === null ? "0.0" : item.ratio.total_actual_before === "" ? "0.0" : item.ratio.total_actual_before, Number(item.ratio.january).toFixed(1), Number(item.ratio.february).toFixed(1), Number(item.ratio.march).toFixed(1), Number(item.ratio.april).toFixed(1), Number(item.ratio.may).toFixed(1), Number(item.ratio.june).toFixed(1), Number(item.ratio.july).toFixed(1), Number(item.ratio.august).toFixed(1), Number(item.ratio.september).toFixed(1), Number(item.ratio.october).toFixed(1), Number(item.ratio.november).toFixed(1), Number(item.ratio.december).toFixed(1), Number(item.ratio.total_current_year).toFixed(1), Number(item.ratio.total_next_year).toFixed(1), Number(item.ratio.total_more_year).toFixed(1), item.order, item.condition_it_should_be, item.condition_if_wrong ]) if (item.children !== null) { if (item.children.length > 0) { item.children.map((items, indexs) => { handlePushChild(items) }) } } }) this.setState({ dataTable, previewTable: true, loading: false, previewDownload: true }) } else { this.setState({ dataTable: [], previewTable: false, loading: false, previewDownload: false }) } }) } } async downloadAllData() { if (this.state.report.value === 1) { alert("Download MTD Report Coming Soon") // let res = await fetch( // `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/db_report/export_master_budget?submission_id=${this.state.submissionID === null ? "" : this.state.submissionID}&&report_id=${this.state.report.value}&&company_id=${this.state.company.company_id}&&year=${this.state.periode.periode}&&revision=${this.state.lastRevision}` // ) // res = await res.blob() // this.setState({ loading: false }) // if (res.size > 0) { // let url = window.URL.createObjectURL(res); // let a = document.createElement('a'); // a.href = url; // a.download = 'Report DB Profit & Loss Detail.xlsx'; // a.click(); // } } else if (this.state.report.value === 2) { alert("Download YTD Report Coming Soon") // let url = `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/db_report/export_master_budget?submission_id=${this.state.submissionID}&&report_id=${this.state.report.value}&&company_id=${this.state.company.company_id}&&year=${this.state.periode.periode}&&revision=${this.state.lastRevision}` // let sub_null = `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/db_report/export_master_budget?submission_id=&&report_id=${this.state.report.value}&&company_id=${this.state.company.company_id}&&year=${this.state.periode.periode}&&revision=${this.state.lastRevision}` // // console.log(url); // let res = await fetch( // this.state.submissionID == null ? sub_null : url // ) // res = await res.blob() // this.setState({ loading: false }) // if (res.size > 0) { // let url = window.URL.createObjectURL(res); // let a = document.createElement('a'); // a.href = url; // a.download = 'Report DB Balance Sheet.xlsx'; // a.click(); // } } else if (this.state.report.value === 3) { alert("Download CPSM Report Coming Soon") // let res = await fetch( // `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/db_report_detail/export_master_budget?submission_id=${this.state.submissionID === null ? "" : this.state.submissionID}&&report_id=${this.state.report.value}&&company_id=${this.state.company.company_id}&&year=${this.state.periode.periode}&&revision=${this.state.lastRevision}` // ) // res = await res.blob() // this.setState({ loading: false }) // if (res.size > 0) { // let url = window.URL.createObjectURL(res); // let a = document.createElement('a'); // a.href = url; // a.download = 'Report DB Profit & Loss.xlsx'; // a.click(); // } } else if (this.state.report.value === 4) { alert("Download Historical Report Coming Soon") // let res = await fetch( // `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/db_report_detail/export_master_budget?submission_id=${this.state.submissionID === null ? "" : this.state.submissionID}&&report_id=${this.state.report.value}&&company_id=${this.state.company.company_id}&&year=${this.state.periode.periode}&&revision=${this.state.lastRevision}` // ) // res = await res.blob() // this.setState({ loading: false }) // if (res.size > 0) { // let url = window.URL.createObjectURL(res); // let a = document.createElement('a'); // a.href = url; // a.download = 'Report DB Financial Ratio.xlsx'; // a.click(); // } } else { // setTimeout(() => { // this.setState({ loading: false }) // }, 1000); } } render() { 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' }} ref={this.myRef}> <div> <div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <Typography style={{ fontSize: '16px', color: 'white' }}>Summary Triputra Group Report</Typography> </div> <div style={{ padding: 20, width: '100%' }}> <Paper style={{ paddingTop: 10 }}> <div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Financial Summary of Triputra Group</Typography> </div> <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}> <div style={{ marginTop: 15 }}> <Autocomplete options={this.state.reportType} getOptionLabel={(option) => titleCase(option.label)} id="typereport" onChange={(event, newInputValue) => this.setState({ report: newInputValue, loading: true, previewTable: false }, () => { this.getSubmission() })} disableClearable style={{ width: 250 }} renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />} value={this.state.report} /> </div> <div style={{ marginTop: 15 }}> <Autocomplete {...this.state.listPeriode} id="periode" onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true, previewTable: false }, () => { this.getSubmission() })} disabled={this.state.intent === 'Home' ? true : false} disableClearable style={{ width: 250 }} renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />} value={this.state.periode} /> </div> </div> <div> <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0px 20px 10px 20px' }}> <div></div> {this.state.previewDownload && ( <div style={{ width: '50%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}> <a data-tip={'Download'} data-for="download"> <button style={{ backgroundColor: 'transparent', cursor: 'pointer', borderColor: 'transparent', margin: 5, outline: 'none' }} onClick={() => this.setState({ loading: false }, () => { setTimeout(() => { this.downloadAllData() }, 100); })} > <img src={Images.download} /> </button> </a> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> </div> )} </div> {this.state.loading && loadingComponent} {this.state.previewTable && ( <TableSummaryTriputra width={this.props.width} height={this.props.height} open={this.props.open} type={this.state.report ? this.state.report.value : 1} dataTable={this.state.dataTable} periode={this.state.periode ? this.state.periode.periode : null} /> )} </div> </Paper> </div> </div> </div> ) } }