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
Hide 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 = "") => { ...@@ -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 @ 04530554
...@@ -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 @ 04530554
...@@ -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 })
} }
...@@ -1782,10 +1794,10 @@ export default class MonthlyReport extends Component { ...@@ -1782,10 +1794,10 @@ export default class MonthlyReport extends Component {
this.setState({ dbPL: listPL }, () => { this.setState({ dbPL: listPL }, () => {
if (type != undefined) { if (type != undefined) {
if (type == 'PL') { if (type == 'PL') {
// console.log(this.state.dbPL) // console.log(this.state.dbPL)
// this.setState({ loading: false }) // this.setState({ loading: false })
console.log('tarik sis') console.log('tarik sis')
this.createPL() this.createPL()
} }
} }
}) })
...@@ -2164,14 +2176,14 @@ export default class MonthlyReport extends Component { ...@@ -2164,14 +2176,14 @@ 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])
:
// {
(tableMeta.rowData[5] ?
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])
: null) :
// {
(tableMeta.rowData[5] ?
this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4], tableMeta.rowData[2], tableMeta.rowData[3])
: null)
// console.log(tableMeta.rowData) // console.log(tableMeta.rowData)
// } // }
...@@ -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 @ 04530554
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 @ 04530554
...@@ -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]) }}> </div>
<span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
</div> <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> </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 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> </div>
); )
},
},
},
{
name: "Revision",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 96, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
}, },
}, },
}, }
];
const columnOLPA = [
{ {
name: "Approver", name: "Company",
options: { 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", 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 3", <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>
customBodyRender: (val, tableMeta, updateValue) => { <div className="column-2 grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
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-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>
name: "Approver 4", </div>
options: { <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 }}>
customHeadRender: (columnMeta) => ( <span>{"Operating Indicator"}</span>
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}> </div>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography> </div>
</TableCell> </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: "Approver 5",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta, updateValue) => {
return <div style={{ textAlign: "center", width: 60 }}>{tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 2 || tableMeta.rowData[0] === 4 ? null : val}</div>;
},
},
},
{
name: "Approver 6",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: "#1c71b8", width: 60, borderLeft: "1px #fff solid" }}>
<Typography style={{ color: "white", fontSize: 12, fontWeight: "bold", textAlign: "center" }}>{columnMeta.name}</Typography>
</TableCell>
), ),
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 }}>
<span style={{ color: 'blue' }}>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
<div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
<div className="column-2 grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Master Budget (MB)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Rolling Budget (RB)"}</span>
</div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<span>{"Actual"}</span>
</div>
</div>
</div>
)
}, },
}, },
}, }
{
name: "",
options: {
display: false,
},
},
]; ];
const columns = [];
return ( 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 @ 04530554
...@@ -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,
...@@ -546,4 +684,24 @@ exports.customOptionsManagementDocument = function () { ...@@ -546,4 +684,24 @@ exports.customOptionsManagementDocument = function () {
filter: true, filter: true,
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