Skip to content

T
Tia-dev
Commit 00d52596 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'riri' into 'master' 

olpa pl

See merge request !1274
parents 35a51ad9 7710edae
Hide whitespace changes
Inline Side-by-side
Showing with 1922 additions and 1603 deletions
src/container/OutlookPA/ProfitLossOLPA.js
View file @ 00d52596
This source diff could not be displayed because it is too large. You can view the blob instead.
src/container/RollingOutlook/ProfitLossRO.js
View file @ 00d52596
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core';
import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, Paper, Snackbar, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images';
import React, { Component } from 'react'
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import Images from '../../assets/Images';
import api from '../../api';
import NumberFormat from 'react-number-format';
import * as R from 'ramda';
import { PropagateLoader } from 'react-spinners';
import { ExcelRenderer } from 'react-excel-renderer';
import Constant from '../../library/Constant';
import UploadFile from "../../library/Upload";
import { Alert } from '@material-ui/lab';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
......@@ -21,6 +22,15 @@ const LightTooltip = withStyles((theme) => ({
},
}))(Tooltip);
const LightTooltipError = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(255, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
......@@ -35,7 +45,8 @@ const style = {
const style2 = {
position: "sticky",
background: "white",
zIndex: 100
zIndex: 100,
top: 0
};
const stylenotes = {
position: "sticky",
......@@ -50,28 +61,48 @@ const styleNotesEmpty = {
zIndex: 99,
left: 0
}
// const StyledButton = withStyles({
// root: {
// background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
// borderRadius: 3,
// border: 0,
// color: 'white',
// height: 48,
// padding: '0 30px',
// boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
// },
// label: {
// textTransform: 'capitalize',
// },
// })(Input);
export default class ProfitLossRO extends Component {
export default class ProfitLossROO extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: true,
get_for: "view",
visiblePLRO: true,
minValue: 0,
maxValue: 0,
updateBy: '-',
notesUpdate: '-',
bebas: false,
judulColumn: null,
handleTekTekTek: 0,
saveDraft: true,
buttonError: true,
viewOnly: true,
visibleUpload: false
get_for: 'view'
}
// this.handleValue = this.handleValue.bind(this)
// this.fileHandler = this.fileHandler.bind(this);
this.fileHandler = this.fileHandler.bind(this);
}
componentDidMount() {
this.getItemHierarki()
console.log(this.props.isApprover)
// this.getLatestUpdate()
// this.getSettingControl()
// this.handleViewOnly()
}
......@@ -110,12 +141,81 @@ export default class ProfitLossRO extends Component {
handleGetFor(type) {
this.setState({ get_for: type }, () => {
// this.getLatestUpdate()
// this.getSettingControl()
this.getItemHierarki()
})
}
// getSettingControl() {
// let body = {
// group: 'THRESHOLD_VARIANCE',
// company_id: this.props.company.company_id,
// type: 'PNL'
// }
// api.create().getAllSettingByType(body).then(response => {
// console.log(response);
// if (response.data) {
// if (response.data.status === 'success') {
// this.setState({
// // valueThreshold: response.data.data[0] ? response.data.data[0].value : null,
// minValue: response.data.data[0] ? Number(response.data.data[0].min_value) : -10,
// maxValue: response.data.data[0] ? Number(response.data.data[0].max_value) : 10,
// }, () => {
// this.getItemHierarki()
// })
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
// 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', loading: false })
// }
// })
// }
// getLatestUpdate() {
// let payload = {
// "report_id": this.props.report_id,
// "revision": Number(this.props.revision),
// "periode": this.props.periode,
// "company_id": this.props.company.company_id,
// "monthly_report_id": this.props.monthlyReportId,
// // "months": this.props.month.month_id
// }
// api.create().getLastestUpdateMR(payload).then(response => {
// console.log(response)
// if (response.data) {
// if (response.data.status === "success") {
// this.setState({
// updateBy: response.data.data.latest_update === null ? '-' : response.data.data.latest_update,
// notesUpdate: response.data.data.notes_update === null ? '-' : response.data.data.notes_update
// })
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
// 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', loading: false })
// }
// })
// }
getItemHierarki() {
this.setState({ loading: true, judulColumn: null })
let payload = {
"company_id": this.props.company.company_id,
"get_for": this.state.get_for,
......@@ -125,12 +225,14 @@ export default class ProfitLossRO extends Component {
"revision": Number(this.props.revision),
"rolling_outlook_id": this.props.rollingOutlookID
}
console.log(payload);
api.create().getRollingOutlookPL(payload).then(response => {
console.log(payload);
console.log(response);
let dataTable = []
let err = false
if (response.data) {
if (response.data.status == 'success') {
if (response.data.status === 'success') {
let res = response.data.data
const handlePushChild = (item) => {
let indexIDzz = dataTable.findIndex((val) => val[1] === item.id)
......@@ -159,8 +261,6 @@ export default class ProfitLossRO extends Component {
item.profit_loss.current_year_total === "" ? "0" : item.profit_loss.current_year_total,
item.profit_loss.actual_formula === "" ? "0" : item.profit_loss.actual_formula,
item.order,
// item.condition_it_should_be,
// item.condition_if_wrong
])
}
if (item.children !== null) {
......@@ -174,30 +274,28 @@ export default class ProfitLossRO extends Component {
res.map((item, index) => {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.profit_loss.notes,
item.profit_loss.last_year_total === "" ? "0" : item.profit_loss.last_year_total,
item.profit_loss.january === "" ? "0" : item.profit_loss.january,
item.profit_loss.february === "" ? "0" : item.profit_loss.february,
item.profit_loss.march === "" ? "0" : item.profit_loss.march,
item.profit_loss.april === "" ? "0" : item.profit_loss.april,
item.profit_loss.may === "" ? "0" : item.profit_loss.may,
item.profit_loss.june === "" ? "0" : item.profit_loss.june,
item.profit_loss.july === "" ? "0" : item.profit_loss.july,
item.profit_loss.august === "" ? "0" : item.profit_loss.august,
item.profit_loss.september === "" ? "0" : item.profit_loss.september,
item.profit_loss.october === "" ? "0" : item.profit_loss.october,
item.profit_loss.november === "" ? "0" : item.profit_loss.november,
item.profit_loss.december === "" ? "0" : item.profit_loss.december,
item.profit_loss.current_year_total === "" ? "0" : item.profit_loss.current_year_total,
item.profit_loss.actual_formula === "" ? "0" : item.profit_loss.actual_formula,
item.order,
// item.condition_it_should_be,
// item.condition_if_wrong
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.profit_loss.notes,
item.profit_loss.last_year_total === "" ? "0" : item.profit_loss.last_year_total,
item.profit_loss.january === "" ? "0" : item.profit_loss.january,
item.profit_loss.february === "" ? "0" : item.profit_loss.february,
item.profit_loss.march === "" ? "0" : item.profit_loss.march,
item.profit_loss.april === "" ? "0" : item.profit_loss.april,
item.profit_loss.may === "" ? "0" : item.profit_loss.may,
item.profit_loss.june === "" ? "0" : item.profit_loss.june,
item.profit_loss.july === "" ? "0" : item.profit_loss.july,
item.profit_loss.august === "" ? "0" : item.profit_loss.august,
item.profit_loss.september === "" ? "0" : item.profit_loss.september,
item.profit_loss.october === "" ? "0" : item.profit_loss.october,
item.profit_loss.november === "" ? "0" : item.profit_loss.november,
item.profit_loss.december === "" ? "0" : item.profit_loss.december,
item.profit_loss.current_year_total === "" ? "0" : item.profit_loss.current_year_total,
item.profit_loss.actual_formula === "" ? "0" : item.profit_loss.actual_formula,
item.order,
])
if (item.children !== null) {
if (item.children.length > 0) {
......@@ -207,7 +305,9 @@ export default class ProfitLossRO extends Component {
}
}
})
console.log(dataTable)
// if (err === true) {
// this.setState({ bebas: true })
// }
this.setState({ dataTable, loading: false, buttonError: true, saveDraft: true, refresh: false })
} else {
this.setState({ loading: false, alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
......@@ -222,6 +322,7 @@ export default class ProfitLossRO extends Component {
} else {
this.setState({ dataTable, loading: false, buttonError: true, saveDraft: true, refresh: false })
}
console.log(dataTable);
})
}
......@@ -259,52 +360,9 @@ export default class ProfitLossRO extends Component {
// }
}
handleValidate() {
let data = []
// console.log(JSON.stringify(this.state.dataTable))
// this.state.dataTable.map(i => {
// data.push({
// item_report_id: i[1],
// notes: i[6] == null || i[6] == "" ? "" : String(i[6]),
// total_actual_before: String(i[7]),
// january: i[0] === 3 && i[8] === "" ? "0" : String(i[8]),
// february: i[0] === 3 && i[9] === "" ? "0" : String(i[9]),
// march: i[0] === 3 && i[10] === "" ? "0" : String(i[10]),
// april: i[0] === 3 && i[11] === "" ? "0" : String(i[11]),
// may: i[0] === 3 && i[12] === "" ? "0" : String(i[12]),
// june: i[0] === 3 && i[13] === "" ? "0" : String(i[13]),
// july: i[0] === 3 && i[14] === "" ? "0" : String(i[14]),
// august: i[0] === 3 && i[15] === "" ? "0" : String(i[15]),
// september: i[0] === 3 && i[16] === "" ? "0" : String(i[16]),
// october: i[0] === 3 && i[17] === "" ? "0" : String(i[17]),
// november: i[0] === 3 && i[18] === "" ? "0" : String(i[18]),
// december: i[0] === 3 && i[19] === "" ? "0" : String(i[19]),
// total_current_year: i[0] === 3 && i[20] === "" ? "0" : String(i[20]),
// total_next_year: i[0] === 3 && i[21] === "" ? "0" : String(i[21]),
// total_more_year: i[0] === 3 && i[22] === "" ? "0" : String(i[22])
// })
// })
// let payload = {
// "submission_id": this.props.submissionID,
// "company_id": this.props.company.company_id,
// "periode": this.props.periode,
// "report_id": this.props.report_id,
// "profit_loss": data,
// "status": "submitted"
// }
// console.log(payload)
// api.create().validateSubmitReport(payload).then((response) => {
// console.log(response)
// if (response.data.data.result) {
this.setState({ loading: false, buttonError: false, editable: false })
// } else {
// this.setState({ loading: false, buttonError: true, editable: true })
// }
// })
}
backToRollingOutlook(type) {
this.setState({ loading: true })
console.log('test');
// this.setState({ loading: true })
let data = []
this.state.dataTable.map(i => {
data.push({
......@@ -330,41 +388,271 @@ export default class ProfitLossRO extends Component {
"company_id": this.props.company.company_id,
"periode": this.props.periode,
"report_id": this.props.report_id,
// "months": this.props.month.month_id,
"months": 0,
"status": type,
"balance_sheet": data
}
console.log(payload);
// console.log(JSON.stringify(payload));
api.create('UPLOAD').createRollingOutlookBS(payload).then(response => {
console.log(payload);
console.log(response);
// console.log(JSON.stringify(payload))
if (response.data) {
if (response.data.status === "success") {
if (type == 'submitted') {
// this.props.saveToMonthlyReport('BS')
// this.props.saveToMonthlyReport('PL')
this.props.onClickClose()
} else {
// this.props.saveToMonthlyReport()
// this.props.saveToMonthlyReport()
this.props.onClickClose()
}
} else {
this.setState({ loading: false, handleTekTekTek: 0 }, () => {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false, handleTekTekTek: 0 }, () => {
document.body.style.overflow = 'unset';
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
// this.props.saveToMonthlyReport()
this.props.onClickClose()
})
}
} else {
this.setState({ loading: false, handleTekTekTek: 0 })
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false, handleTekTekTek: 0 })
}
})
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
console.log(resp)
if (err) {
console.log(err);
}
else {
let isi = resp.rows.slice(3)
// console.log(resp.rows[2]);
let payload = []
let reg = /^[-+]?(?:[0-9]+,)*[0-9]+(?:\.[0-9]+)?$/;
isi.map((i, index) => {
if (i.length > 0) {
payload.push({
orders: i[0] === undefined ? "" : String(i[0]).trim(),
item_report_id: i[1] === undefined ? "" : String(i[1]).trim(),
item_report: i[2] === undefined ? "" : String(i[2]).trim(),
notes: i[3] === undefined ? "" : String(i[3]).trim(),
actual: i[4] === undefined ? "0" : reg.test(String(i[4])) === false ? "0" : String(i[4]).trim(),
mtd_vs_mb: i[5] === undefined ? "" : String(i[5]).trim(),
mtd_vs_rb: i[6] === undefined ? "" : String(i[6]).trim(),
mtd_vs_previous_month: i[7] === undefined ? "" : String(i[7]).trim(),
})
}
})
let body = {
company_id: this.props.company.company_id,
periode: this.props.periode,
report_id: this.props.report_id,
months: this.props.month.month_id,
status: 'submitted',
profit_loss: payload
}
console.log(body)
this.setState({ payload: body, judul: resp.rows[1][0], judulColumn: resp.rows[0][0] })
}
});
}
checkUpload() {
api.create().checkUploadMonthlyReportPL(this.state.payload).then(response => {
// console.log(JSON.stringify(this.state.payload));
console.log(response)
if (response.data) {
if (response.data.status === 'success') {
this.setState({ visibleUpload: false, visiblePLRO: false, loading: true })
let dataTable = response.data.data.map((item, index) => {
return [
item.type_report_id,
item.item_report_id,
item.parent,
item.formula,
item.level,
item.item_report,
item.notes == null || item.notes == "null" ? "" : item.notes,
item.rolling_outlook === null ? "" : item.rolling_outlook === "" ? "" : item.rolling_outlook,
item.master_budget === "" ? "" : item.master_budget,
item.rolling_budget === "" ? "" : item.rolling_budget,
item.actual === "" ? "" : item.actual,
0,
item.actual_previous_month === null ? "" : item.actual_previous_month === "" ? "" : item.actual_previous_month,
// 0,
// 0,
// 0,
// 0,
// 0,
// 0,
item.amount_act_vs_previous_month,
item.percent_act_vs_previous_month,
item.amount_act_vs_mb,
item.percent_act_vs_mb,
item.amount_act_vs_rb,
item.percent_act_vs_rb,
item.mtd_vs_mb,
item.mtd_vs_rb,
item.mtd_vs_previous_month,
item.orders,
item.ytd_actual === null ? "" : item.ytd_actual === "" ? "" : item.ytd_actual,
item.error
]
})
this.setState({ dataTable, dataLoaded: true, loading: false, buttonError: false }, () => {
this.state.dataTable.map(item => {
if (item[24].length > 0) {
// console.log('masuk')
this.setState({ buttonError: true, errorPreview: true })
}
})
// console.log(this.state.buttonError)
})
console.log(dataTable);
}
}
})
}
uploadProfitLossMR(type) {
let data = []
this.state.dataTable.map(i => {
data.push({
item_report_id: i[1],
notes: String(i[6]),
rolling_outlook: String(Number(i[7]).toFixed(1)),
master_budget: String(Number(i[8]).toFixed(1)),
rolling_budget: String(Number(i[9]).toFixed(1)),
actual: String(Number(i[10]).toFixed(1)),
ytd_actual: String(Number(i[11]).toFixed(1)),
actual_previous_month: String(Number(i[12]).toFixed(1)),
amount_act_vs_previous_month: String(Number(i[13]).toFixed(1)),
percent_act_vs_previous_month: i[14],
amount_act_vs_mb: String(Number(i[15]).toFixed(1)),
percent_act_vs_mb: i[16],
amount_act_vs_rb: String(Number(i[17]).toFixed(1)),
percent_act_vs_rb: i[18],
mtd_vs_mb: String(i[19]),
mtd_vs_rb: String(i[20]),
mtd_vs_previous_month: String(i[21]),
})
})
let body = {
"monthly_report_id": this.props.monthlyReportId,
"company_id": this.props.company.company_id,
"periode": this.props.periode,
"report_id": this.props.report_id,
"months": this.props.month.month_id,
"status": type,
"profit_loss": data
}
console.log(data);
api.create('UPLOAD').uploadMonthlyReportPL(body).then(response => {
console.log(response);
if (response.data) {
if (response.ok) {
if (response.data.status === "success") {
if (type == 'submitted') {
this.props.saveToMonthlyReport('PL')
} else {
this.props.saveToMonthlyReport()
}
// this.props.onClickClose()
// this.props.getReport()
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false, handleTekTekTek: 0 }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
// alert(response.data.status)
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false, handleTekTekTek: 0 })
}
} else {
this.setState({ alert: true, messageAlert: 'Error saving data. Please try again', tipeAlert: 'error', loading: false, handleTekTekTek: 0 })
}
})
}
handleValidate() {
// let data = []
// let err = false
// this.state.dataTable.map((i, index) => {
// data.push({
// "item_report_id": i[1],
// "notes": i[6],
// "rolling_outlook": i[7],
// "master_budget": i[8],
// "rolling_budget": i[9],
// "actual": i[10],
// "ytd_actual": i[11],
// "actual_previous_month": i[12],
// "amount_act_vs_previous_month": i[13],
// "percent_act_vs_previous_month": i[14],
// "amount_act_vs_mb": i[15],
// "percent_act_vs_mb": i[16],
// "amount_act_vs_rb": i[17],
// "percent_act_vs_rb": i[18],
// "mtd_vs_mb": i[19],
// "mtd_vs_rb": i[20],
// "mtd_vs_previous_month": i[21],
// })
// })
// console.log(this.state.dataTable);
// console.log(JSON.stringify(data))
// let payload = {
// "monthly_report_id": this.props.monthlyReportId,
// "company_id": this.props.company.company_id,
// "periode": this.props.periode,
// "report_id": this.props.report_id,
// "status": "submitted",
// "months": this.props.month.month_id,
// "profit_loss": data
// }
// console.log(JSON.stringify(payload));
// api.create().validateSubmitReportPL(payload).then((response) => {
// console.log(response.data.data.result)
// console.log(err);
// if (response.data) {
// if (response.data.status === "success") {
// if (response.data.data.result && err === false) {
this.setState({ loading: false, buttonError: false, editable: false, saveDraft: false })
// } else {
// this.setState({ loading: false, buttonError: true, editable: true, saveDraft: false })
// }
// } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
// 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', loading: false })
// }
// })
}
closeAlert() {
this.setState({ alert: false })
}
render() {
let dataTable2 = this.state.dataTable
......@@ -548,10 +836,10 @@ export default class ProfitLossRO extends Component {
options: {
customHeadRender: (columnMeta) => (
dataTable2.length > 0 ?
<TableCell style={{ ...stylenotes, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96 }}>
<TableCell style={{ ...stylenotes, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> :
<TableCell style={{ ...styleNotesEmpty, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96 }}>
<TableCell style={{ ...styleNotesEmpty, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
......@@ -599,7 +887,7 @@ export default class ProfitLossRO extends Component {
}
}
}, {
name: `31 Dec ${Number(this.props.periode) - 1} Actual`,
name: `${Number(this.props.periode) - 1} Total`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
......@@ -1873,7 +2161,7 @@ export default class ProfitLossRO extends Component {
}
}
}, {
name: `${this.props.periode} Outlook`,
name: `${this.props.periode} Total`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96, borderRight: '1px #fff solid' }}>
......@@ -1990,136 +2278,281 @@ export default class ProfitLossRO extends Component {
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Rolling Outlook & Revision CAT</Typography>
</div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Rolling Outlook - Profit Loss</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{this.state.visiblePLRO ?
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Rolling Outlook - Profit Loss</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.props.isApprover === true || this.state.get_for == 'view' ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.refresh && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 5 }}>Notes : {this.state.notesUpdate}</Typography>
</div>
{/* {this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
(this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? */}
<div className="grid grid-2x" style={{ padding: 20 }}>
<div className="col-1" style={{ paddingLeft: 0 }}>
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
{this.props.isApprover === true ?
<div className="col-2">
</div> :
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}>
{this.state.get_for == 'view' && this.state.viewOnly &&
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true, refresh: true }, () => {
this.handleGetFor('edit')
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Edit</Typography>
</div>
</button>}
{this.state.get_for == 'edit' && <button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true }, () => {
setTimeout(() => {
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>}
{this.state.get_for == 'edit' && <button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() =>
this.state.saveDraft === true ?
this.setState({ alert: true, messageAlert: 'Data Incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
this.backToRollingOutlook('draft')
})
}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>}
{this.state.get_for == 'edit' && <button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data Incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
this.backToRollingOutlook('submitted')
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>}
</div>
}
</div>
{/* : null
} */}
</Paper>
:
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Rolling Outlook - Profit Loss</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ width: '50%' }}>
{this.props.isApprover === true || this.state.get_for == 'view' ?
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div> :
<div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadTemplate()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() =>
this.setState({ loading: true }, () => {
setTimeout(() => {
this.downloadAllData()
}, 100);
})}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div>
}
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Notes : {this.state.notes}</Typography>
</div>
<div className="grid grid-2x" style={{ padding: 20 }}>
<div className="col-1" style={{ paddingLeft: 0 }}>
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1" style={{ paddingLeft: 0 }}>
<button
type="button"
onClick={() => this.setState({ loading: true, visiblePLRO: true }, () => {
setTimeout(() => {
this.getItemHierarki()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
</button>
</div>
{this.props.isApprover === true ?
<div className="col-2">
</div> :
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}>
{this.state.get_for == 'view' && this.state.viewOnly &&
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%', paddingRight: 5 }}>
<button
className="button"
type="button"
......@@ -2128,92 +2561,112 @@ export default class ProfitLossRO extends Component {
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true }, () => {
this.handleGetFor('edit')
setTimeout(() => {
// this.setState({ loading: false })
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Edit</Typography>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>
}
{this.state.get_for == 'edit' && <button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => {
this.setState({ loading: true, dataTable: dataTable2 }, () => {
setTimeout(() => {
this.handleValidate()
}, 100);
})
}}
>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
</div>
</button>}
{this.state.get_for === 'edit' && <button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() =>
this.state.saveDraft ?
this.setState({ alert: true, messageAlert: 'Data Incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
this.backToRollingOutlook('draft')
})
}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>}
{this.state.get_for === 'edit' && <button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1 }, () => {
this.backToRollingOutlook('submitted')
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>}
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() =>
this.state.saveDraft === true ?
this.setState({ alert: true, messageAlert: 'Data Incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
this.uploadProfitLossMR('draft')
})
}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
</div>
</button>
<button
type="button"
// disabled={this.state.buttonError}
onClick={() =>
this.state.buttonError ?
this.setState({ alert: true, messageAlert: 'Data Incomplete !', tipeAlert: 'error' })
:
this.state.handleTekTekTek == 1 ? null :
this.setState({ handleTekTekTek: 1, loading: true }, () => {
this.uploadProfitLossMR('submitted')
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
</div>
</button>
</div>
</div>
}
</div>
</Paper>
</div>
</Paper>}
</div>
{this.state.visibleUpload && (
alert("Coming Soon...")
// <div className="test app-popup-show">
// <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
// <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
// <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
// <div className="popup-title">
// <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
// </div>
// </div>
// <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
// <button
// type="button"
// className="btn btn-circle btn-white"
// onClick={() => this.setState({ visibleUpload: false })}
// >
// <img src={Images.close} />
// </button>
// </div>
// </div>
// <UploadFile
// type={this.state.uploadStatus}
// percentage={this.state.percentage}
// result={this.state.result}
// acceptedFiles={["xlsx"]}
// onHandle={(dt) => {
// this.fileHandler(dt)
// this.setState({ uploadStatus: 'idle', percentage: '0' })
// }}
// onUpload={() => {
// String(this.state.judulColumn).includes("TEMPLATE") && String(this.state.judulColumn).includes("UPLOAD") && String(this.state.judul).includes("MONTHLY") && String(this.state.judul).includes("REPORT") && String(this.state.judul).includes("PROFIT") && String(this.state.judul).includes("LOSS") ?
// this.checkUpload() :
// this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
// }}
// />
// </div>
// </div>
)}
</div>
)
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment