Skip to content

T
Tia-dev
Commit 3fb532c2 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'GGMAC' into 'master' 

Ggmac

See merge request !1533
parents e67c5070 94ebf5d8
Hide whitespace changes
Inline Side-by-side
Showing with 777 additions and 237 deletions
src/api/index.js
View file @ 3fb532c2
......@@ -473,6 +473,11 @@ const create = (type = "") => {
const getDetailDocument = (id) => api.get(`document/get_document_by_id/${id}`)
const deleteDocument = (id) => api.post(`document/delete_document/${id}`)
// Monitoring
const getMonitoringMB = (body) => api.get(`transaction/monitoring/master_budget/${body.year}`)
const getMonitoringMR = (body) => api.get(`transaction/monitoring/monthly_report/${body.year}/${body.month}`)
const getMonitoringRO = (body) => api.get(`transaction/monitoring/rolling_outlook/${body.year}/${body.quarter}`)
const getMonitoringOLPA = (body) => api.get(`transaction/monitoring/outlook_pa/${body.year}`)
// ------
// STEP 3
// ------
......@@ -813,7 +818,11 @@ const create = (type = "") => {
getDetailReportOLPACAT,
createCATOLPA,
getRatioLOCF,
triggerRatioFromLOCF
triggerRatioFromLOCF,
getMonitoringMB,
getMonitoringMR,
getMonitoringRO,
getMonitoringOLPA,
}
}
......
src/container/Home.js
View file @ 3fb532c2
......@@ -12,6 +12,7 @@ import MenuIcon from '@material-ui/icons/Menu';
import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ReportIcon from '@material-ui/icons/PriorityHigh'
import Announcement from '@material-ui/icons/Announcement';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
......@@ -157,6 +158,8 @@ export default function MiniDrawer() {
const [userPhoto, setUserPhoto] = React.useState("")
const [application, setApplication] = React.useState([])
const [setting, setSetting] = React.useState([])
const [isApprover, setIsApprover] = React.useState(false);
const [data, setData] = React.useState({
array: [
{
......@@ -318,6 +321,7 @@ export default function MiniDrawer() {
if (userFullname === "" && userEmail === "") {
getUserData()
getMenuHierarki()
getDetailUser()
}
})
......@@ -335,6 +339,48 @@ export default function MiniDrawer() {
return data
}
const getDetailUser = () => {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
getRole(response.data.data.role_id)
}
}
}
})
}
const getRole = (id) => {
api.create().getDetailRole(id).then((response) => {
console.log(response)
if (response.data.status === 'success') {
// this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
// // // console.log(response.data.data)
if (String(response.data.data.role_name).toLocaleLowerCase() == 'superadmin') {
getIsApprover(true)
} else {
getIsApprover(false)
}
} else {
getIsApprover(false)
}
})
}
const getIsApprover = (superadmin) => {
api.create().getAM().then((response) => {
console.log(response);
let actAMActive = response.data.data
let userId = localStorage.getItem(Constant.USER)
let indexId = actAMActive.findIndex((val) => val.user_id == userId)
if (indexId != -1 || superadmin) {
setIsApprover(true)
}
})
}
const getMenuHierarki = () => {
api.create().getMenuByRole().then((response) => {
console.log(response)
......@@ -567,17 +613,17 @@ export default function MiniDrawer() {
}
</div>
))}
{/* <Link to={`${url}/progress-reports`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === 'progress-reports' ? "active" : ""}>
<a data-tip={'progress-reports'} data-for={'progress-reports'}>
<ListItem button key={'progress-reports'} onClick={() => selectIndex('progress-reports')}>
<ListItemIcon style={{ minWidth: open ? 40 : 56}}><ReportIcon style={{marginLeft: -5}}/></ListItemIcon>
{isApprover && <Link to={`${url}/progress-reports`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === 'Progress Report' ? "active" : ""}>
<a data-tip={'Progress Report'} data-for={'Progress Report'}>
<ListItem button key={'progress-reports'} onClick={() => selectIndex('Progress Report')}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><Announcement style={{ marginLeft: -5 }} /></ListItemIcon>
<Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{'Progress Report'}</Typography>
</ListItem>
</a>
{!open && (<ReactTooltip border={true} id={'Progress Report'} place="bottom" type="light" effect="solid" />)}
</div>
</Link> */}
</Link>}
</List>
{open && setting.length > 0 &&
<div style={{ marginLeft: 20 }}>
......@@ -669,7 +715,7 @@ export default function MiniDrawer() {
path={route.path}
// exact={route.exact}
location={location}
children={<route.main height={height} width={width} open={open} location={location} selectIndex={selectIndex.bind(this)}/>}
children={<route.main height={height} width={width} open={open} location={location} selectIndex={selectIndex.bind(this)} />}
/>
))}
</Switch>
......
src/container/MonthlyReport.js
View file @ 3fb532c2
......@@ -629,6 +629,18 @@ export default class MonthlyReport extends Component {
// this.getPL(type)
if (type != undefined && type == 'PL') {
this.getPL(type)
} else if (type != undefined && type == 'LOCF') {
let bodyRatioLocf = {
"report": 'ratio',
"monthlyReportId": this.state.monthlyReportId,
"periode": this.state.periode.periode,
"companyId": this.state.company.company_id,
"months": this.state.month.month_id
}
api.create().triggerRatioFromLOCF(bodyRatioLocf).then((res) => {
console.log(res)
this.setState({ loading: false })
})
} else {
this.setState({ loading: false })
}
......@@ -1782,10 +1794,10 @@ export default class MonthlyReport extends Component {
this.setState({ dbPL: listPL }, () => {
if (type != undefined) {
if (type == 'PL') {
// console.log(this.state.dbPL)
// this.setState({ loading: false })
console.log('tarik sis')
this.createPL()
// console.log(this.state.dbPL)
// this.setState({ loading: false })
console.log('tarik sis')
this.createPL()
}
}
})
......@@ -2164,14 +2176,14 @@ export default class MonthlyReport extends Component {
borderColor: 'transparent'
}}
onClick={() =>
this.state.periode.periode <= 2020?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
:
// {
(tableMeta.rowData[5] ?
this.state.periode.periode <= 2020 ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: null)
:
// {
(tableMeta.rowData[5] ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: null)
// console.log(tableMeta.rowData)
// }
......@@ -3017,7 +3029,7 @@ export default class MonthlyReport extends Component {
lastStatus={this.state.lastStatus}
isApprover={this.state.isApprover}
prevRevision={this.state.isSubmit ? this.state.prevRevision : true}
PLBSFAMSubmitted={this.state.lastStatus == 'APPROVED'? true : false}
PLBSFAMSubmitted={this.state.lastStatus == 'APPROVED' ? true : false}
// PLBSFAMSubmitted={false}
createCashFlow={this.createCashFlow.bind(this)}
/>
......
src/container/Progress/ProgressReport.js
View file @ 3fb532c2
import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField } from '@material-ui/core';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField, Snackbar} from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../../assets/Images';
import DonutChart from 'react-d3-donut';
......@@ -12,9 +12,10 @@ import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
import TableProgressReport from './TableProgressReport'
import { Alert } from '@material-ui/lab';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const getMuiTheme = () => createMuiTheme(ct.customTable4());
class ReportProgress extends Component {
constructor(props) {
......@@ -41,55 +42,24 @@ class ReportProgress extends Component {
month: null,
periodeMB: null,
reportType: null,
dataTable: []
}
}
componentDidMount() {
this.getMonth()
this.getReportType()
// console.log(this.state.listCategory);
// console.log(this.state.category);
}
getReportType() {
let arrayReportType = [
{
name: 'Master Budget',
value: 0
}, {
name: 'Monthly Report',
value: 1
}, {
name: 'Operating Indicator',
value: 2
}, {
name: 'Rolling Outlook',
value: 3
},
]
let arrayReportTypeFinal = this.state.category.value.includes('status') ? arrayReportType : arrayReportType.filter((val) => val.value != 2)
let defaultProps = {
options: arrayReportTypeFinal,
getOptionLabel: (option) => option.name,
};
this.setState({ listReportType: defaultProps, reportType: arrayReportTypeFinal[0] }, () => {
console.log(this.state.listReportType)
console.log(this.state.reportType)
})
}
getMonth() {
this.setState({ loading: true })
api.create().getMonthTransaction().then(response => {
let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1);
let month = format(dateNow, 'MMMM')
// console.log(month);
if (response.data) {
if (response.data.status === "success") {
// console.log(response);
let data = response.data.data
let monthData = data.map((item) => {
return {
......@@ -102,34 +72,21 @@ class ReportProgress extends Component {
getOptionLabel: (option) => option.month_value,
};
let index = data.findIndex((val) => val.month_name == month)
// console.log(month)
// console.log(index)
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
// if (this.state.isApprover === true) {
// if (this.state.submittedOnly) {
// console.log('masuk cuk')
// this.getPeriode()
// } else {
// this.getLastPeriod()
// }
this.getPeriode()
// } else {
// this.getLastPeriod()
// this.getPeriode()
// }
})
} else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
// if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
// setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN)
// window.location.reload();
// }, 1000);
// }
// })
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
......@@ -140,7 +97,7 @@ class ReportProgress extends Component {
for (var i = 2000; i <= currentYear; i++) {
MB.push({ name: String(i), value: i })
if (i == currentYear) {
MB.push({ name: String(i + 1), value: i + 1 })
MB.push({ name: String(i), value: i })
}
}
......@@ -152,13 +109,193 @@ class ReportProgress extends Component {
this.setState({
listPeriodeMB: defaultPropsMB,
periodeMB: MB[MB.length - 1],
loading: false
}, () => {
console.log(this.state.listMonth)
console.log(this.state.listPeriodeMB)
this.getReportType()
// console.log(this.state.listMonth)
// console.log(this.state.listPeriodeMB)
})
}
getReportType() {
let arrayReportType = [
{
name: 'Master Budget',
value: 0
}, {
name: 'Monthly Report',
value: 1
}, {
name: 'Rolling Outlook',
value: 2
}, {
name: 'Outlook PA',
value: 3
},
]
let defaultProps = {
options: arrayReportType,
getOptionLabel: (option) => option.name,
};
this.setState({ listReportType: defaultProps, reportType: arrayReportType[0] }, () => {
// console.log(this.state.periodeMB)
this.getDataMonitoring()
// console.log(this.state.listReportType)
// console.log(this.state.reportType)
})
}
getDataMonitoring() {
let payload = {
"year": this.state.periodeMB.name,
"month": this.state.month.month_id,
"quarter": this.state.quarter.value
}
console.log(payload)
if (String(this.state.reportType.name).toLocaleUpperCase().includes('MASTER')) {
this.getMonitoringMB(payload)
} else if (String(this.state.reportType.name).toLocaleUpperCase().includes('MONTHLY')) {
this.getMonitoringMR(payload)
} else if (String(this.state.reportType.name).toLocaleUpperCase().includes('ROLLING')) {
this.getMonitoringRO(payload)
} else {
this.getMonitoringOLPA(payload)
}
}
getMonitoringMB(payload) {
let dataTable = []
api.create().getMonitoringMB(payload).then((response) => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
data.map((item,index) => {
let report = item.report
report.push({report_name: 'Operating Indicator', status_report: item.operating_indicator}, {report_name: 'Submission Status', status_report: item.submission_status})
dataTable.push([
item.company_name,
report
])
})
this.setState({dataTable, loading: false})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
})
}
getMonitoringMR(payload) {
let dataTable = []
api.create().getMonitoringMR(payload).then((response) => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
data.map((item,index) => {
let report = item.report
report.push({report_name: 'Operating Indicator', status_report: item.operating_indicator}, {report_name: 'Monthly Status', status_report: item.monthly_status})
dataTable.push([
item.company_name,
report
])
})
this.setState({dataTable, loading: false})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' , loading: false}, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
})
}
getMonitoringRO(payload) {
let dataTable = []
api.create().getMonitoringRO(payload).then((response) => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
data.map((item,index) => {
let report = item.report
report.push({report_name: 'Operating Indicator', status_report: item.operating_indicator}, {report_name: 'Rolling Status', status_report: item.rolling_status})
dataTable.push([
item.company_name,
report
])
})
this.setState({dataTable, loading: false})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
})
}
getMonitoringOLPA(payload) {
let dataTable = []
api.create().getMonitoringOLPA(payload).then((response) => {
console.log(response)
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
data.map((item,index) => {
let report = item.report
report.push({report_name: 'Operating Indicator', status_report: item.operating_indicator}, {report_name: 'OLPA Status', status_report: item.olpa_status})
dataTable.push([
item.company_name,
report
])
})
this.setState({dataTable, loading: false})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
}
})
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const dataTableMB = [
......@@ -186,6 +323,11 @@ class ReportProgress extends Component {
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Report Status & Approval Progress Monitoring</Typography>
......@@ -195,7 +337,7 @@ class ReportProgress extends Component {
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography>
</div>
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
{/* <div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15, display: 'flex' }}>
<Autocomplete
{...this.state.listCategory}
......@@ -223,15 +365,27 @@ class ReportProgress extends Component {
value={this.state.reportType}
/>
</div>
</div>
</div> */}
<div style={{ minWidth: 'max-content', padding: '20px 20px 0px 20px' }}>
<div style={{ marginTop: 15, display: 'flex' }}>
<Autocomplete
{...this.state.listReportType}
id="menu"
onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, loading: true, dataTable: [] }, () => {
// this.getListUserSubcoRO()
this.getDataMonitoring()
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Menu" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.reportType}
/>
<Autocomplete
{...this.state.listPeriodeMB}
id="periode"
onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({ loading: false })
this.getDataMonitoring()
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
......@@ -243,7 +397,7 @@ class ReportProgress extends Component {
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({ loading: false })
this.getDataMonitoring()
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
......@@ -255,7 +409,7 @@ class ReportProgress extends Component {
id="quarter"
onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({ loading: false })
this.getDataMonitoring()
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
......@@ -292,21 +446,22 @@ class ReportProgress extends Component {
)}
</div> */}
{this.state.loading && loadingComponent}
{/* {this.state.previewTable && ( */}
{this.state.reportType != null && !this.state.loading && (
<TableProgressReport
width={this.props.width}
height={this.props.height}
// height={this.props.height}
open={this.props.open}
// month={this.state.month.month_value}
category={this.state.category ? this.state.category.value : 1}
reportType={this.state.reportType ? this.state.reportType.value : 0}
dataTable={this.state.category.value == 'report-status' ? dataTableMBStatus : dataTableMB}
dataTable={this.state.dataTable}
// dataTable={this.state.dataTable}
periode={this.state.periode ? this.state.periode.periode : null}
quarter={this.state.quarter.name}
company={this.state.company}
typeReport={String(this.state.reportType.name).toLocaleUpperCase()}
/>
{/* )} */}
)}
</div>
</Paper>
</div>
......
src/container/Progress/TableProgressReport.js
View file @ 3fb532c2
......@@ -5,9 +5,9 @@ import NumberFormat from "react-number-format";
import * as R from "ramda";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const getMuiTheme = () => createMuiTheme(ct.customTable4());
const options = ct.customOptionsFixedColumn();
const options = ct.customOptionsFixedColumnMonitoring();
const style = {
position: "sticky",
left: 0,
......@@ -21,238 +21,398 @@ const style2 = {
};
export default class TableProgressReport extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
let dataTable2 = this.props.dataTable;
console.log(this.props);
// console.log(this.props);
const handleValue = (tableMeta, itemName) => {
let value = tableMeta.rowData[1].filter((val) => val.report_name == itemName)
// console.log(itemName)
// console.log(tableMeta.rowData)
// console.log(value)
return value[0].status_report == null || value[0].status_report == ''? 'N/A' : value[0].status_report
}
const columnMB = [
{
name: "Report Type",
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "left" }}>{columnMeta.name}</Typography>
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return <div style={{ width: 300 }}>{val}</div>;
return <div style={{ width: 300, textAlign: 'left' }}>{val}</div>;
},
},
},
{
name: "Revision",
name: `INPUT MASTER BUDGET`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff", width: 100 }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" 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: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Profit Loss"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Tax Planning"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Balance Sheet"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Fixed Assets Movement"}</span>
</div>
</div>
<div className="column-2 grid grid-4x" 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: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Cash Flow"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"CAT"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Submission Status"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Operating Indicator"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return <div style={{ textAlign: "center" }}>{value}</div>;
return (
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span style={{ color: 'blue' }}>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
</div>
)
},
},
},
}
];
const columnMR = [
{
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return <div style={{ width: 300, textAlign: "center" }}>{value}</div>;
},
},
},
{
name: "Last Update",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}>
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return <div style={{ textAlign: "center", width: 100 }}>{val}</div>;
return <div style={{ width: 300, textAlign: 'left' }}>{val}</div>;
},
},
},
];
const columnMBStatus = [
{
name: "Company",
name: `INPUT MONTHLY REPORT`,
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "left" }}>{columnMeta.name}</Typography>
</TableCell>
<th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-3x">
<div className="column-1 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Profit Loss"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Tax Planning"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Balance Sheet"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Fixed Assets Movement"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"LOCF"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Cash Flow"}</span>
</div>
</div>
<div className="column-3 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"CAT"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Monthly Status"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Operating Indicator"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ width: 300 }}>
{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 className="grid grid-3x">
<div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Fixed Assets Movement')}</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'List of Credit Facilities')}</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div>
</div>
<div className="column-3 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Monthly Status')}</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div>
</div>
</div>
);
)
},
},
},
}
];
const columnRO = [
{
name: "Periode",
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return <div style={{ textAlign: "center" }}>{val}</div>;
return <div style={{ width: 300, textAlign: 'left' }}>{val}</div>;
},
},
},
{
name: "Current Status",
name: `INPUT ROLLING OUTLOOK`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
<th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" style={{ 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', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Profit Loss"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Tax Planning"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Balance Sheet"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Cash Flow"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"CAT"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Rolling Status"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Operating Indicator"}</span>
</div>
</div>
</div>
</th>
),
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: "center" }}>
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ? null : (
<div>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div>
)}
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Balance Sheet')}</div>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Cash Flow')}</div>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Rolling Status')}</div>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Operating Indicator')}</div>
</div>
</div>
</div>
);
},
},
},
{
name: "Revision",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
)
},
},
},
}
];
const columnOLPA = [
{
name: "Approver",
name: "Company",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 200, borderRight: "1px #fff solid", borderBottom: "1px #fff solid", }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
return <div style={{ width: 300, textAlign: 'left' }}>{val}</div>;
},
},
},
{
name: "Approver 2",
name: `INPUT OUTLOOK PA`,
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
},
},
},
{
name: "Approver 3",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
},
},
},
{
name: "Approver 4",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
},
},
},
{
name: "Approver 5",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
},
},
},
{
name: "Approver 6",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#37b5e6', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 40, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" 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: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Profit Loss"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Tax Planning"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Balance Sheet"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Cash Flow"}</span>
</div>
</div>
<div className="column-2 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: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"CAT"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#cc2929', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"OLPA Status"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 45 }}>
<span>{"Operating Indicator"}</span>
</div>
</div>
</div>
</th>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div className="grid grid-2x">
<div className="column-1 grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span style={{ color: 'blue' }}>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
</div>
)
},
},
},
{
name: "",
options: {
display: false,
},
},
}
];
const columns = [];
return (
<div>
<div style={{ padding: "0px 20px 20px 20px", width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={this.props.category === "report-status" ? columnMBStatus : this.props.category === "approval-progress" ? columnMB : columns}
columns={this.props.typeReport.includes("MASTER") ? columnMB : this.props.typeReport.includes("MONTHLY") ? columnMR : this.props.typeReport.includes("ROLLING") ? columnRO : columnOLPA}
options={options}
/>
</MuiThemeProvider>
</div>
......
src/library/CustomTable.js
View file @ 3fb532c2
......@@ -482,6 +482,144 @@ exports.customTable3 = function () {
}
}
exports.customTable4 = function () {
return {
typography: {
useNextVariants: true,
},
overrides: {
MUIDataTable: {
root: {
backgroundColor: secondColor,
},
paper: {
boxShadow: "0 0 30px 0 rgba(154,161,171,.15)",
border: "1px rgba(0,0,0,0.1) solid",
borderRadius: "5px",
overflow: "hidden",
},
responsiveScrollMaxHeight: {
maxHeight:'700px !important'
},
},
MuiToolbar: {
root: {
left: {
flex: "0 0 auto !important"
},
actions: {
flex: "0 0 auto !important"
}
}
},
MUIDataTableToolbar: {
root: {
backgroundColor: secondColor,
},
titleText: {
color: "#555"
},
icon: {
color: "#555"
},
},
MUIDataTableSearch: {
searchIcon: {
color: "#555"
},
searchText: {
color: "#555",
},
clearIcon: {
color: "#555"
},
},
MUIDataTableHead: {
main: {
backgroundColor: mainColor,
color: "#555"
}
},
MUIDataTableHeadRow: {
root: {
backgroundColor: mainColor,
}
},
MUIDataTableHeadCell: {
root: {
fontSize: "10pt",
fontWeight: "500",
color: mainColor,
},
fixedHeader: {
position: "relative",
backgroundColor: secondColor,
color: "#555",
padding: "10px",
height: "auto",
},
toolButton: {
display: "flex",
height: "auto"
},
data: {
display: "inline-block",
verticalAlign: "top",
},
sortActive: {
color: "#555"
},
sortAction: {
color: "#555",
display: "inline-block",
verticalAlign: "top",
MuiButtonBase: {
color: "#555",
root: {
color: "#555",
}
}
}
},
MUIDataTableBodyCell: {
root: {
fontSize: "10pt"
}
},
ColorPallete3: {
backgroundColor: '#37b5e6'
},
MuiTableCell: {
root: {
display: 'table-cell',
padding: 7,
paddingLeft: 25,
paddingRight: 25,
fontSize: '0.875rem',
textAlign: 'left',
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
fontWeight: 400,
lineHeight: 1.43,
borderBottom: '1px solid rgba(224, 224, 224, 1)',
letterSpacing: '0.01071em',
verticalAlign: 'inherit',
}
},
MUIDataTableSelectCell: {
headerCell: {
backgroundColor: secondColor,
checkboxRoot: {
color: "#fff",
}
},
checkboxRoot: {
color: "#555"
}
},
}
}
}
exports.customOptions = function () {
return {
// selectableRows: false,
......@@ -546,4 +684,24 @@ exports.customOptionsManagementDocument = function () {
filter: true,
search: true,
}
}
exports.customOptionsFixedColumnMonitoring = function () {
return {
selectableRows: false,
selectableRows: 'none',
filterType: false,
filter: false,
sort: true,
responsive: 'scrollMaxHeight',
viewColumns: false,
// overflowX: 'auto',
print: false,
download: false,
elevation: 5,
search: true,
pagination: true,
rowsPerPage: 25,
rowsPerPageOptions: [25, 50, 100, 200],
}
}
\ 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