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
Show 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 = "") => { ...@@ -473,6 +473,11 @@ const create = (type = "") => {
const getDetailDocument = (id) => api.get(`document/get_document_by_id/${id}`) const getDetailDocument = (id) => api.get(`document/get_document_by_id/${id}`)
const deleteDocument = (id) => api.post(`document/delete_document/${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 // STEP 3
// ------ // ------
...@@ -813,7 +818,11 @@ const create = (type = "") => { ...@@ -813,7 +818,11 @@ const create = (type = "") => {
getDetailReportOLPACAT, getDetailReportOLPACAT,
createCATOLPA, createCATOLPA,
getRatioLOCF, 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'; ...@@ -12,6 +12,7 @@ import MenuIcon from '@material-ui/icons/Menu';
import ExpandMore from '@material-ui/icons/ExpandMore' import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess' import ExpandLess from '@material-ui/icons/ExpandLess'
import ReportIcon from '@material-ui/icons/PriorityHigh' import ReportIcon from '@material-ui/icons/PriorityHigh'
import Announcement from '@material-ui/icons/Announcement';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
...@@ -157,6 +158,8 @@ export default function MiniDrawer() { ...@@ -157,6 +158,8 @@ export default function MiniDrawer() {
const [userPhoto, setUserPhoto] = React.useState("") const [userPhoto, setUserPhoto] = React.useState("")
const [application, setApplication] = React.useState([]) const [application, setApplication] = React.useState([])
const [setting, setSetting] = React.useState([]) const [setting, setSetting] = React.useState([])
const [isApprover, setIsApprover] = React.useState(false);
const [data, setData] = React.useState({ const [data, setData] = React.useState({
array: [ array: [
{ {
...@@ -318,6 +321,7 @@ export default function MiniDrawer() { ...@@ -318,6 +321,7 @@ export default function MiniDrawer() {
if (userFullname === "" && userEmail === "") { if (userFullname === "" && userEmail === "") {
getUserData() getUserData()
getMenuHierarki() getMenuHierarki()
getDetailUser()
} }
}) })
...@@ -335,6 +339,48 @@ export default function MiniDrawer() { ...@@ -335,6 +339,48 @@ export default function MiniDrawer() {
return data 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 = () => { const getMenuHierarki = () => {
api.create().getMenuByRole().then((response) => { api.create().getMenuByRole().then((response) => {
console.log(response) console.log(response)
...@@ -567,17 +613,17 @@ export default function MiniDrawer() { ...@@ -567,17 +613,17 @@ export default function MiniDrawer() {
} }
</div> </div>
))} ))}
{/* <Link to={`${url}/progress-reports`}> {isApprover && <Link to={`${url}/progress-reports`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === 'progress-reports' ? "active" : ""}> <div style={{ paddingLeft: 5 }} className={selectedIndex === 'Progress Report' ? "active" : ""}>
<a data-tip={'progress-reports'} data-for={'progress-reports'}> <a data-tip={'Progress Report'} data-for={'Progress Report'}>
<ListItem button key={'progress-reports'} onClick={() => selectIndex('progress-reports')}> <ListItem button key={'progress-reports'} onClick={() => selectIndex('Progress Report')}>
<ListItemIcon style={{ minWidth: open ? 40 : 56}}><ReportIcon style={{marginLeft: -5}}/></ListItemIcon> <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> <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{'Progress Report'}</Typography>
</ListItem> </ListItem>
</a> </a>
{!open && (<ReactTooltip border={true} id={'Progress Report'} place="bottom" type="light" effect="solid" />)} {!open && (<ReactTooltip border={true} id={'Progress Report'} place="bottom" type="light" effect="solid" />)}
</div> </div>
</Link> */} </Link>}
</List> </List>
{open && setting.length > 0 && {open && setting.length > 0 &&
<div style={{ marginLeft: 20 }}> <div style={{ marginLeft: 20 }}>
...@@ -669,7 +715,7 @@ export default function MiniDrawer() { ...@@ -669,7 +715,7 @@ export default function MiniDrawer() {
path={route.path} path={route.path}
// exact={route.exact} // exact={route.exact}
location={location} 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> </Switch>
......
src/container/MonthlyReport.js
View file @ 3fb532c2
...@@ -629,6 +629,18 @@ export default class MonthlyReport extends Component { ...@@ -629,6 +629,18 @@ export default class MonthlyReport extends Component {
// this.getPL(type) // this.getPL(type)
if (type != undefined && type == 'PL') { if (type != undefined && type == 'PL') {
this.getPL(type) 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 { } else {
this.setState({ loading: false }) this.setState({ loading: false })
} }
...@@ -2164,7 +2176,7 @@ export default class MonthlyReport extends Component { ...@@ -2164,7 +2176,7 @@ export default class MonthlyReport extends Component {
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => 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]) this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: :
...@@ -3017,7 +3029,7 @@ export default class MonthlyReport extends Component { ...@@ -3017,7 +3029,7 @@ export default class MonthlyReport extends Component {
lastStatus={this.state.lastStatus} lastStatus={this.state.lastStatus}
isApprover={this.state.isApprover} isApprover={this.state.isApprover}
prevRevision={this.state.isSubmit ? this.state.prevRevision : true} prevRevision={this.state.isSubmit ? this.state.prevRevision : true}
PLBSFAMSubmitted={this.state.lastStatus == 'APPROVED'? true : false} PLBSFAMSubmitted={this.state.lastStatus == 'APPROVED' ? true : false}
// PLBSFAMSubmitted={false} // PLBSFAMSubmitted={false}
createCashFlow={this.createCashFlow.bind(this)} createCashFlow={this.createCashFlow.bind(this)}
/> />
......
src/container/Progress/ProgressReport.js
View file @ 3fb532c2
import React, { Component } from 'react'; 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 MUIDataTable from "mui-datatables";
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import DonutChart from 'react-d3-donut'; import DonutChart from 'react-d3-donut';
...@@ -12,9 +12,10 @@ import { format } from 'date-fns'; ...@@ -12,9 +12,10 @@ import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer'; import ReactSpeedometer from 'react-d3-speedometer';
import TableProgressReport from './TableProgressReport' import TableProgressReport from './TableProgressReport'
import { Alert } from '@material-ui/lab';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable4());
class ReportProgress extends Component { class ReportProgress extends Component {
constructor(props) { constructor(props) {
...@@ -41,55 +42,24 @@ class ReportProgress extends Component { ...@@ -41,55 +42,24 @@ class ReportProgress extends Component {
month: null, month: null,
periodeMB: null, periodeMB: null,
reportType: null, reportType: null,
dataTable: []
} }
} }
componentDidMount() { componentDidMount() {
this.getMonth() this.getMonth()
this.getReportType()
// console.log(this.state.listCategory); // console.log(this.state.listCategory);
// console.log(this.state.category); // 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() { getMonth() {
this.setState({ loading: true }) this.setState({ loading: true })
api.create().getMonthTransaction().then(response => { api.create().getMonthTransaction().then(response => {
let dateNow = new Date() let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1); dateNow.setMonth(dateNow.getMonth() - 1);
let month = format(dateNow, 'MMMM') let month = format(dateNow, 'MMMM')
// console.log(month);
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
// console.log(response);
let data = response.data.data let data = response.data.data
let monthData = data.map((item) => { let monthData = data.map((item) => {
return { return {
...@@ -102,34 +72,21 @@ class ReportProgress extends Component { ...@@ -102,34 +72,21 @@ class ReportProgress extends Component {
getOptionLabel: (option) => option.month_value, getOptionLabel: (option) => option.month_value,
}; };
let index = data.findIndex((val) => val.month_name == month) 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] }, () => { 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() this.getPeriode()
// } else {
// this.getLastPeriod()
// this.getPeriode()
// }
}) })
} else { } else {
// this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
// if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) { if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
// setTimeout(() => { setTimeout(() => {
// localStorage.removeItem(Constant.TOKEN) localStorage.removeItem(Constant.TOKEN)
// window.location.reload(); window.location.reload();
// }, 1000); }, 1000);
// } }
// }) })
} }
} else { } 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 { ...@@ -140,7 +97,7 @@ class ReportProgress extends Component {
for (var i = 2000; i <= currentYear; i++) { for (var i = 2000; i <= currentYear; i++) {
MB.push({ name: String(i), value: i }) MB.push({ name: String(i), value: i })
if (i == currentYear) { 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 { ...@@ -152,13 +109,193 @@ class ReportProgress extends Component {
this.setState({ this.setState({
listPeriodeMB: defaultPropsMB, listPeriodeMB: defaultPropsMB,
periodeMB: MB[MB.length - 1], periodeMB: MB[MB.length - 1],
loading: false
}, () => { }, () => {
console.log(this.state.listMonth) this.getReportType()
console.log(this.state.listPeriodeMB) // 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() { render() {
const dataTableMB = [ const dataTableMB = [
...@@ -186,6 +323,11 @@ class ReportProgress extends Component { ...@@ -186,6 +323,11 @@ class ReportProgress extends Component {
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}> <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>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <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> <Typography style={{ fontSize: '16px', color: 'white' }}>Report Status & Approval Progress Monitoring</Typography>
...@@ -195,7 +337,7 @@ class ReportProgress extends Component { ...@@ -195,7 +337,7 @@ class ReportProgress extends Component {
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography> <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Report Status & Approval Progress</Typography>
</div> </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' }}> <div style={{ marginTop: 15, display: 'flex' }}>
<Autocomplete <Autocomplete
{...this.state.listCategory} {...this.state.listCategory}
...@@ -223,15 +365,27 @@ class ReportProgress extends Component { ...@@ -223,15 +365,27 @@ class ReportProgress extends Component {
value={this.state.reportType} value={this.state.reportType}
/> />
</div> </div>
</div> </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' }}> <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 <Autocomplete
{...this.state.listPeriodeMB} {...this.state.listPeriodeMB}
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({ loading: false }) this.getDataMonitoring()
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -243,7 +397,7 @@ class ReportProgress extends Component { ...@@ -243,7 +397,7 @@ class ReportProgress extends Component {
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({ loading: false }) this.getDataMonitoring()
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -255,7 +409,7 @@ class ReportProgress extends Component { ...@@ -255,7 +409,7 @@ class ReportProgress extends Component {
id="quarter" id="quarter"
onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO() // this.getListUserSubcoRO()
this.setState({ loading: false }) this.getDataMonitoring()
})} })}
disableClearable disableClearable
style={{ minWidth: 210, marginRight: 20 }} style={{ minWidth: 210, marginRight: 20 }}
...@@ -292,21 +446,22 @@ class ReportProgress extends Component { ...@@ -292,21 +446,22 @@ class ReportProgress extends Component {
)} )}
</div> */} </div> */}
{this.state.loading && loadingComponent} {this.state.loading && loadingComponent}
{/* {this.state.previewTable && ( */} {this.state.reportType != null && !this.state.loading && (
<TableProgressReport <TableProgressReport
width={this.props.width} width={this.props.width}
height={this.props.height} // height={this.props.height}
open={this.props.open} open={this.props.open}
// month={this.state.month.month_value} // month={this.state.month.month_value}
category={this.state.category ? this.state.category.value : 1} category={this.state.category ? this.state.category.value : 1}
reportType={this.state.reportType ? this.state.reportType.value : 0} 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} // dataTable={this.state.dataTable}
periode={this.state.periode ? this.state.periode.periode : null} periode={this.state.periode ? this.state.periode.periode : null}
quarter={this.state.quarter.name} quarter={this.state.quarter.name}
company={this.state.company} company={this.state.company}
typeReport={String(this.state.reportType.name).toLocaleUpperCase()}
/> />
{/* )} */} )}
</div> </div>
</Paper> </Paper>
</div> </div>
......
src/container/Progress/TableProgressReport.js
View file @ 3fb532c2
...@@ -5,9 +5,9 @@ import NumberFormat from "react-number-format"; ...@@ -5,9 +5,9 @@ import NumberFormat from "react-number-format";
import * as R from "ramda"; import * as R from "ramda";
var ct = require("../../library/CustomTable"); 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 = { const style = {
position: "sticky", position: "sticky",
left: 0, left: 0,
...@@ -21,238 +21,398 @@ const style2 = { ...@@ -21,238 +21,398 @@ const style2 = {
}; };
export default class TableProgressReport extends Component { export default class TableProgressReport extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() { render() {
let dataTable2 = this.props.dataTable; 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 = [ const columnMB = [
{ {
name: "Report Type", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}> <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: "left" }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { 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: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff", width: 100 }}> <th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <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>
</TableCell> <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 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { 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", name: "Company",
options: { options: {
customHeadRender: (columnMeta) => ( 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 }),
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" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { 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: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: "#1c71b8", width: 300 }}> <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "left" }}>{columnMeta.name}</Typography> <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>
</TableCell> <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 }), setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ width: 300 }}> <div className="grid grid-3x">
{tableMeta.rowData[4] == 0 ? ( <div className="column-1 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<span style={{ fontSize: 12, fontWeight: "bold" }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
) : ( <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
<div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
</div> </div>
)} <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</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: { options: {
customHeadRender: (columnMeta) => ( 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> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style2 }), setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { 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: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", borderRight: "1px solid #fff", borderLeft: "1px solid #fff" }}> <th style={{ ...style, top: 0, zIndex: 103, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <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>
</TableCell> <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 }), setCellProps: () => ({ style2 }),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: "center" }}> <div className="grid grid-2x">
{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ? null : ( <div className="column-1 grid grid-4x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<div> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</div> </div>
)} <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Profit Loss')}</div>
</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>
name: "Revision", </div>
options: { </div>
customHeadRender: (columnMeta) => ( <div className="column-2 grid grid-3x" style={{ ...style2, fontSize: 12, position: "sticky" }}>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'CAT')}</div>
</TableCell> </div>
), <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
customBodyRender: (val, tableMeta) => { <div style={{ textAlign: 'center' }}>{handleValue(tableMeta, 'Rolling Status')}</div>
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</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: { options: {
customHeadRender: (columnMeta) => ( 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> <Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => { 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",
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", name: `INPUT OUTLOOK PA`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}> <th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <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>
</TableCell> <div className="grid grid-2x">
), <div className="column-1 grid grid-4x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
customBodyRender: (val, tableMeta, updateValue) => { <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 }}>
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>; <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>
name: "Approver 6", <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 }}>
options: { <span>{"Balance Sheet"}</span>
customHeadRender: (columnMeta) => ( </div>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}> <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 }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> <span>{"Cash Flow"}</span>
</TableCell> </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) => { setCellProps: () => ({ style2 }),
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>; 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 }}>
name: "", <span style={{ color: 'blue' }}>{"Master Budget (MB)"}</span>
options: { </div>
display: false, <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 ( return (
<div> <div>
<div style={{ padding: "0px 20px 20px 20px", width: this.props.width - (this.props.open === true ? 350 : 100) }}> <div style={{ padding: "0px 20px 20px 20px", width: this.props.width - (this.props.open === true ? 350 : 100) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} 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} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
......
src/library/CustomTable.js
View file @ 3fb532c2
...@@ -482,6 +482,144 @@ exports.customTable3 = function () { ...@@ -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 () { exports.customOptions = function () {
return { return {
// selectableRows: false, // selectableRows: false,
...@@ -547,3 +685,23 @@ exports.customOptionsManagementDocument = function () { ...@@ -547,3 +685,23 @@ exports.customOptionsManagementDocument = function () {
search: 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