cat pa!

src/container/Laporan/SubHolding.js

@@ -4133,6 +4133,7 @@ export default class SubHolding extends Component {
                                         dataTable={this.state.dataTable}
                                         periode={this.state.periode ? this.state.periode.periode : null}
                                         quarter={this.state.quarter.name}
+                                        company={this.state.company}
                                     />
                                 )}
                             </div>

src/container/Laporan/TableSubHolding.js

 import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from '@material-ui/core'
 import MUIDataTable from 'mui-datatables';
 import React, { Component } from 'react'
+import api from '../../api'
 import NumberFormat from 'react-number-format';
 import * as R from 'ramda'
 
@@ -38,13 +39,109 @@ export default class TableSubHolding extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            perfomanceScoreColor: '#fff',
+            performanceScoreColor: '#fff',
             parameterScore: [],
             totalScore: 0,
-            perfomanceScore: ''
+            performanceScore: '',
+            parameterPerfom: [],
         }
     }
 
+    componentDidMount() {
+        if (this.props.type === 10 || this.props.type === 11) {
+            this.getParameterGroup()
+            this.getParameterGroupPerfom()    
+        }        
+    }
+
+    getParameterGroup() {
+        api.create().getParameterByGroupName({
+            "group_name": 'ACHIEVEMENT_KPI'
+        }).then((response) => {
+            console.log(response.data)
+            if (response.data) {
+                this.setState({ parameterScore: response.data.data })
+            }
+        })
+    }
+
+    getParameterGroupPerfom() {
+        api.create().getParameterByGroupName({
+            "group_name": "PERFORMANCE_KPI"
+        }).then((response) => {
+            console.log(response.data)
+            if (response.data) {
+                this.setState({ parameterPerfom: response.data.data }, () => { 
+                    this.handleTotalScore(this.props.dataTable)
+                })
+            }
+        })
+    }
+
+    handleTotalScore(dataTable2) {
+        // console.log(dataTable2);
+        this.setState({ loading: true }, () => {
+            let totalWeight = 0
+            let total = 0
+            let score = 0
+            let performanceScore = ''
+            dataTable2.map((item, index) => {
+                // console.log(item[6])
+                //total weight
+                if (item[0] !== 1 && item[0] !== 4) {
+                    if (item[12] == '' || String(item[12]) == '0' || String(item[12]) == '0.0') {
+                        totalWeight += Number(0)
+                    } else {
+                        totalWeight += Number(item[6])
+                    }
+                }
+                if (item[0] !== 1 && item[0] !== 4) {
+                    total += Number(item[15])
+                }
+            })
+            totalWeight = Number(totalWeight) / 100
+            // console.log(total);
+            // console.log(totalWeight);
+            score = Number(Number(total).toFixed(2) / Number(totalWeight)).toFixed(2)
+            let lastTotal = R.equals(score, NaN) ? 0.0 : score
+
+            let indexPerform = this.state.parameterPerfom.findIndex((val) => val.company_id == this.props.company.company_id)
+            let listPerfomanceDefault = []
+            if (indexPerform == -1) {
+                listPerfomanceDefault = this.state.parameterPerfom.filter((val) => String(val.company_name).toLocaleLowerCase() == "default")
+            } else {
+                listPerfomanceDefault = this.state.parameterPerfom.filter((val) => val.company_id == this.props.company.company_id)
+            }
+            let performanceScoreColor = '#fff'
+            if (listPerfomanceDefault.length > 0) {
+                listPerfomanceDefault.map((item, index) => {
+                    // console.log(Number(lastTotal))
+                    // console.log(Number(item.min_value))
+                    // console.log(Number(item.max_value))
+                    if (Number(lastTotal) >= Number(item.min_value) && Number(lastTotal) <= Number(item.max_value)) {
+                        // console.log('masuk')
+                        performanceScore = item.description
+                        performanceScoreColor = item.value
+                    }
+                })
+            }
+            // console.log(performanceScoreColor)
+            // console.log(this.state.parameterPerfom)
+            // console.log(listPerfomanceDefault)
+            // console.log(performanceScore)
+            // console.log(performanceScoreColor)
+
+            setTimeout(() => {
+                this.setState({ totalScore: lastTotal, performanceScore, loading: false, performanceScoreColor }, () => {
+                    this.setState({ loading: true })
+                    setTimeout(() => {
+                        this.setState({ loading: false })
+                    }, 500);
+                })
+            }, 500);
+        })
+    }
+
     render() {
         let dataTable2 = this.props.dataTable
         const handleChangeBS = (value, tableMeta, type) => {
@@ -27460,7 +27557,7 @@ export default class TableSubHolding extends Component {
                         />
                     </MuiThemeProvider>
                 </div>
-                {this.props.type === 10 ?
+                {this.props.type === 10 || this.props.type === 11 ?
                     <div style={{ paddingBottom: 15 }}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '100%', paddingLeft: 15, paddingRight: 15, marginTop: 5 }}>
                             <div>
@@ -27488,8 +27585,8 @@ export default class TableSubHolding extends Component {
                                 <div style={{ padding: 5 }}>
                                     <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PERFOMANCE</Typography>
                                 </div>
-                                <div style={{ borderStyle: 'solid', backgroundColor: this.state.perfomanceScoreColor, borderWidth: '0px 1px 1px 1px', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
-                                    <Typography style={{ fontSize: '11px', color: 'black', fontWeight: 'bold' }}>{this.state.perfomanceScore}</Typography>
+                                <div style={{ borderStyle: 'solid', backgroundColor: this.state.performanceScoreColor, borderWidth: '0px 1px 1px 1px', padding: 5, minWidth: 200, display: 'flex', justifyContent: 'flex-end' }}>
+                                    <Typography style={{ fontSize: '11px', color: 'black', fontWeight: 'bold' }}>{this.state.performanceScore}</Typography>
                                 </div>
                             </div>
                         </div>