Skip to content

T
Tia-dev
Commit 04530554 authored by d.arizona's avatar d.arizona
Browse files
Options

update banyak rek demi eksasd tercinta

parent 430b6820
Show whitespace changes
Inline Side-by-side
Showing with 777 additions and 237 deletions
src/api/index.js
View file @ 04530554
......@@ -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 @ 04530554
......@@ -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 @ 04530554
......@@ -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 })
}
......@@ -2164,7 +2176,7 @@ export default class MonthlyReport extends Component {
borderColor: 'transparent'
}}
onClick={() =>
this.state.periode.periode <= 2020?
this.state.periode.periode <= 2020 ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
:
......@@ -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 @ 04530554
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 @ 04530554
......@@ -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 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>
);
},
},
},
{
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>;
},
<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>
)
},
},
}
];
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>;
},
},
},
{
name: "Approver 2",
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>;
return <div style={{ width: 300, textAlign: 'left' }}>{val}</div>;
},
},
},
{
name: "Approver 5",
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 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>;
},
},
},
{
name: "",
options: {
display: false,
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>
)
},
},
}
];
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 @ 04530554
......@@ -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,
......@@ -547,3 +685,23 @@ exports.customOptionsManagementDocument = function () {
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