Skip to content

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

update mayan

parent 23469c2f
Show whitespace changes
Inline Side-by-side
Showing with 508 additions and 204 deletions
src/api/index.js
View file @ 10738301
...@@ -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 @ 10738301
...@@ -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 @ 10738301
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 @ 10738301
...@@ -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 @ 10738301
...@@ -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 @ 10738301
...@@ -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