Skip to content

T
Tia-dev
Commit 961ff3f3 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'deni-' into 'master' 

Deni

See merge request !638
parents e155096d 4316692e
Show whitespace changes
Inline Side-by-side
Showing with 814 additions and 84 deletions
src/container/MonthlyReport.js
View file @ 961ff3f3
import React, { Component } from 'react'; 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 MUIDataTable from 'mui-datatables';
import Images from '../assets/Images'; import Images from '../assets/Images';
import api from '../api'; import api from '../api';
...@@ -15,6 +15,15 @@ import ProfitLossMR from './MonthlyReport/ProfitLossMR'; ...@@ -15,6 +15,15 @@ import ProfitLossMR from './MonthlyReport/ProfitLossMR';
import TaxPlanningMR from './MonthlyReport/TaxPlanningMR'; import TaxPlanningMR from './MonthlyReport/TaxPlanningMR';
import FixedAssetsMovementMR from './MonthlyReport/FixedAssetsMovementMR'; import FixedAssetsMovementMR from './MonthlyReport/FixedAssetsMovementMR';
import ListOfCreditFacilities from './MonthlyReport/ListOfCreditFacilities' 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 { export default class MonthlyReport extends Component {
constructor(props) { constructor(props) {
...@@ -37,12 +46,17 @@ export default class MonthlyReport extends Component { ...@@ -37,12 +46,17 @@ export default class MonthlyReport extends Component {
visibleCAT: false, visibleCAT: false,
listAttachment: [], listAttachment: [],
visibleUpload: false, visibleUpload: false,
lastRevision: 0 lastRevision: 0,
loading: false,
alert: false,
tipeAlert: '',
messageAlert: '',
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
componentDidMount() { componentDidMount() {
this.setState({ loading: true })
this.getCompanyActive() this.getCompanyActive()
} }
...@@ -56,9 +70,19 @@ export default class MonthlyReport extends Component { ...@@ -56,9 +70,19 @@ export default class MonthlyReport extends Component {
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
this.setState({ listAttachment: response.data.data }) 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,14 +108,26 @@ export default class MonthlyReport extends Component { ...@@ -84,14 +108,26 @@ export default class MonthlyReport extends Component {
] ]
}) })
// console.log(dataTable); // 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() { getCompanyActive() {
api.create().getPerusahaanActive().then((response) => { api.create().getPerusahaanActive().then((response) => {
if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let companyData = data.map((item) => { let companyData = data.map((item) => {
...@@ -108,12 +144,22 @@ export default class MonthlyReport extends Component { ...@@ -108,12 +144,22 @@ export default class MonthlyReport extends Component {
this.getMonth() this.getMonth()
}) })
} else { } else {
alert(response.data.message) 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' })
} }
}) })
} }
getMonth(){ getMonth() {
api.create().getMonthTransaction().then(response => { api.create().getMonthTransaction().then(response => {
let dateNow = new Date let dateNow = new Date
let month = format(dateNow, 'MMMM') let month = format(dateNow, 'MMMM')
...@@ -125,7 +171,7 @@ export default class MonthlyReport extends Component { ...@@ -125,7 +171,7 @@ export default class MonthlyReport extends Component {
let monthData = data.map((item) => { let monthData = data.map((item) => {
return { return {
month_id: item.id, month_id: item.id,
month_value: String(item.month_name).substr(0,3) month_value: String(item.month_name).substr(0, 3)
} }
}) })
let defaultProps = { let defaultProps = {
...@@ -134,10 +180,21 @@ export default class MonthlyReport extends Component { ...@@ -134,10 +180,21 @@ export default class MonthlyReport extends Component {
}; };
let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == month) let index = data.sort((a, b) => a - b).findIndex((val) => val.month_name == month)
console.log(index); 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() 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,12 +219,23 @@ export default class MonthlyReport extends Component { ...@@ -162,12 +219,23 @@ export default class MonthlyReport extends Component {
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => { this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => {
this.getRevision() 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(){ onClickClose() {
this.setState({}) this.setState({})
} }
...@@ -193,12 +261,23 @@ export default class MonthlyReport extends Component { ...@@ -193,12 +261,23 @@ export default class MonthlyReport extends Component {
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => { this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getMonthlyReportID() 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(){ getMonthlyReportID() {
let payload = { let payload = {
"company_id": this.state.company.company_id, "company_id": this.state.company.company_id,
"periode": this.state.periode.periode, "periode": this.state.periode.periode,
...@@ -210,11 +289,22 @@ export default class MonthlyReport extends Component { ...@@ -210,11 +289,22 @@ export default class MonthlyReport extends Component {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({ this.setState({
monthlyReportId: response.data.data ? response.data.data.monthly_report_id : null monthlyReportId: response.data.data ? response.data.data.monthly_report_id : null
}, ()=> { }, () => {
this.getReport() this.getReport()
this.getReportAttachment() 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' })
} }
}) })
} }
...@@ -321,12 +411,27 @@ export default class MonthlyReport extends Component { ...@@ -321,12 +411,27 @@ export default class MonthlyReport extends Component {
this.getReport() this.getReport()
this.getReportAttachment() 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) // console.log(response)
}) })
} }
closeAlert() {
this.setState({ alert: false })
}
render() { render() {
const columns = ["#", "Jenis Laporan", const columns = ["#", "Jenis Laporan",
{ {
...@@ -433,8 +538,25 @@ export default class MonthlyReport extends Component { ...@@ -433,8 +538,25 @@ export default class MonthlyReport extends Component {
search: false 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 ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}> <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 && ( {this.state.visibleMonthlyReport && (
<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 }}>
...@@ -450,7 +572,7 @@ export default class MonthlyReport extends Component { ...@@ -450,7 +572,7 @@ export default class MonthlyReport extends Component {
<Autocomplete <Autocomplete
{...this.state.listMonth} {...this.state.listMonth}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getMonthlyReportID() this.getMonthlyReportID()
})} })}
disableClearable disableClearable
...@@ -462,7 +584,7 @@ export default class MonthlyReport extends Component { ...@@ -462,7 +584,7 @@ export default class MonthlyReport extends Component {
<Autocomplete <Autocomplete
{...this.state.listPeriode} {...this.state.listPeriode}
id="periode" id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
this.getMonthlyReportID() this.getMonthlyReportID()
})} })}
disableClearable disableClearable
...@@ -475,7 +597,7 @@ export default class MonthlyReport extends Component { ...@@ -475,7 +597,7 @@ export default class MonthlyReport extends Component {
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="company" id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
this.getMonthlyReportID() this.getMonthlyReportID()
})} })}
disableClearable disableClearable
...@@ -502,11 +624,13 @@ export default class MonthlyReport extends Component { ...@@ -502,11 +624,13 @@ export default class MonthlyReport extends Component {
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.dataTable} data={this.state.dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider>
</div> </div>
<div style={{ display: 'flex', marginTop: 20 }}> <div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}> <div style={{ width: '50%' }}>
...@@ -657,15 +781,32 @@ export default class MonthlyReport extends Component { ...@@ -657,15 +781,32 @@ export default class MonthlyReport extends Component {
)} )}
{this.state.visibleCAT && ( {this.state.visibleCAT && (
<CorporateAnnualTarget <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 })} onClickClose={() => this.setState({ visibleCAT: false, visibleMonthlyReport: true })}
/> />
)} )}
{this.state.visibleLOCF && ( {this.state.visibleLOCF && (
<ListOfCreditFacilities <ListOfCreditFacilities
open={this.props.open}
report_id={this.state.report_id}
height={this.props.height}
width={this.props.width}
company={this.state.company} company={this.state.company}
revision={this.state.revisionTable} revision={this.state.revisionTable}
periode={this.state.periode.periode} periode={this.state.periode.periode}
monthlyReportId={this.state.monthlyReportId}
month={this.state.month}
status={"not-yet"}
prevRevision={false}
lastStatus={'SUBMIT'}
isAprrover={false}
/> />
)} )}
</div > </div >
......
src/container/MonthlyReport/BalanceSheetMR.js
View file @ 961ff3f3
...@@ -45,7 +45,7 @@ export default class BalanceSheetMR extends Component { ...@@ -45,7 +45,7 @@ export default class BalanceSheetMR extends Component {
this.getItemHierarki() this.getItemHierarki()
} }
async getItemHierarki() { getItemHierarki() {
let payload = { let payload = {
"report_id": this.props.report_id, "report_id": this.props.report_id,
"revision": Number(this.props.revision), "revision": Number(this.props.revision),
......
src/container/MonthlyReport/ListOfCreditFacilities.js
View file @ 961ff3f3
import React, { Component } from 'react'; 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 { export default class ListOfCreditFacilities extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
loading: false
}
}
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>
<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>
)
}
}
},
]
render(){ return (
return(
<div> <div>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
...@@ -22,6 +600,17 @@ export default class ListOfCreditFacilities extends Component { ...@@ -22,6 +600,17 @@ export default class ListOfCreditFacilities extends Component {
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography> <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div> </div>
</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> </div>
</Paper> </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