Skip to content

T
Tia-dev
Commit 56418a2f authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

LOCF

parent 8487fc3b
Hide whitespace changes
Inline Side-by-side
Showing with 814 additions and 84 deletions
src/container/MonthlyReport.js
View file @ 56418a2f
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel } from '@material-ui/core';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, Snackbar, withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
import api from '../api';
......@@ -15,6 +15,15 @@ import ProfitLossMR from './MonthlyReport/ProfitLossMR';
import TaxPlanningMR from './MonthlyReport/TaxPlanningMR';
import FixedAssetsMovementMR from './MonthlyReport/FixedAssetsMovementMR';
import ListOfCreditFacilities from './MonthlyReport/ListOfCreditFacilities'
import { PropagateLoader } from 'react-spinners';
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../library/Constant';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class MonthlyReport extends Component {
constructor(props) {
......@@ -37,12 +46,17 @@ export default class MonthlyReport extends Component {
visibleCAT: false,
listAttachment: [],
visibleUpload: false,
lastRevision: 0
lastRevision: 0,
loading: false,
alert: false,
tipeAlert: '',
messageAlert: '',
}
this.fileHandler = this.fileHandler.bind(this);
}
componentDidMount() {
this.setState({ loading: true })
this.getCompanyActive()
}
......@@ -56,9 +70,19 @@ export default class MonthlyReport extends Component {
if (response.data) {
if (response.data.status === "success") {
this.setState({ listAttachment: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
// console.log(response);
})
}
......@@ -84,36 +108,58 @@ export default class MonthlyReport extends Component {
]
})
// console.log(dataTable);
this.setState({ dataTable })
this.setState({ dataTable, loading: false })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getMonth()
})
if (response.data) {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getMonth()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
alert(response.data.message)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
getMonth(){
getMonth() {
api.create().getMonthTransaction().then(response => {
let dateNow = new Date
let month = format(dateNow, 'MMMM')
......@@ -125,7 +171,7 @@ export default class MonthlyReport extends Component {
let monthData = data.map((item) => {
return {
month_id: item.id,
month_value: String(item.month_name).substr(0,3)
month_value: String(item.month_name).substr(0, 3)
}
})
let defaultProps = {
......@@ -134,10 +180,21 @@ export default class MonthlyReport extends Component {
};
let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == 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] }, () => {
this.getPeriode()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
......@@ -162,13 +219,24 @@ export default class MonthlyReport extends Component {
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => {
this.getRevision()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
onClickClose(){
this.setState({})
onClickClose() {
this.setState({})
}
getRevision() {
......@@ -193,30 +261,52 @@ export default class MonthlyReport extends Component {
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getMonthlyReportID()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
getMonthlyReportID(){
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"month": this.state.month.month_id
}
api.create().getMonthlyReportID(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === 'success') {
this.setState({
monthlyReportId: response.data.data ? response.data.data.monthly_report_id : null
}, ()=> {
this.getReport()
this.getReportAttachment()
})
}
}
})
getMonthlyReportID() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"month": this.state.month.month_id
}
api.create().getMonthlyReportID(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === 'success') {
this.setState({
monthlyReportId: response.data.data ? response.data.data.monthly_report_id : null
}, () => {
this.getReport()
this.getReportAttachment()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
})
}
clickDetail(item, id, revision, status) {
......@@ -277,15 +367,15 @@ export default class MonthlyReport extends Component {
visibleLOCF: false,
})
} else if (item === 'List of Credit Facilities') {
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: false,
visibleLOCF: true,
})
this.setState({
visibleMonthlyReport: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: false,
visibleLOCF: true,
})
}
})
}
......@@ -321,12 +411,27 @@ export default class MonthlyReport extends Component {
this.getReport()
this.getReportAttachment()
})
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
// console.log(response)
})
}
closeAlert() {
this.setState({ alert: false })
}
render() {
const columns = ["#", "Jenis Laporan",
{
......@@ -433,8 +538,25 @@ export default class MonthlyReport extends Component {
search: false
}
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{this.state.loading && loadingComponent}
{this.state.visibleMonthlyReport && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
......@@ -450,7 +572,7 @@ export default class MonthlyReport extends Component {
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue }, () => {
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getMonthlyReportID()
})}
disableClearable
......@@ -458,11 +580,11 @@ export default class MonthlyReport extends Component {
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
this.getMonthlyReportID()
})}
disableClearable
......@@ -475,7 +597,7 @@ export default class MonthlyReport extends Component {
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
this.getMonthlyReportID()
})}
disableClearable
......@@ -502,11 +624,13 @@ export default class MonthlyReport extends Component {
</div>
<div style={{ marginTop: 20 }}>
<MUIDataTable
data={this.state.dataTable}
columns={columns}
options={options}
/>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={this.state.dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
<div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}>
......@@ -657,15 +781,32 @@ export default class MonthlyReport extends Component {
)}
{this.state.visibleCAT && (
<CorporateAnnualTarget
open={this.props.open}
report_id={this.state.report_id}
height={this.props.height}
width={this.props.width}
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
submissionID={this.state.submissionID}
onClickClose={() => this.setState({ visibleCAT: false, visibleMonthlyReport: true })}
/>
)}
{this.state.visibleLOCF && (
<ListOfCreditFacilities
open={this.props.open}
report_id={this.state.report_id}
height={this.props.height}
width={this.props.width}
company={this.state.company}
revision={this.state.revisionTable}
periode={this.state.periode.periode}
monthlyReportId={this.state.monthlyReportId}
month={this.state.month}
status={"not-yet"}
prevRevision={false}
lastStatus={'SUBMIT'}
isAprrover={false}
/>
)}
</div >
......
src/container/MonthlyReport/BalanceSheetMR.js
View file @ 56418a2f
......@@ -45,7 +45,7 @@ export default class BalanceSheetMR extends Component {
this.getItemHierarki()
}
async getItemHierarki() {
getItemHierarki() {
let payload = {
"report_id": this.props.report_id,
"revision": Number(this.props.revision),
......
src/container/MonthlyReport/ListOfCreditFacilities.js
View file @ 56418a2f
import React, { Component } from 'react';
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Typography } from '@material-ui/core'
import { createMuiTheme, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import Images from '../../assets/Images';
import api from '../../api';
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
top: 0
};
export default class ListOfCreditFacilities extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false
}
}
render(){
return(
<div>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - List Of Credit Facilities</Typography>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
componentDidMount() {
this.setState({ loading: true })
this.getItemHierarki()
}
getItemHierarki() {
let payload = {
"report_id": 2,
"revision": Number(this.props.revision),
"periode": this.props.periode,
"company_id": this.props.company.company_id,
"monthly_report_id": this.props.monthlyReportId,
"month": this.props.month.month_id
}
api.create().getHierarkiMontlyReport(payload).then(response => {
console.log(response);
let dataTable = []
if (response.data) {
let res = response.data.data
const handlePushChild = (item) => {
let indexIDzz = dataTable.findIndex((val) => val[1] === item.id)
if (indexIDzz === -1) {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
])
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
}
res.map((item, index) => {
dataTable.push([
item.type_report_id,
item.id,
item.parent,
item.formula,
item.level,
item.description,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
item.balance_sheet.rolling_outlook === null ? "0.0" : item.balance_sheet.rolling_outlook === "" ? "0.0" : item.balance_sheet.rolling_outlook,
])
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items, indexs) => {
handlePushChild(items)
})
}
}
})
this.setState({ dataTable, loading: false })
}
})
}
render() {
let dataTable2 = this.state.dataTable
const handleAction = (idParent, typeReport, tableMeta) => {
if (this.props.isApprover) {
return false
} else {
if ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted')) {
if (idParent !== null) {
let indexsss = dataTable2.findIndex((val) => val[1] == idParent)
if (dataTable2[indexsss][6] == 'CUSTOMER PERSPECTIVE' || dataTable2[indexsss][6] == 'INTERNAL BUSINESS PROCESS PERSPECTIVE') {
return true
} else {
return false
}
} else {
if (typeReport == null || typeReport == 3) {
return true
} else if (tableMeta !== undefined && tableMeta.rowData[0] == 1) {
let indexID = dataTable2.findIndex((val) => val[2] == tableMeta.rowData[1])
if (indexID !== -1) {
return false
} else {
return true
}
} else {
return false
}
}
} else {
return false
}
}
}
let columns = [
{
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
display: false
}
}, {
name: "",
options: {
filter: false,
display: this.props.isApprover ? false : ((this.props.lastStatus == 'SUBMIT' || this.props.lastStatus == 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === 'draft' || this.props.status === 'submitted') ? true : false),
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#dbdbdb' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
// handleAction(tableMeta.rowData[2]) &&
<div style={{ display: 'flex' }}>
{/* {tableMeta.rowData[6] === "Active" ? */}
{handleAction(tableMeta.rowData[2], tableMeta.rowData[0], tableMeta) && <span>
<LightTooltip title={'Add'} arrow>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => // // console.log(tableMeta.rowData[1])}
onClick={() => {
// this.setState({ loading: true })
// handleTambah(tableMeta.rowData[1], tableMeta.rowIndex)
}}
>
<img src={Images.add} />
</button>
</LightTooltip>
</span>}
{handleAction(tableMeta.rowData[2], tableMeta.rowData[0]) && <span>
<LightTooltip title={'Delete'} arrow>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 5
}}
onClick={() => {
// this.setState({ loading: true })
// handleDelete(tableMeta.rowIndex)
}}
>
<img src={Images.delete} />
</button>
</LightTooltip>
</span>}
</div >
);
}
}
}, {
name: "Borrower (Company) Name",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Bank Name",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Type Of Credit",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Remarks",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Loan Maturity Date",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Interest",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: "Currency",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style2 }),
customBodyRender: (val, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
val
}
</div>
)
}
}
}, {
name: `Loan Plafond`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount Original (Currency)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount (IDR Equivalent)"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `Outstanding Loan (KI)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount Original (Currency)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount (IDR Equivalent)"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `Outstanding Loan (KMK)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount Original (Currency)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount (IDR Equivalent)"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
</div>
</div>
)
}
}
}, {
name: `Outstanding Loan (Others)`,
options: {
customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', height: 43, fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
<div className="grid grid-2x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount Original (Currency)"}</span>
</div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
<span>{"Amount (IDR Equivalent)"}</span>
</div>
</div>
</th>
),
setCellProps: () => ({
style: {
paddingLeft: 0,
paddingRight: 0
}
}),
customBodyRender: (val, tableMeta, updateValue) => {
// console.log(tableMeta);
return (
<div>
<div className="grid grid-3x content-center">
<div className="col-1">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
<div className="col-2">
<div style={{ textAlign: 'right', width: 90 }}>
{tableMeta.rowData[0] === 4 ?
null :
"1"
}
</div>
</div>
</div>
</div>
)
}
}
},
]
return (
<div>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - List Of Credit Facilities</Typography>
</div>
</div>
</Paper>
</div>
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
</div>
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
{!this.state.loading && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable2}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
</div>
</Paper>
</div>
</div>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment