Skip to content

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

Merge branch 'GGMAC' into 'master' 

update mayan

See merge request !1236
parents 23469c2f 10738301
Show whitespace changes
Inline Side-by-side
Showing with 508 additions and 204 deletions
src/api/index.js
View file @ 7c68bef8
...@@ -284,7 +284,7 @@ const create = (type = "") => { ...@@ -284,7 +284,7 @@ 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 getListChildDashboardCAT = (periode,month) => api.get(`/transaction/dashboard/get_home_cat/${periode}/${month}`)
const getDashboardCATDetail = (body) => api.post('/transaction/dashboard/get_dashboard_cat_detail', 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)
......
src/container/Home.js
View file @ 7c68bef8
...@@ -227,7 +227,7 @@ export default function MiniDrawer() { ...@@ -227,7 +227,7 @@ export default function MiniDrawer() {
}, { }, {
img: 'beranda', img: 'beranda',
label: 'CAT Dashboard', label: 'CAT Dashboard',
path: 'dashboard-cat', path: 'cat-dashboard',
} }
], ],
collapse: false, collapse: false,
......
src/container/HomePage.js
View file @ 7c68bef8
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField} from '@material-ui/core'; import { Typography, MuiThemeProvider, createMuiTheme, Paper, TextField } from '@material-ui/core';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import Images from '../assets/Images'; import Images from '../assets/Images';
import DonutChart from 'react-d3-donut'; import DonutChart from 'react-d3-donut';
...@@ -10,6 +10,7 @@ import { PropagateLoader } from 'react-spinners'; ...@@ -10,6 +10,7 @@ import { PropagateLoader } from 'react-spinners';
import { titleCase } from '../library/Utils'; import { titleCase } from '../library/Utils';
import { format } from 'date-fns'; import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
var ct = require("../library/CustomTable"); var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -38,9 +39,13 @@ class HomePage extends Component { ...@@ -38,9 +39,13 @@ class HomePage extends Component {
periodeMB: null, periodeMB: null,
periodeMR: null, periodeMR: null,
month: null, month: null,
monthCAT: null,
periodeCAT: null,
loading: false, loading: false,
accessMB: false, accessMB: false,
accessMR: false, accessMR: false,
company: [],
dataDashboardCAT: []
} }
} }
...@@ -83,11 +88,11 @@ class HomePage extends Component { ...@@ -83,11 +88,11 @@ class HomePage extends Component {
let currentYear = new Date().getFullYear() let currentYear = new Date().getFullYear()
let MB = [] let MB = []
let MR = [] let MR = []
for(var i=2000;i<=currentYear; i++) { for (var i = 2000; i <= currentYear; i++) {
MB.push({name: String(i), value: i}) MB.push({ name: String(i), value: i })
MR.push({name: String(i), value: i}) MR.push({ name: String(i), value: i })
if (i == currentYear) { if (i == currentYear) {
MB.push({name: String(i+1), value: i+1}) MB.push({ name: String(i + 1), value: i + 1 })
} }
} }
...@@ -106,9 +111,33 @@ class HomePage extends Component { ...@@ -106,9 +111,33 @@ class HomePage extends Component {
let yearNow = dateNow.getFullYear() let yearNow = dateNow.getFullYear()
let indexMonthMR = MR.findIndex((val) => val.value == yearNow) let indexMonthMR = MR.findIndex((val) => val.value == yearNow)
this.setState({listPeriodeMB: defaultPropsMB, periodeMB: MB[MB.length - 1], listPeriodeMR: defaultPropsMR, periodeMR: MR[indexMonthMR]}, () => { this.setState({ listPeriodeMB: defaultPropsMB, periodeMB: MB[MB.length - 1], listPeriodeMR: defaultPropsMR, periodeMR: MR[indexMonthMR], listPeriodeCAT: defaultPropsMB, periodeCAT: MB[indexMonthMR] }, () => {
this.getListUserSubcoMB() this.getListUserSubcoMB()
this.getListUserSubcoMR() this.getListUserSubcoMR()
this.getDetailUser()
})
}
getDashboardCAT() {
console.log(this.state.company)
api.create().getListChildDashboardCAT(this.state.periodeCAT.value, this.state.monthCAT.month_id).then((res) => {
if (res.data) {
let response = res.data.data.business_unit
let data = []
response.map((item, index) => {
let arrayChild = []
item.category.map((items, indexs) => {
if (this.state.company.includes(items.company_id)) {
arrayChild.push({ ...items, current_value: Number(items.current_value).toFixed(2), performanceColor: this.handleBackgroundPerform(Number(items.current_value)) })
}
})
if (arrayChild.length > 0) {
data.push({ ...item, category: arrayChild })
}
})
console.log(data)
this.setState({ dataDashboardCAT: data, loading: false })
}
}) })
} }
...@@ -135,7 +164,7 @@ class HomePage extends Component { ...@@ -135,7 +164,7 @@ class HomePage extends Component {
let index = data.findIndex((val) => val.month_name == month) let index = data.findIndex((val) => val.month_name == month)
// console.log(month) // console.log(month)
// console.log(index) // console.log(index)
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => { this.setState({ listMonth: defaultProps, listMonthCAT: defaultProps, monthCAT: monthData[index], month: index == -1 ? monthData[0] : monthData[index] }, () => {
// if (this.state.isApprover === true) { // if (this.state.isApprover === true) {
// if (this.state.submittedOnly) { // if (this.state.submittedOnly) {
// console.log('masuk cuk') // console.log('masuk cuk')
...@@ -165,8 +194,6 @@ class HomePage extends Component { ...@@ -165,8 +194,6 @@ class HomePage extends Component {
}) })
} }
getPermissionMB() { getPermissionMB() {
let payload = { let payload = {
menu: "Master Budget & CAT" menu: "Master Budget & CAT"
...@@ -179,8 +206,8 @@ class HomePage extends Component { ...@@ -179,8 +206,8 @@ class HomePage extends Component {
btnCreateMB: response.data.data.create, btnCreateMB: response.data.data.create,
btnEditMB: response.data.data.edit, btnEditMB: response.data.data.edit,
load: true load: true
},() => { }, () => {
if (this.state.btnCreateMB === true && this.state.btnEditMB === true){ if (this.state.btnCreateMB === true && this.state.btnEditMB === true) {
this.setState({ accessMB: true }) this.setState({ accessMB: true })
} }
}) })
...@@ -207,8 +234,8 @@ class HomePage extends Component { ...@@ -207,8 +234,8 @@ class HomePage extends Component {
btnCreateMR: response.data.data.create, btnCreateMR: response.data.data.create,
btnEditMR: response.data.data.edit, btnEditMR: response.data.data.edit,
load: true load: true
},() => { }, () => {
if (this.state.btnCreateMR === true && this.state.btnEditMR === true){ if (this.state.btnCreateMR === true && this.state.btnEditMR === true) {
this.setState({ accessMR: true }) this.setState({ accessMR: true })
} }
}) })
...@@ -223,6 +250,34 @@ class HomePage extends Component { ...@@ -223,6 +250,34 @@ class HomePage extends Component {
}) })
} }
getDetailUser() {
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
this.setState({ tempData: response.data.data, company: response.data.data.company }, () =>
this.getDashboardCAT())
// console.log(response.data.data)
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
if (response.data.message.includes("Someone Logged In")) {
setTimeout(() => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}, 1000);
}
})
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
getListUserSubcoMB() { getListUserSubcoMB() {
// console.log(this.state.month.month_id) // console.log(this.state.month.month_id)
// console.log(this.state.periodeMR.value) // console.log(this.state.periodeMR.value)
...@@ -246,7 +301,7 @@ class HomePage extends Component { ...@@ -246,7 +301,7 @@ class HomePage extends Component {
}) })
} }
} else { } else {
this.setState({loading: false}) this.setState({ loading: false })
} }
}) })
} }
...@@ -261,7 +316,7 @@ class HomePage extends Component { ...@@ -261,7 +316,7 @@ class HomePage extends Component {
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
response.data.data.map((item, index) => { response.data.data.map((item, index) => {
if (item.is_submit === true ) { if (item.is_submit === true) {
valueSubmitMR += 1 valueSubmitMR += 1
} }
dataMR.push(item) dataMR.push(item)
...@@ -273,7 +328,7 @@ class HomePage extends Component { ...@@ -273,7 +328,7 @@ class HomePage extends Component {
}) })
} }
} else { } else {
this.setState({loading: false}) this.setState({ loading: false })
} }
}) })
} }
...@@ -294,7 +349,7 @@ class HomePage extends Component { ...@@ -294,7 +349,7 @@ class HomePage extends Component {
valueSubmitMR += 1 valueSubmitMR += 1
} }
if ( item.type === "master_budget" ) { if (item.type === "master_budget") {
dataMB.push(item) dataMB.push(item)
} else { } else {
dataMR.push(item) dataMR.push(item)
...@@ -322,22 +377,22 @@ class HomePage extends Component { ...@@ -322,22 +377,22 @@ class HomePage extends Component {
if (String(response.data.status).toLocaleLowerCase() == 'success') { if (String(response.data.status).toLocaleLowerCase() == 'success') {
let data = response.data.data let data = response.data.data
data.map((item, index) => { data.map((item, index) => {
let statusConvert = item.status == 'approval_review'? 'Waiting For Review' : item.status == 'approval_proccess'? 'Waiting For Approval' : titleCase(item.status) let statusConvert = item.status == 'approval_review' ? 'Waiting For Review' : item.status == 'approval_proccess' ? 'Waiting For Approval' : titleCase(item.status)
if (this.state.isApproverMB && this.state.isApproverMR){ if (this.state.isApproverMB && this.state.isApproverMR) {
if (String(item.type_report).toLocaleLowerCase().includes("master")){ if (String(item.type_report).toLocaleLowerCase().includes("master")) {
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert]) listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item) rawData.push(item)
} else if (String(item.type_report).toLocaleLowerCase().includes("monthly")){ } else if (String(item.type_report).toLocaleLowerCase().includes("monthly")) {
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert]) listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item) rawData.push(item)
} }
} else if (this.state.isApproverMB) { } else if (this.state.isApproverMB) {
if (String(item.type_report).toLocaleLowerCase().includes("master")){ if (String(item.type_report).toLocaleLowerCase().includes("master")) {
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert]) listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item) rawData.push(item)
} }
} else if (this.state.isApproverMR) { } else if (this.state.isApproverMR) {
if (String(item.type_report).toLocaleLowerCase().includes("monthly")){ if (String(item.type_report).toLocaleLowerCase().includes("monthly")) {
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert]) listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item) rawData.push(item)
} }
...@@ -349,7 +404,7 @@ class HomePage extends Component { ...@@ -349,7 +404,7 @@ class HomePage extends Component {
} }
getApprMat() { getApprMat() {
this.setState({loading: true}) this.setState({ loading: true })
let isApproverMR = false let isApproverMR = false
let isApproverMB = false let isApproverMB = false
api.create().getAM().then((response) => { api.create().getAM().then((response) => {
...@@ -365,9 +420,9 @@ class HomePage extends Component { ...@@ -365,9 +420,9 @@ class HomePage extends Component {
// console.log(userId); // console.log(userId);
let indexId = actAMActive.findIndex((val) => val.user_id == userId) let indexId = actAMActive.findIndex((val) => val.user_id == userId)
actAMActive.map((item, index) => { actAMActive.map((item, index) => {
if (item.approval_type_name === "MONTHLY_REPORT"){ if (item.approval_type_name === "MONTHLY_REPORT") {
isApproverMR = true isApproverMR = true
} else if (item.approval_type_name === "MASTER_BUDGET"){ } else if (item.approval_type_name === "MASTER_BUDGET") {
isApproverMB = true isApproverMB = true
} }
}) })
...@@ -377,12 +432,12 @@ class HomePage extends Component { ...@@ -377,12 +432,12 @@ class HomePage extends Component {
this.getMonth() this.getMonth()
// this.getListUserSubco() // this.getListUserSubco()
} }
this.setState({ isApproverMB, isApproverMR}) this.setState({ isApproverMB, isApproverMR })
this.getDashboardMB() this.getDashboardMB()
// this.getDashboardMB() // this.getDashboardMB()
this.getDashboard() this.getDashboard()
// console.log(actAM) // console.log(actAM)
this.setState({loading: false}) this.setState({ loading: false })
}) })
} }
...@@ -403,6 +458,26 @@ class HomePage extends Component { ...@@ -403,6 +458,26 @@ class HomePage extends Component {
}) })
} }
handleBackgroundPerform(total) {
let color = 'white'
if (total >= 1.00 && total <= 2.00) {
color = 'red'
} else if (total >= 2.01 && total <= 2.75) {
color = 'yellow'
} else if (total >= 2.76 && total <= 3.00) {
color = 'lightgreen'
} else if (total >= 3.01 && total <= 3.75) {
color = 'yellowgreen'
} else if (total >= 3.76 && total <= 4.00) {
color = 'forestgreen'
} else if (total >= 4.01 && total <= 4.75) {
color = 'deepskyblue'
} else if (total >= 4.76 && total <= 5.00) {
color = 'dodgerblue'
}
return color
}
render() { render() {
const getDataMonth = (item) => { const getDataMonth = (item) => {
let months = item.months let months = item.months
...@@ -519,6 +594,107 @@ class HomePage extends Component { ...@@ -519,6 +594,107 @@ class HomePage extends Component {
<Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography> <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
</div> </div>
<div> <div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Dashboard CAT</Typography>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listMonthCAT}
id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => {
this.getDashboardCAT()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month CAT" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.monthCAT}
/>
<Autocomplete
{...this.state.listPeriodeCAT}
id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => {
this.getDashboardCAT()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode CAT" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeCAT}
/>
</div>
{this.state.dataDashboardCAT.map((items, indexs) => {
return (
<div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography>
<div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}>
{items.category.map((item, index) => {
return (
<div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%' }}>
<Typography style={{ textAlign: 'left' }}>{titleCase(String(item.category_name).toLocaleLowerCase())}</Typography>
</div>
{item.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
item.performanceColor,
"#d8d8d8"
]}
needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200}
height={140}
ringWidth={25}
textColor={'#4b4b4b'}
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div>
:
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
}
</div>
</div>
)
})}
</div>
</div>
)
})}
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography>
...@@ -684,6 +860,115 @@ class HomePage extends Component { ...@@ -684,6 +860,115 @@ class HomePage extends Component {
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography> <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Dashboard CAT</Typography>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listMonthCAT}
id="monthCAT"
onChange={(event, newInputValue) => this.setState({ monthCAT: newInputValue, loading: true }, () => {
this.getDashboardCAT()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month CAT" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.monthCAT}
/>
<Autocomplete
{...this.state.listPeriodeCAT}
id="periodeCAT"
onChange={(event, newInputValue) => this.setState({ periodeCAT: newInputValue, loading: true }, () => {
this.getDashboardCAT()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode CAT" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeCAT}
/>
</div>
{this.state.dataDashboardCAT.map((items, indexs) => {
return (
<div>
<Typography style={{ color: '#656565', fontSize: '16px', marginTop: 20 }}>{items.item_business}</Typography>
<div style={{ display: 'flex', overflowX: 'scroll', width: this.props.width * 0.9 }}>
{items.category.map((item, index) => {
return (
<Link to={{
pathname: `/home/cat-dashboard/`,
state: {
userType: 'user',
rawData: {month: this.state.monthCAT.month_id, periode: this.state.periodeCAT.value, companyId: item.company_id}
}
}}>
<div style={{ padding: 10, backgroundColor: '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', width: 250, marginRight: index == items.category.length - 1 ? 25 : 0, marginLeft: index == 0 ? 5 : 25 }}>
{/* <span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085', maxWidth: 100 }}>{item.category_name}</span> */}
<div style={{ fontSize: '17px', width: '100%' }}>
<Typography style={{ textAlign: 'left' }}>{titleCase(String(item.category_name).toLocaleLowerCase())}</Typography>
</div>
{item.total_kpi != null &&
<div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: String(item.category_name).toLocaleLowerCase().includes('internal') ? 0 : 25 }}>
<span style={{ textAlign: 'center', fontSize: '18px', color: "#fff" }}>{item.total_kpi}</span>
{/* <span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> */}
</div>}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: item.total_kpi == null ? 50 : 0 }}>
<div style={{ backgroundColor: item.performanceColor, textAlign: 'center', display: 'flex', justifyContent: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.performance}</Typography>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
item.performanceColor,
"#d8d8d8"
]}
needleColor={"#4b4b4b"}
value={Number(item.current_value).toFixed(2)}
valueFormat={'.2f'}
minValue={Number(item.low)}
maxValue={Number(item.high)}
customSegmentStops={[0, Number(item.current_value), 5]}
width={200}
height={140}
ringWidth={25}
textColor={'#4b4b4b'}
/>
</div>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
{item.is_higher == '-' ?
<div style={{ textAlign: '-webkit-center' }}>
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}> - </Typography>
</div>
:
<div style={{ textAlign: '-webkit-center' }}>
{item.is_higher == 'true' ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: '#4b4b4b' }}>vs Last Month</Typography>
</div>
}
</div>
</div>
</Link>
)
})}
</div>
</div>
)
})}
</div>
{(this.state.accessMB || this.state.accessMR) && {(this.state.accessMB || this.state.accessMR) &&
<div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}> <div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
...@@ -795,7 +1080,7 @@ class HomePage extends Component { ...@@ -795,7 +1080,7 @@ class HomePage extends Component {
value={this.state.periodeMR} value={this.state.periodeMR}
/> />
</div> </div>
<Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5}}> <Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report - ${bulan} ${tahun} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography> <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report - ${bulan} ${tahun} ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length}`}</Typography>
{this.state.listSubcoMR.map((item, index) => { {this.state.listSubcoMR.map((item, index) => {
return ( return (
......
src/container/Laporan/DashboardCAT.js
View file @ 7c68bef8
...@@ -36,12 +36,22 @@ export default class DashboardCAT extends Component { ...@@ -36,12 +36,22 @@ export default class DashboardCAT extends Component {
} }
componentDidMount() { componentDidMount() {
this.props.selectIndex('CAT Dashboard')
let dataStorageCAT = localStorage.getItem(Constant.DATACAT)
if (dataStorageCAT != 'datacat') {
this.setState({selectedKPI: JSON.parse(dataStorageCAT).listKPI})
}
if (this.props.location.state !== undefined) {
this.setState({ userType: this.props.location.state.userType, intent: 'Home', rawData: this.props.location.state.rawData }, () => {
this.getDetailUser()
})
} else {
this.getDetailUser() this.getDetailUser()
console.log(this.props); }
// this.getMonth()
} }
getDetailUser() { getDetailUser() {
console.log(this.state.rawData)
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data) { if (response.data) {
...@@ -92,7 +102,7 @@ export default class DashboardCAT extends Component { ...@@ -92,7 +102,7 @@ export default class DashboardCAT extends Component {
if (response.data) { if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let comID = this.state.rawData ? this.state.rawData.company_id : 0 let comID = this.state.rawData ? this.state.rawData.companyId : 0
let companyData = data.map((item) => { let companyData = data.map((item) => {
return { return {
company_id: item.company_id, company_id: item.company_id,
...@@ -157,6 +167,7 @@ export default class DashboardCAT extends Component { ...@@ -157,6 +167,7 @@ export default class DashboardCAT extends Component {
let data = [] let data = []
console.log(response.data.data) console.log(response.data.data)
console.log(this.state.lastPeriod) console.log(this.state.lastPeriod)
let periodeID = this.state.rawData ? this.state.rawData.periode : 0
response.data.data.map((item) => { response.data.data.map((item) => {
if (this.state.isApprover) { if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) { if (item >= 2000 && item <= (Number(currentYear) + 1)) {
...@@ -174,17 +185,17 @@ export default class DashboardCAT extends Component { ...@@ -174,17 +185,17 @@ export default class DashboardCAT extends Component {
} }
}) })
let defaultProps = { let defaultProps = {
options: periodeData, options: periodeData.sort((a, b) => a.periode - b.periode),
getOptionLabel: (option) => option.periode, getOptionLabel: (option) => option.periode,
}; };
let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod) let periode = (this.state.lastPeriod == "" ? String(Number(currentYear) + 1) : this.state.lastPeriod)
let index = data.sort((a, b) => a - b).findIndex((val) => val === periode) let index = periodeData.sort((a, b) => a.periode - b.periode).findIndex((val) => periodeID == 0? val.periode === periode : val.periode == periodeID)
// // console.log(this.props.location.state.rawData) // // console.log(this.props.location.state.rawData)
// console.log(this.state.lastPeriod) // console.log(this.state.lastPeriod)
console.log(data) console.log(data)
console.log(periodeData) console.log(periodeData)
console.log(defaultProps) console.log(defaultProps)
// // // console.log(index) console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => { this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
this.getMonth() this.getMonth()
}) })
...@@ -202,6 +213,7 @@ export default class DashboardCAT extends Component { ...@@ -202,6 +213,7 @@ export default class DashboardCAT extends Component {
if (response.data.status === "success") { if (response.data.status === "success") {
console.log(response); console.log(response);
let data = response.data.data let data = response.data.data
let monthID = this.state.rawData ? this.state.rawData.month : 0
let monthData = data.map((item) => { let monthData = data.map((item) => {
return { return {
month_id: item.id, month_id: item.id,
...@@ -212,8 +224,9 @@ export default class DashboardCAT extends Component { ...@@ -212,8 +224,9 @@ export default class DashboardCAT extends Component {
options: monthData, options: monthData,
getOptionLabel: (option) => option.month_value, getOptionLabel: (option) => option.month_value,
}; };
let index = data.findIndex((val) => val.month_name == month) let index = data.findIndex((val) => monthID == 0? val.month_name == month : val.id == monthID)
// console.log(index); console.log(index);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => { this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
this.getDasboardCAT() this.getDasboardCAT()
}) })
...@@ -266,7 +279,13 @@ export default class DashboardCAT extends Component { ...@@ -266,7 +279,13 @@ export default class DashboardCAT extends Component {
} }
setSelectedKPI(data) { setSelectedKPI(data) {
this.setState({ selectedKPI: data }) this.setState({ selectedKPI: data }, () => {
let payloadData = {
userID: localStorage.getItem(Constant.USER),
listKPI: this.state.selectedKPI
}
localStorage.setItem(Constant.DATACAT, this.state.selectedKPI.length == 0? 'datacat' : JSON.stringify(payloadData))
})
} }
render() { render() {
......
src/container/Laporan/StrategiMap.js
View file @ 7c68bef8
...@@ -59,7 +59,7 @@ export default class StrategiMap extends Component { ...@@ -59,7 +59,7 @@ export default class StrategiMap extends Component {
<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>
<div style={{ backgroundColor: this.state.radioValue ? (items.is_higher_actual == '-' ? '#d8d8d8' : (items.is_higher_actual == 'true' ? '#cbf4a8' : '#faaaaa')) : (items.is_higher_yoy == '-' ? 'white' : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa')), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}> <div style={{ backgroundColor: this.state.radioValue ? (items.is_higher_actual == '-' ? '#d8d8d8' : (items.is_higher_actual == 'true' ? '#cbf4a8' : '#faaaaa')) : (items.is_higher_yoy == '-' ? '#d8d8d8' : (items.is_higher_yoy == 'true' ? '#cbf4a8' : '#faaaaa')), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
{items.is_higher_actual == '-' ? {items.is_higher_actual == '-' ?
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography> <Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography>
: :
......
src/library/Constant.js
View file @ 7c68bef8
...@@ -9,7 +9,7 @@ const Constant = { ...@@ -9,7 +9,7 @@ const Constant = {
URL_FE_DEV: 'https://tia.eksad.com/tia-web-dev', URL_FE_DEV: 'https://tia.eksad.com/tia-web-dev',
URL_FE_DEMO: 'https://tia.eksad.com/tia-web-demo', URL_FE_DEMO: 'https://tia.eksad.com/tia-web-demo',
URL_FE_PROD: 'https://dashboard.triputra-group.com/tia-web', URL_FE_PROD: 'https://dashboard.triputra-group.com/tia-web',
DATACAT: 'datacat'
// URL_BE_MAIN : Constant.URL_BE_DEV, // URL_BE_MAIN : Constant.URL_BE_DEV,
// URL_FE_MAIN : Constant.URL_FE_DEV, // URL_FE_MAIN : Constant.URL_FE_DEV,
} }
......
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