Skip to content

T
Tia-dev
Commit a74cf8a7 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'GGMAC' into 'master' 

update progress report

See merge request !1508
parents d558a09a 11608abc
Hide whitespace changes
Inline Side-by-side
Showing with 319 additions and 0 deletions
src/container/Home.js
View file @ a74cf8a7
...@@ -11,6 +11,7 @@ import IconButton from '@material-ui/core/IconButton'; ...@@ -11,6 +11,7 @@ import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu'; 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 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';
...@@ -566,6 +567,17 @@ export default function MiniDrawer() { ...@@ -566,6 +567,17 @@ export default function MiniDrawer() {
} }
</div> </div>
))} ))}
<Link to={`${url}/progress-reports`}>
<div style={{ paddingLeft: 5 }} className={selectedIndex === 'progress-reports' ? "active" : ""}>
<a data-tip={'progress-reports'} data-for={'progress-reports'}>
<ListItem button key={'progress-reports'} onClick={() => selectIndex('progress-reports')}>
<ListItemIcon style={{ minWidth: open ? 40 : 56}}><ReportIcon style={{marginLeft: -5}}/></ListItemIcon>
<Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{'Progress Report'}</Typography>
</ListItem>
</a>
{!open && (<ReactTooltip border={true} id={'Progress Report'} place="bottom" type="light" effect="solid" />)}
</div>
</Link>
</List> </List>
{open && setting.length > 0 && {open && setting.length > 0 &&
<div style={{ marginLeft: 20 }}> <div style={{ marginLeft: 20 }}>
......
src/container/ProgressReport.js 0 → 100644
View file @ a74cf8a7
import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField } from '@material-ui/core';
import MUIDataTable from "mui-datatables";
import Images from '../assets/Images';
import DonutChart from 'react-d3-donut';
import Constant from '../library/Constant';
import api from '../api';
import { Link } from 'react-router-dom';
import { PropagateLoader } from 'react-spinners';
import { titleCase } from '../library/Utils';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
class ReportProgress extends Component {
constructor(props) {
super(props)
this.state = {
listApproval: null,
listCategory: {
options: [{ name: 'Report Status', value: 'report-status' }, { name: 'Approval Progress', value: 'approval-progress' }],
getOptionLabel: (option) => option.name,
},
listReportType: null,
listQuarter: {
options: [{ name: 'Q1', value: 'q1' }, { name: 'Q2', value: 'q2' }, { name: 'Q3', value: 'q3' }],
getOptionLabel: (option) => option.name,
},
listMonth: null,
listPeriodeMB: null,
quarter: {
name: 'Q1', value: 'q1'
},
category: {
name: 'Report Status', value: 'report-status'
},
month: null,
periodeMB: null,
reportType: null,
}
}
componentDidMount() {
this.getMonth()
this.getReportType()
}
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)
})
}
getMonth() {
this.setState({loading: true})
api.create().getMonthTransaction().then(response => {
let dateNow = new Date()
dateNow.setMonth(dateNow.getMonth() - 1);
let month = format(dateNow, 'MMMM')
// console.log(month);
if (response.data) {
if (response.data.status === "success") {
// console.log(response);
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,
};
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] }, () => {
// if (this.state.isApprover === true) {
// if (this.state.submittedOnly) {
// console.log('masuk cuk')
// this.getPeriode()
// } else {
// this.getLastPeriod()
// }
this.getPeriode()
// } else {
// this.getLastPeriod()
// this.getPeriode()
// }
})
} 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
}, () => {
console.log(this.state.listMonth)
console.log(this.state.listPeriodeMB)
})
}
render() {
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 }}>
<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.listCategory}
id="category"
onChange={(event, newInputValue) => this.setState({ category: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.getReportType()
this.setState({loading: false})
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Category" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.category}
/>
<Autocomplete
{...this.state.listReportType}
id="report-type"
onChange={(event, newInputValue) => this.setState({ reportType: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({loading: false})
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.reportType}
/>
</div>
</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, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({loading: false})
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeMB}
/>
{this.state.reportType != null && this.state.reportType.value == 1 && <Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({loading: false})
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>}
{this.state.reportType != null && this.state.reportType.value == 3 && <Autocomplete
{...this.state.listQuarter}
id="quarter"
onChange={(event, newInputValue) => this.setState({ quarter: newInputValue, loading: true }, () => {
// this.getListUserSubcoRO()
this.setState({loading: false})
})}
disableClearable
style={{ minWidth: 210, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Quarter" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.quarter}
/>}
</div>
</div>
<div style={{ marginTop: 20, marginBottom: 20 }}>
{/* <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0px 20px 10px 20px' }}>
<div></div>
{this.state.previewDownload && (
<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.downloadAllData()
}, 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.previewTable && (
<TableSubHolding
width={this.props.width}
height={this.props.height}
open={this.props.open}
month={this.state.month.month_value}
approvedMB={this.state.approveMB}
approveMonthly={this.state.approveMonthly}
type={this.state.report ? this.state.report.value : 1}
dataTable={this.state.dataTable}
periode={this.state.periode ? this.state.periode.periode : null}
quarter={this.state.quarter.name}
company={this.state.company}
/>
)} */}
</div>
</Paper>
</div>
</div>
</div>
);
}
}
export default ReportProgress;
src/router/homeRoutes.js
View file @ a74cf8a7
...@@ -20,6 +20,7 @@ import OutlookPA from '../container/OutlookPA'; ...@@ -20,6 +20,7 @@ import OutlookPA from '../container/OutlookPA';
import SubHolding from '../container/Laporan/SubHolding'; import SubHolding from '../container/Laporan/SubHolding';
import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra'; import SummaryTriputra from '../container/SummaryTriputra/SummaryOfTriputra';
import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT' import MasterDataCAT from '../container/MasterData/MasterDataCAT/MasterDataCAT'
import ProgressReport from '../container/ProgressReport'
const routes = [ const routes = [
{ {
...@@ -106,6 +107,10 @@ const routes = [ ...@@ -106,6 +107,10 @@ const routes = [
path: "/home/dashboard-financial", path: "/home/dashboard-financial",
main: DashboardFinancial main: DashboardFinancial
}, },
{
path: "/home/progress-reports",
main: ProgressReport
},
{ {
path: "*", path: "*",
main: screen404 main: screen404
......
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