Merge branch 'GGMAC' into 'master'

update banyak

See merge request !1231

src/api/index.js

@@ -282,6 +282,8 @@ const create = (type = "") => {
   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 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 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)
@@ -695,7 +697,9 @@ const create = (type = "") => {
     getParentItemReport,
     saveMasterDataCat,
     getDetailMasterDataCat,
-    deleteMasterDataCat
+    deleteMasterDataCat,
+    getListChildDashboardCAT,
+    getDashboardCATDetail
   }
 }
 

src/container/Laporan/DashboardCAT.js

@@ -28,6 +28,7 @@ export default class DashboardCAT extends Component {
             periode: null,
             listMonth: null,
             month: null,
+            loading: true,
             dataDashboard: []
         }
     }
@@ -241,7 +242,11 @@ export default class DashboardCAT extends Component {
             if (res.data.status == 'success') {
                 console.log(res)
                 // 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 {
             //     this.setState({loading: false})

src/container/Laporan/KPIs.js

@@ -69,7 +69,7 @@ export default class StrategiMap extends Component {
                                     <FormControlLabel
                                         control={
                                             <Checkbox
-                                                checked={!this.state.checkAll}
+                                                checked={!this.state.checkAll && !this.state.checkYoy && !this.state.checkAB && !this.state.checkYTD}
                                                 onChange={() => {
                                                     this.setState({
                                                         checkAll: false,
@@ -93,6 +93,8 @@ export default class StrategiMap extends Component {
                                                 onChange={() => {
                                                     this.setState({ 
                                                         checkYTD: !this.state.checkYTD
+                                                    }, () => {
+                                                        this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
                                                     })
                                                 }}
                                                 name="checkedB"
@@ -106,7 +108,9 @@ export default class StrategiMap extends Component {
                                             <Checkbox
                                                 checked={this.state.checkAB}
                                                 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"
                                                 color="primary"
@@ -119,7 +123,9 @@ export default class StrategiMap extends Component {
                                             <Checkbox
                                                 checked={this.state.checkYoy}
                                                 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"
                                                 color="primary"
@@ -165,13 +171,13 @@ export default class StrategiMap extends Component {
                             }
                             if (this.state.checkAB === true) {
                                 option.push( {
-                                    color: "yellow",
+                                    color: "#e3e16d",
                                     points: dataAB
                                 })
                             }
                             if (this.state.checkYoy === true) {
                                 option.push( {
-                                    color: "red",
+                                    color: "#f27f77",
                                     points: dataYoy
                                 })
                             }
@@ -199,11 +205,10 @@ export default class StrategiMap extends Component {
                                         <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.unit}</Typography>
                                     </div>
                                     <div style={{ width: '25%', display: 'grid', alignContent: 'center' }}>
-
                                         <div style={{ marginLeft: -50 }}>
                                             <LineChart
                                                 width={400}
-                                                height={70}
+                                                height={150}
                                                 data={option}
                                                 // yMin={0}
                                                 // yMax={10}
@@ -218,7 +223,7 @@ export default class StrategiMap extends Component {
                                     <div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
                                         <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
                                     </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 }}>
                                             <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
                                         </div>

src/container/Laporan/StrategiMap.js

 import React, { Component } from 'react'
 // import { Paper, Typography } from '@material-ui/core'
 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 {
     constructor(props) {
         super(props)
         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 {
     render() {
         return (
             <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%' }}>
                     <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 }}>
@@ -40,18 +49,18 @@ export default class StrategiMap extends Component {
                                 <div style={{ width: '75%', borderRight: 'solid 1px #d8d8d8', paddingRight: 20 }}>
                                     <div style={{ display: 'flex', alignContent: 'center', padding: 20, borderBottom: 'solid 1px #d8d8d8' }}>
                                         <GridList cellHeight={100} cols={3}>
-                                            {item.nodes.length < 1? 
-                                                <div style={{height: 75}}/>
+                                            {item.nodes.length < 1 ?
+                                                <div style={{ height: 75 }} />
                                                 :
                                                 item.nodes.map((items, indexs) => {
                                                     return (
-                                                    <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}}>
+                                                        <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: '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>
                                                                 </div>
-                                                            <div style={{ backgroundColor: items.is_higher ? '#cbf4a8' : '#faaaaa', width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
-                                                                <img src={items.is_higher ? Images.up : Images.down} />
+                                                                <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>