Skip to content

T
Tia-dev
Commit d0b77020 authored by muhammad ridwan's avatar muhammad ridwan
Browse files
Options

tambah fiture report carfm

parent 6dc75de9
Show whitespace changes
Inline Side-by-side
Showing with 431 additions and 8 deletions
src/api/index.js
View file @ d0b77020
......@@ -486,6 +486,7 @@ const create = (type = "") => {
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/${body.year}`)
const getMonitoringCafrm = (body) => api.get(`transaction/monitoring/cafrm/${body.year}/${body.month}`)
// Superadmin Approve
const getListApprover = (report, monthlyReportId) => api.get(`transaction/${report}/get_approver/${monthlyReportId}`)
......@@ -840,6 +841,7 @@ const create = (type = "") => {
getMonitoringMR,
getMonitoringRO,
getMonitoringOLPA,
getMonitoringCafrm,
getListApprover,
getIdToken,
triggerHistoricalRatio
......
src/container/CAFRM/CafrmDocument.js
View file @ d0b77020
......@@ -8,11 +8,11 @@ import ReactTooltip from 'react-tooltip';
import api from '../../api';
import PropagateLoader from "react-spinners/PropagateLoader"
import TableDocument from "./TableCafrmDocument";
import CreateCarfmDoc from "./CreateCarfmDocument";
import CreateCafrmDoc from "./CreateCafrmDocument";
const Alert = withStyles({})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CarfmDocument extends Component {
export default class CafrmDocument extends Component {
constructor(props) {
super(props);
......@@ -301,7 +301,7 @@ export default class CarfmDocument extends Component {
</div>
{this.state.visibleCreate && (
<CreateCarfmDoc
<CreateCafrmDoc
onClickClose={() => this.setState({ visibleCreate: false })}
// getDataDocument={this.getDataDocument.bind(this)}
createDocument={this.createDocument.bind(this)}
......
src/container/CAFRM/CreateCarfmDocument.js → src/container/CAFRM/CreateCafrmDocument.js
View file @ d0b77020
......@@ -14,7 +14,7 @@ import PropagateLoader from "react-spinners/PropagateLoader"
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CreateCarfmDoc extends Component {
export default class CreateCafrmDoc extends Component {
constructor(props) {
super(props)
this.state = {
......
src/container/ReportCarfm/RepotrCafrm.js 0 → 100644
View file @ d0b77020
import React, {Component} from 'react';
import api from "../../api";
import {format} from "date-fns";
import Constant from "../../library/Constant";
import {
createMuiTheme,
FormControlLabel,
Input,
MuiThemeProvider,
TableCell,
Typography,
Paper,
TextField,
Snackbar
} from "@material-ui/core";
import MUIDataTable from "mui-datatables";
import {PropagateLoader} from 'react-spinners';
import {Alert} from '@material-ui/lab';
import ReactTooltip from "react-tooltip";
import Autocomplete from '@material-ui/lab/Autocomplete';
import Images from '../../assets/Images';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable4());
const options = ct.customOptionsFixedColumnMonitoring();
const style = {
position: "sticky",
left: 0,
zIndex: 101,
background: "white",
};
const style2 = {
position: "sticky",
background: "white",
zIndex: 100,
};
class RepotrCafrm extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [],
listMonth: null,
listPeriodeMB: null,
curMonth: 0,
curYear: 0,
data: false
}
console.log(this.state.periodeMB);
console.log(this.state.month);
}
async getMonth() {
this.setState({loading: true})
await api.create().getMonthTransaction().then(response => {
let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1);
let month = format(dateNow, 'MMMM')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let monthData = data.map((item) => {
return {
month_id: item.id,
month_value: String(item.month_name).substr(0, 3)
}
})
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_value,
};
console.log("month ");
console.log(defaultProps);
let index = data.findIndex((val) => val.month_name == month)
this.setState({
listMonth: defaultProps,
month: index == -1 ? monthData[0] : monthData[index],
loading: false
})
} else {
this.setState({alert: true, messageAlert: response.data.message, tipeAlert: 'warning'}, () => {
if (response.data.message.includes("Someone Logged In") || response.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({alert: true, messageAlert: response.data.message, tipeAlert: 'error'})
}
})
}
getPeriode() {
let currentYear = new Date().getFullYear()
let MB = []
for (var i = 2000; i <= currentYear; i++) {
MB.push({name: String(i), value: i})
if (i == currentYear) {
MB.push({name: String(i + 1), value: i + 1})
}
}
let defaultPropsMB = {
options: MB,
getOptionLabel: (option) => option.name,
};
this.setState({
listPeriodeMB: defaultPropsMB,
periodeMB: MB[MB.length - 1],
loading: false
})
}
async getData(payload) {
console.log("getData +1323")
console.log(payload);
await api.create().getMonitoringCafrm(payload).then((res) => {
console.log(res);
if (res.data) {
if (res.data.status === 'success') {
let data = res.data.data;
this.setState({
dataTable: data,
data: true,
loading: false
})
} else {
this.setState({
alert: true,
messageAlert: res.data.message,
tipeAlert: 'warning',
loading: false
}, () => {
if (res.data.message.includes("Someone Logged In") || res.data.message.includes("Token Expired")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({alert: true, messageAlert: res.data.message, tipeAlert: 'error', loading: false})
}
});
}
async getFromCallback() {
if (this.state.curYear >= 2000 && this.state.curMonth > 0) {
let month = 0;
if(this.state.curMonth >= 1 && this.state.curMonth <= 9){
month = '0'+this.state.curMonth;
}else{
month = this.state.curMonth;
}
let payload = {year: this.state.curYear, month: month};
await this.getData(payload);
console.log(`month ${this.state.curMonth} year ${this.state.curYear}`)
this.setState({
curMonth: month,
loading: false
})
} else {
this.setState({
loading: false
})
}
}
async downloadData() {
let url = `${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/monitoring/export_cafrm_report?periode=${this.state.curYear}&months=${this.state.curMonth}`
console.log(url);
let res = await fetch(
`${process.env.REACT_APP_URL_MAIN_BE}/public/transaction/monitoring/export_cafrm_report?periode=${this.state.curYear}&months=${this.state.curMonth}`
)
res = await res.blob()
this.setState({ loading: false })
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = `Progress Report CARFM ${this.state.curYear}-${this.state.curYear}.xlsx`;
a.click();
}
}
async componentDidMount() {
await this.getMonth();
await this.getPeriode();
this.setState({
loading: false
})
console.log("month");
console.log(this.state.listMonth);
console.log("year");
console.log(this.state.listPeriodeMB);
console.log("data")
console.log(this.state.dataTable);
}
render() {
const columnMR = [
{
name: "company_name",
label: "Company",
options : {
customHeadRender: (columnMeta) => (
<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.label}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val) => {
return <div style={{ width: 300, textAlign: 'left', paddingLeft: 20 }}>{val}</div>;
},
}
},
{
name: 'internal_audit',
label: "Internal Audit",
options : {
customHeadRender : (columnMeta) => (
<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.label}</Typography>
</TableCell>
),
setCellProps: () => ({style2}),
customBodyRender: (val) => {
return (
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{val}</div>
</div>
)
}
}
},
{
name: 'anti_fraud',
label: "Anti Fraud",
options : {
customHeadRender : (columnMeta) => (
<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.label}</Typography>
</TableCell>
),
setCellProps: () => ({style2}),
customBodyRender: (val) => {
return (
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{val}</div>
</div>
)
}
}
},
{
name: 'risk_management',
label: "Risk Management",
options : {
customHeadRender : (columnMeta) => (
<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.label}</Typography>
</TableCell>
),
setCellProps: () => ({style2}),
customBodyRender: (val) => {
return (
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5 }}>
<div style={{ textAlign: 'center' }}>{val}</div>
</div>
)
}
}
}
];
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', minHeight: this.props.height}}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div>
<div className={"main-color"}
style={{height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20}}>
<Typography style={{fontSize: '16px', color: 'white'}}>Report Status & Approval Progress
Monitoring</Typography>
</div>
<div style={{padding: 20, width: '100%'}}>
<Paper style={{paddingTop: 10, paddingBottom: 50}}>
<div style={{borderBottom: 'solid 1px #c4c4c4'}}>
<Typography style={{fontSize: '12px', color: '#4b4b4b', margin: 10}}>Report Status &
Approval Progress</Typography>
</div>
<div style={{minWidth: 'max-content', padding: '20px 20px 0px 20px'}}>
<div style={{marginTop: 15, display: 'flex'}}>
<Autocomplete
{...this.state.listPeriodeMB}
id="periode"
onChange={(event, newInputValue) => this.setState({
periodeMB: newInputValue,
curYear: newInputValue['value'],
loading: true
}, () => {this.getFromCallback()})}
disableClearable
style={{minWidth: 210, marginRight: 20}}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal"
style={{marginTop: 7}}/>}
/>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({
month: newInputValue,
curMonth: newInputValue['month_id'],
loading: true
}, () => {this.getFromCallback()})}
disableClearable
style={{minWidth: 210, marginRight: 20}}
renderInput={(params) => <TextField {...params} label="Month" margin="normal"
style={{marginTop: 7}}/>}
/>
</div>
</div>
<div style={{marginTop: 20, marginBottom: 20}}>
<div style={{
display: 'flex',
justifyContent: 'space-between',
padding: '0px 20px 10px 20px'
}}>
<div></div>
{this.state.curMonth > 0 && this.state.curYear > 2000 && !this.state.loading && (
<div style={{
width: '50%',
justifyContent: 'flex-end',
display: 'flex',
flexFlow: 'wrap'
}}>
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}
onClick={() => this.setState({loading: true}, () => {
setTimeout(() => {
this.downloadData()
}, 100);
})}
>
<img src={Images.download}/>
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light"
effect="solid"/>
</div>
)}
</div>
{this.state.loading && loadingComponent}
{this.state.curMonth > 0 && this.state.curYear > 2000 && !this.state.loading && (
<div style={{
padding: "0px 20px 20px 20px",
width: this.props.width - (this.props.open === true ? 350 : 100)
}}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={this.state.dataTable}
columns={columnMR}
options={options}
/>
</MuiThemeProvider>
</div>
)}
</div>
</Paper>
</div>
</div>
</div>
);
}
}
export default RepotrCafrm;
\ No newline at end of file
src/router/homeRoutes.js
View file @ d0b77020
......@@ -20,7 +20,8 @@ import SubHolding from '../container/Reports/SubHolding';
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra';
import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT';
import ProgressReport from '../container/ProgressReport/ProgressReport';
import CarfmDocument from "../container/CAFRM/CafrmDocument";
import CafrmDocument from "../container/CAFRM/CafrmDocument";
import ReportCafrm from "../container/ReportCarfm/RepotrCafrm";
const routes = [
{
......@@ -113,15 +114,19 @@ const routes = [
},
{
path: "/home/internal-audit",
main: CarfmDocument
main: CafrmDocument
},
{
path: "/home/anti-fraud",
main: CarfmDocument
main: CafrmDocument
},
{
path: "/home/risk-management",
main: CarfmDocument
main: CafrmDocument
},
{
path: "/home/progress-report-cafrm",
main: ReportCafrm
},
{
path: "*",
......
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