Skip to content

T
Tia-dev
Commit 3a7aef76 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents 833c9a31 cf98c4e1
Hide whitespace changes
Inline Side-by-side
Showing with 632 additions and 11 deletions
src/api/index.js
View file @ 3a7aef76
...@@ -252,7 +252,8 @@ const create = (type = "") => { ...@@ -252,7 +252,8 @@ const create = (type = "") => {
// Monthly // Monthly
const getMonthlyReportID = (body) => api.post('transaction/monthly_report_bs/get_monthly_report_id', body) const getMonthlyReportID = (body) => api.post('transaction/monthly_report_bs/get_monthly_report_id', body)
const getHierarkiMontlyReport = (body) => api.post('transaction/monthly_report_bs/get_report_hierarki', body) const getHierarkiMontlyReportBS = (body) => api.post('transaction/monthly_report_bs/get_report_hierarki', body)
const getHierarkiMontlyReportOI = (body) => api.post('transaction/monthly_report_oi/get_report_hierarki', body)
//Template //Template
const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`) const downloadTemplate = (fileName, fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
...@@ -435,7 +436,8 @@ const create = (type = "") => { ...@@ -435,7 +436,8 @@ const create = (type = "") => {
getSubmitOI, getSubmitOI,
getLastPeriodOI, getLastPeriodOI,
getDashboardUser, getDashboardUser,
getHierarkiMontlyReport, getHierarkiMontlyReportBS,
getHierarkiMontlyReportOI,
getDetailReportCF, getDetailReportCF,
getReportHierarkiPL, getReportHierarkiPL,
getMonthlyReportID, getMonthlyReportID,
......
src/container/Laporan/SubHolding.js
View file @ 3a7aef76
...@@ -580,7 +580,7 @@ export default class SubHolding extends Component { ...@@ -580,7 +580,7 @@ export default class SubHolding extends Component {
async downloadAllData() { async downloadAllData() {
if (this.state.report.value === 1) { if (this.state.report.value === 1) {
let res = await fetch( let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/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}` `https://tia.eksad.com/tia-reporting-dev/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.revisionType}`
) )
res = await res.blob() res = await res.blob()
this.setState({ loading: false }) this.setState({ loading: false })
...@@ -592,11 +592,8 @@ export default class SubHolding extends Component { ...@@ -592,11 +592,8 @@ export default class SubHolding extends Component {
a.click(); a.click();
} }
} else if (this.state.report.value === 2) { } else if (this.state.report.value === 2) {
let url = `https://tia.eksad.com/tia-reporting-dev/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 = `https://tia.eksad.com/tia-reporting-dev/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( let res = await fetch(
this.state.submissionID == null ? sub_null : url `https://tia.eksad.com/tia-reporting-dev/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.revisionType}`
) )
res = await res.blob() res = await res.blob()
this.setState({ loading: false }) this.setState({ loading: false })
...@@ -609,7 +606,7 @@ export default class SubHolding extends Component { ...@@ -609,7 +606,7 @@ export default class SubHolding extends Component {
} }
} else if (this.state.report.value === 3) { } else if (this.state.report.value === 3) {
let res = await fetch( let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/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}` `https://tia.eksad.com/tia-reporting-dev/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.revisionType}`
) )
res = await res.blob() res = await res.blob()
this.setState({ loading: false }) this.setState({ loading: false })
...@@ -621,10 +618,10 @@ export default class SubHolding extends Component { ...@@ -621,10 +618,10 @@ export default class SubHolding extends Component {
a.click(); a.click();
} }
} else if (this.state.report.value === 4) { } else if (this.state.report.value === 4) {
let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/db_ratio/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}` let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/db_ratio/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.revisionType}`
console.log(url); console.log(url);
let res = await fetch( let res = await fetch(
`https://tia.eksad.com/tia-reporting-dev/public/transaction/db_ratio/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}` `https://tia.eksad.com/tia-reporting-dev/public/transaction/db_ratio/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.revisionType}`
) )
res = await res.blob() res = await res.blob()
this.setState({ loading: false }) this.setState({ loading: false })
......
src/container/MonthlyReport.js
View file @ 3a7aef76
...@@ -18,6 +18,7 @@ import ListOfCreditFacilities from './MonthlyReport/ListOfCreditFacilities' ...@@ -18,6 +18,7 @@ import ListOfCreditFacilities from './MonthlyReport/ListOfCreditFacilities'
import { PropagateLoader } from 'react-spinners'; import { PropagateLoader } from 'react-spinners';
import MuiAlert from '@material-ui/lab/Alert'; import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../library/Constant'; import Constant from '../library/Constant';
import OperatingIndicatorMR from './MonthlyReport/OperatingIndicatorMR';
var ct = require("../library/CustomTable"); var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -44,6 +45,7 @@ export default class MonthlyReport extends Component { ...@@ -44,6 +45,7 @@ export default class MonthlyReport extends Component {
visiblePL: false, visiblePL: false,
visibleFAM: false, visibleFAM: false,
visibleCAT: false, visibleCAT: false,
visibleOI: false,
listAttachment: [], listAttachment: [],
visibleUpload: false, visibleUpload: false,
lastRevision: 0, lastRevision: 0,
...@@ -325,6 +327,7 @@ export default class MonthlyReport extends Component { ...@@ -325,6 +327,7 @@ export default class MonthlyReport extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: false, visibleTP: false,
visibleLOCF: false, visibleLOCF: false,
visibleOI: false,
}) })
} else if (item === 'Profit Loss') { } else if (item === 'Profit Loss') {
this.setState({ this.setState({
...@@ -335,6 +338,7 @@ export default class MonthlyReport extends Component { ...@@ -335,6 +338,7 @@ export default class MonthlyReport extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: false, visibleTP: false,
visibleLOCF: false, visibleLOCF: false,
visibleOI: false,
}) })
} else if (item === 'Tax Planning') { } else if (item === 'Tax Planning') {
this.setState({ this.setState({
...@@ -345,6 +349,7 @@ export default class MonthlyReport extends Component { ...@@ -345,6 +349,7 @@ export default class MonthlyReport extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: true, visibleTP: true,
visibleLOCF: false, visibleLOCF: false,
visibleOI: false,
}) })
} else if (item === 'Fixed Assets Movement') { } else if (item === 'Fixed Assets Movement') {
this.setState({ this.setState({
...@@ -355,6 +360,7 @@ export default class MonthlyReport extends Component { ...@@ -355,6 +360,7 @@ export default class MonthlyReport extends Component {
visibleFAM: true, visibleFAM: true,
visibleTP: false, visibleTP: false,
visibleLOCF: false, visibleLOCF: false,
visibleOI: false,
}) })
} else if (item === 'CAT') { } else if (item === 'CAT') {
this.setState({ this.setState({
...@@ -365,6 +371,7 @@ export default class MonthlyReport extends Component { ...@@ -365,6 +371,7 @@ export default class MonthlyReport extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: false, visibleTP: false,
visibleLOCF: false, visibleLOCF: false,
visibleOI: false,
}) })
} else if (item === 'List of Credit Facilities') { } else if (item === 'List of Credit Facilities') {
this.setState({ this.setState({
...@@ -375,6 +382,18 @@ export default class MonthlyReport extends Component { ...@@ -375,6 +382,18 @@ export default class MonthlyReport extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: false, visibleTP: false,
visibleLOCF: true, visibleLOCF: true,
visibleOI: false,
})
} else if (item === 'Operating Indicator') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: false,
visibleLOCF: false,
visibleOI: true,
}) })
} }
}) })
...@@ -810,6 +829,20 @@ export default class MonthlyReport extends Component { ...@@ -810,6 +829,20 @@ export default class MonthlyReport extends Component {
isAprrover={false} isAprrover={false}
/> />
)} )}
{this.state.visibleOI && (
<OperatingIndicatorMR
open={this.props.open}
report_id={this.state.report_id}
height={this.props.height}
width={this.props.width}
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
monthlyReportId={this.state.monthlyReportId}
month={this.state.month}
/>
)}
</div > </div >
); );
} }
......
src/container/MonthlyReport/BalanceSheetMR.js
View file @ 3a7aef76
...@@ -54,7 +54,7 @@ export default class BalanceSheetMR extends Component { ...@@ -54,7 +54,7 @@ export default class BalanceSheetMR extends Component {
"monthly_report_id": this.props.monthlyReportId, "monthly_report_id": this.props.monthlyReportId,
"month": this.props.month.month_id "month": this.props.month.month_id
} }
api.create().getHierarkiMontlyReport(payload).then(response => { api.create().getHierarkiMontlyReportBS(payload).then(response => {
console.log(response); console.log(response);
let dataTable = [] let dataTable = []
if (response.data) { if (response.data) {
......
src/container/MonthlyReport/OperatingIndicatorMR.js 0 → 100644
View file @ 3a7aef76
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react';
import ReactTooltip from 'react-tooltip';
import api from '../../api';
import Images from '../../assets/Images';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class OperatingIndicatorMR extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: true
}
}
componentDidMount() {
this.getItemHierarki()
}
getItemHierarki() {
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,
"month": this.props.month.month_id
}
api.create().getHierarkiMontlyReportOI(payload).then(response => {
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.operating_indicator.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook,
{
mb: item.operating_indicator.master_budget === "" ? "0.0" : item.operating_indicator.master_budget,
rb: item.operating_indicator.rolling_budget === "" ? "0.0" : item.operating_indicator.rolling_budget,
actual: item.operating_indicator.actual === "" ? "0.0" : item.operating_indicator.actual
},
item.operating_indicator.actual_previous_month === null ? "0.0" : item.operating_indicator.actual_previous_month === "" ? "0.0" : item.operating_indicator.actual_previous_month,
{
aavpm: item.operating_indicator.amount_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.amount_act_vs_previous_month,
pavpm: item.operating_indicator.percent_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.percent_act_vs_previous_month,
aavmb: item.operating_indicator.amount_act_vs_mb === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb,
pavmb: item.operating_indicator.percent_act_vs_mb === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb,
aavrb: item.operating_indicator.amount_act_vs_rb === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb,
pavrb: item.operating_indicator.percent_act_vs_rb === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb,
},
{
mtdvpm: item.operating_indicator.mtd_vs_previous_month === "" ? "0.0" : item.operating_indicator.mtd_vs_previous_month,
mtdvmb: item.operating_indicator.mtd_vs_mb === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
mtdvrb: item.operating_indicator.mtd_vs_rb === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
}
])
}
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.operating_indicator.uom,
item.operating_indicator.rolling_outlook === null ? "0.0" : item.operating_indicator.rolling_outlook === "" ? "0.0" : item.operating_indicator.rolling_outlook,
{
mb: item.operating_indicator.master_budget === "" ? "0.0" : item.operating_indicator.master_budget,
rb: item.operating_indicator.rolling_budget === "" ? "0.0" : item.operating_indicator.rolling_budget,
actual: item.operating_indicator.actual === "" ? "0.0" : item.operating_indicator.actual
},
item.operating_indicator.actual_previous_month === null ? "0.0" : item.operating_indicator.actual_previous_month === "" ? "0.0" : item.operating_indicator.actual_previous_month,
{
aavpm: item.operating_indicator.amount_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.amount_act_vs_previous_month,
pavpm: item.operating_indicator.percent_act_vs_previous_month === "" ? "0.0" : item.operating_indicator.percent_act_vs_previous_month,
aavmb: item.operating_indicator.amount_act_vs_mb === "" ? "0.0" : item.operating_indicator.amount_act_vs_mb,
pavmb: item.operating_indicator.percent_act_vs_mb === "" ? "0.0" : item.operating_indicator.percent_act_vs_mb,
aavrb: item.operating_indicator.amount_act_vs_rb === "" ? "0.0" : item.operating_indicator.amount_act_vs_rb,
pavrb: item.operating_indicator.percent_act_vs_rb === "" ? "0.0" : item.operating_indicator.percent_act_vs_rb,
},
{
mtdvpm: item.operating_indicator.mtd_vs_previous_month === "" ? "0.0" : item.operating_indicator.mtd_vs_previous_month,
mtdvmb: item.operating_indicator.mtd_vs_mb === "" ? "0.0" : item.operating_indicator.mtd_vs_mb,
mtdvrb: item.operating_indicator.mtd_vs_rb === "" ? "0.0" : item.operating_indicator.mtd_vs_rb,
}
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
this.setState({ dataTable, loading: false })
}
})
}
render() {
let columns = [
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "",
options: {
display: false
}
},
{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 300 }}>
{tableMeta.rowData[0] === null ?
tableMeta.rowData[4] == 0 ?
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, fontWeight: 'bold', color: 'red' }}>{String(val).toUpperCase()}</span>
</LightTooltip> :
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<LightTooltip title={"Report Items Not Registered"} arrow>
<span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</LightTooltip>
</div>
:
tableMeta.rowData[4] == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
:
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div>
}
</div>
)
}
}
},
{
name: "Rolling Outlook (FY2021)",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#07a7d0', width: 96, borderLeft: '1px #fff solid', borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
},
{
name: `Month To Date (MTD)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6', height: '100%' }}>
<span>{"Actual"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.mb
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.rb
}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.actual
}
</div>
</div>
</div>
</div>
)
}
}
},
{
name: "Actual Previous Month",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
},
{
name: `Variance`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Act vs Previous Month"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs MB"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
<div style={{ borderBottom: '1px #fff solid' }}>
<span>{"Act vs RB"}</span>
</div>
<div className="grid grid-2x">
<div className="column-1" style={{ borderRight: '1px #fff solid' }}>
<span>{"Amount"}</span>
</div>
<div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
<span>{"%"}</span>
</div>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="column-1">
<div className="grid grid-2x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.aavpm
}
</div>
</div>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.pavpm
}
</div>
</div>
</div>
</div>
<div className="column-2">
<div className="grid grid-2x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.aavmb
}
</div>
</div>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.pavmb
}
</div>
</div>
</div>
</div>
<div className="column-3">
<div className="grid grid-2x content-center">
<div className="column-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.aavrb
}
</div>
</div>
<div className="column-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.pavrb
}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
},
{
name: `MTD Explanation`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 40 }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"vs Prev Month"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"vs MB"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"vs RB"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvpm
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvmb
}
</div>
</div>
<div className="col-3">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val.mtdvrb
}
</div>
</div>
</div>
</div>
)
}
}
},
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</div>
<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 }}>Monthly Report - Operating Indicator</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%' }}>
<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={() => null}
>
<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={() => null}
>
<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={() => null}
>
<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.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
</div>
</Paper>
</div>
</div>
)
}
}
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