Skip to content

T
Tia-dev
Commit 3ad89861 authored by d.arizona's avatar d.arizona
Browse files
Options

update banyak

parent 1237bf43
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 242 deletions
src/api/index.js
View file @ 3ad89861
...@@ -282,6 +282,8 @@ const create = (type = "") => { ...@@ -282,6 +282,8 @@ const create = (type = "") => {
const getReportFRLastMR = (body) => api.post('/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki', body) const getReportFRLastMR = (body) => api.post('/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki', body)
const getReportBSSuma = (body) => api.post('/transaction/summary_balance_sheet/summary/get_report_hierarki', body) const getReportBSSuma = (body) => api.post('/transaction/summary_balance_sheet/summary/get_report_hierarki', body)
const getDashboardCAT = (body) => api.post('/transaction/dashboard/get_dashboard_cat', body) const getDashboardCAT = (body) => api.post('/transaction/dashboard/get_dashboard_cat', body)
const getListChildDashboardCAT = (body) => api.get(`/transaction/dashboard/get_item_cat/${body}`)
const getDashboardCATDetail = (body) => api.post('/transaction/dashboard/get_dashboard_cat_detail', body)
const getHierarkiReportYtd = (body) => api.post('/transaction/summary_ytd/summary/get_report_hierarki', body) const getHierarkiReportYtd = (body) => api.post('/transaction/summary_ytd/summary/get_report_hierarki', body)
const getHierarkiReportHistorical = (body) => api.post('/transaction/summary_historical/summary/get_report_hierarki', body) const getHierarkiReportHistorical = (body) => api.post('/transaction/summary_historical/summary/get_report_hierarki', body)
const getHierarkiReportMTD = (body) => api.post('/transaction/summary_mtd/summary/get_report_hierarki', body) const getHierarkiReportMTD = (body) => api.post('/transaction/summary_mtd/summary/get_report_hierarki', body)
...@@ -695,7 +697,9 @@ const create = (type = "") => { ...@@ -695,7 +697,9 @@ const create = (type = "") => {
getParentItemReport, getParentItemReport,
saveMasterDataCat, saveMasterDataCat,
getDetailMasterDataCat, getDetailMasterDataCat,
deleteMasterDataCat deleteMasterDataCat,
getListChildDashboardCAT,
getDashboardCATDetail
} }
} }
......
src/container/Laporan/DashboardCAT.js
View file @ 3ad89861
...@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component { ...@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component {
periode: null, periode: null,
listMonth: null, listMonth: null,
month: null, month: null,
loading: true,
dataDashboard: [] dataDashboard: []
} }
} }
...@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component { ...@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') { if (res.data.status == 'success') {
console.log(res) console.log(res)
// let resp = res.data.data // let resp = res.data.data
this.setState({loading: false, dataDashboard : res.data.data}) this.setState({dataDashboard : res.data.data}, () => {
setTimeout(() => {
this.setState({loading: false})
}, 400);
})
} }
// else { // else {
// this.setState({loading: false}) // this.setState({loading: false})
......
src/container/Laporan/KPIs.js
View file @ 3ad89861
...@@ -69,7 +69,7 @@ export default class StrategiMap extends Component { ...@@ -69,7 +69,7 @@ export default class StrategiMap extends Component {
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
checked={!this.state.checkAll} checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
onChange={() => { onChange={() => {
this.setState({ this.setState({
checkAll: false, checkAll: false,
...@@ -93,6 +93,8 @@ export default class StrategiMap extends Component { ...@@ -93,6 +93,8 @@ export default class StrategiMap extends Component {
onChange={() => { onChange={() => {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD checkYTD: !this.state.checkYTD
}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -106,7 +108,9 @@ export default class StrategiMap extends Component { ...@@ -106,7 +108,9 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkAB} checked={this.state.checkAB}
onChange={() => { onChange={() => {
this.setState({ checkAB: !this.state.checkAB }) this.setState({ checkAB: !this.state.checkAB}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
})
}} }}
name="checkedB" name="checkedB"
color="primary" color="primary"
...@@ -119,7 +123,9 @@ export default class StrategiMap extends Component { ...@@ -119,7 +123,9 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkYoy} checked={this.state.checkYoy}
onChange={() => { onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy }) this.setState({ checkYoy: !this.state.checkYoy}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
})
}} }}
name="checkedB" name="checkedB"
color="primary" color="primary"
...@@ -165,13 +171,13 @@ export default class StrategiMap extends Component { ...@@ -165,13 +171,13 @@ export default class StrategiMap extends Component {
} }
if (this.state.checkAB === true) { if (this.state.checkAB === true) {
option.push( { option.push( {
color: "yellow", color: "#e3e16d",
points: dataAB points: dataAB
}) })
} }
if (this.state.checkYoy === true) { if (this.state.checkYoy === true) {
option.push( { option.push( {
color: "red", color: "#f27f77",
points: dataYoy points: dataYoy
}) })
} }
...@@ -199,11 +205,10 @@ export default class StrategiMap extends Component { ...@@ -199,11 +205,10 @@ export default class StrategiMap extends Component {
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
</div> </div>
<div style={{ width: '25%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
<div style={{ marginLeft: -50 }}> <div style={{ marginLeft: -50 }}>
<LineChart <LineChart
width={400} width={400}
height={70} height={150}
data={option} data={option}
// yMin={0} // yMin={0}
// yMax={10} // yMax={10}
...@@ -218,7 +223,7 @@ export default class StrategiMap extends Component { ...@@ -218,7 +223,7 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div> </div>
<div style={{ width: '10%', display: 'flex' }}> <div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems:'center' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography> <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div> </div>
......
src/container/Laporan/StrategiMap.js
View file @ 3ad89861
import React, { Component } from 'react' import React, { Component } from 'react'
// import { Paper, Typography } from '@material-ui/core' // import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images' import Images from '../../assets/Images'
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core' import { GridList, Paper, Typography, GridListTile, FormControl, FormControlLabel, Radio } from '@material-ui/core'
export default class StrategiMap extends Component { export default class StrategiMap extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataStrategy: this.props.data.strategy_map.category dataStrategy: this.props.data.strategy_map.category,
radioValue: true
} }
} }
...@@ -19,6 +20,14 @@ export default class StrategiMap extends Component { ...@@ -19,6 +20,14 @@ export default class StrategiMap extends Component {
render() { render() {
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{display: 'flex'}}>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({radioValue: true})}/>} label="Actual vs Prev. Month" />
</FormControl>
<FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({radioValue: false})} />} label="YOY" />
</FormControl>
</div>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}> <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}>
<div style={{ height: 56, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#f1f1f1', display: 'flex' }}> <div style={{ height: 56, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: '#f1f1f1', display: 'flex' }}>
<div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}> <div style={{ width: '25%', borderRight: 'solid 1px #d8d8d8', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
...@@ -40,25 +49,25 @@ export default class StrategiMap extends Component { ...@@ -40,25 +49,25 @@ export default class StrategiMap extends Component {
<div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}> <div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
<div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}> <div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
<GridList cellHeight={100} cols={3}> <GridList cellHeight={100} cols={3}>
{item.nodes.length < 1? {item.nodes.length < 1 ?
<div style={{height: 75}}/> <div style={{ height: 75 }} />
: :
item.nodes.map((items, indexs) => { item.nodes.map((items, indexs) => {
return ( return (
<GridListTile key={items} cols={item.nodes.length == 1? 3 : item.nodes.length == 2? 2 : 1} style={{}}> <GridListTile key={items} cols={item.nodes.length == 1 ? 3 : item.nodes.length == 2 ? 2 : 1} style={{}}>
<div style={{ display: 'flex', minWidth: 220, borderRadius: 6, marginLeft: 10}}> <div style={{ display: 'flex', minWidth: 220, borderRadius: 6, marginLeft: 10 }}>
<div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 10 }}> <div style={{ display: 'grid', alignContent: 'center', backgroundColor: '#6885a6', width: 155, borderTopLeftRadius: 6, borderBottomLeftRadius: 6, padding: 10 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography> <Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography>
</div>
<div style={{ backgroundColor: this.state.radioValue? (items.is_higher_actual ? '#cbf4a8' : '#faaaaa') : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa'), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={this.state.radioValue? (items.is_higher_actual ? Images.up : Images.down) : (items.is_higher_yoy ? Images.up : Images.down)} />
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div> </div>
<div style={{ backgroundColor: items.is_higher ? '#cbf4a8' : '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}> </GridListTile>
<img src={items.is_higher ? Images.up : Images.down} /> )
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography> })}
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography>
</div>
</div>
</GridListTile>
)
})}
</GridList> </GridList>
</div> </div>
</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