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
Hide 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 = "") => {
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 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 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)
......
src/container/Home.js
View file @ 7c68bef8
......@@ -227,7 +227,7 @@ export default function MiniDrawer() {
}, {
img: 'beranda',
label: 'CAT Dashboard',
path: 'dashboard-cat',
path: 'cat-dashboard',
}
],
collapse: false,
......
src/container/HomePage.js
View file @ 7c68bef8
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 Images from '../assets/Images';
import DonutChart from 'react-d3-donut';
......@@ -10,6 +10,7 @@ import { PropagateLoader } from 'react-spinners';
import { titleCase } from '../library/Utils';
import { format } from 'date-fns';
import Autocomplete from '@material-ui/lab/Autocomplete';
import ReactSpeedometer from 'react-d3-speedometer';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
......@@ -38,9 +39,13 @@ class HomePage extends Component {
periodeMB: null,
periodeMR: null,
month: null,
monthCAT: null,
periodeCAT: null,
loading: false,
accessMB: false,
accessMR: false,
company: [],
dataDashboardCAT: []
}
}
......@@ -83,11 +88,11 @@ class HomePage extends Component {
let currentYear = new Date().getFullYear()
let MB = []
let MR = []
for(var i=2000;i<=currentYear; i++) {
MB.push({name: String(i), value: i})
MR.push({name: String(i), value: i})
for (var i = 2000; i <= currentYear; i++) {
MB.push({ name: String(i), value: i })
MR.push({ name: String(i), value: i })
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 {
let yearNow = dateNow.getFullYear()
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.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 {
let index = data.findIndex((val) => val.month_name == month)
// console.log(month)
// 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.submittedOnly) {
// console.log('masuk cuk')
......@@ -145,8 +174,8 @@ class HomePage extends Component {
// }
this.getPeriode()
// } else {
// this.getLastPeriod()
// this.getPeriode()
// this.getLastPeriod()
// this.getPeriode()
// }
})
} else {
......@@ -165,8 +194,6 @@ class HomePage extends Component {
})
}
getPermissionMB() {
let payload = {
menu: "Master Budget & CAT"
......@@ -179,8 +206,8 @@ class HomePage extends Component {
btnCreateMB: response.data.data.create,
btnEditMB: response.data.data.edit,
load: true
},() => {
if (this.state.btnCreateMB === true && this.state.btnEditMB === true){
}, () => {
if (this.state.btnCreateMB === true && this.state.btnEditMB === true) {
this.setState({ accessMB: true })
}
})
......@@ -207,8 +234,8 @@ class HomePage extends Component {
btnCreateMR: response.data.data.create,
btnEditMR: response.data.data.edit,
load: true
},() => {
if (this.state.btnCreateMR === true && this.state.btnEditMR === true){
}, () => {
if (this.state.btnCreateMR === true && this.state.btnEditMR === true) {
this.setState({ accessMR: true })
}
})
......@@ -222,7 +249,35 @@ 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() {
// console.log(this.state.month.month_id)
// console.log(this.state.periodeMR.value)
......@@ -237,7 +292,7 @@ class HomePage extends Component {
valueSubmit += 1
}
dataMB.push(item)
})
this.setState({
listSubcoMB: dataMB,
......@@ -246,7 +301,7 @@ class HomePage extends Component {
})
}
} else {
this.setState({loading: false})
this.setState({ loading: false })
}
})
}
......@@ -261,7 +316,7 @@ class HomePage extends Component {
if (response.data) {
if (response.data.status === "success") {
response.data.data.map((item, index) => {
if (item.is_submit === true ) {
if (item.is_submit === true) {
valueSubmitMR += 1
}
dataMR.push(item)
......@@ -273,7 +328,7 @@ class HomePage extends Component {
})
}
} else {
this.setState({loading: false})
this.setState({ loading: false })
}
})
}
......@@ -294,7 +349,7 @@ class HomePage extends Component {
valueSubmitMR += 1
}
if ( item.type === "master_budget" ) {
if (item.type === "master_budget") {
dataMB.push(item)
} else {
dataMR.push(item)
......@@ -322,22 +377,22 @@ class HomePage extends Component {
if (String(response.data.status).toLocaleLowerCase() == 'success') {
let data = response.data.data
data.map((item, index) => {
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 (String(item.type_report).toLocaleLowerCase().includes("master")){
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 (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])
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])
rawData.push(item)
}
} 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])
rawData.push(item)
}
} 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])
rawData.push(item)
}
......@@ -349,7 +404,7 @@ class HomePage extends Component {
}
getApprMat() {
this.setState({loading: true})
this.setState({ loading: true })
let isApproverMR = false
let isApproverMB = false
api.create().getAM().then((response) => {
......@@ -365,9 +420,9 @@ class HomePage extends Component {
// console.log(userId);
let indexId = actAMActive.findIndex((val) => val.user_id == userId)
actAMActive.map((item, index) => {
if (item.approval_type_name === "MONTHLY_REPORT"){
if (item.approval_type_name === "MONTHLY_REPORT") {
isApproverMR = true
} else if (item.approval_type_name === "MASTER_BUDGET"){
} else if (item.approval_type_name === "MASTER_BUDGET") {
isApproverMB = true
}
})
......@@ -377,12 +432,12 @@ class HomePage extends Component {
this.getMonth()
// this.getListUserSubco()
}
this.setState({ isApproverMB, isApproverMR})
this.setState({ isApproverMB, isApproverMR })
this.getDashboardMB()
// this.getDashboardMB()
this.getDashboard()
// console.log(actAM)
this.setState({loading: false})
this.setState({ loading: false })
})
}
......@@ -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() {
const getDataMonth = (item) => {
let months = item.months
......@@ -412,44 +487,44 @@ class HomePage extends Component {
return dataMonth[indexID]
}
const columns = ["#", "ID", "Company", "Report Type", "Revision",
{
name: "",
options: {
display: false
}
}, 'Status', {
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<Link to={{
pathname: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? `/home/master-budget/` : `/home/monthly-report/`,
state: {
userType: 'approver',
rawData: this.state.rawData[tableMeta.rowIndex],
month: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? null : getDataMonth(this.state.rawData[tableMeta.rowIndex])
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 10
}}
onClick={() => null}
>
<img src={Images.editCopy2} />
</button>
</Link>
</div >
);
const columns = ["#", "ID", "Company", "Report Type", "Revision",
{
name: "",
options: {
display: false
}
}
}]
}, 'Status', {
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<Link to={{
pathname: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? `/home/master-budget/` : `/home/monthly-report/`,
state: {
userType: 'approver',
rawData: this.state.rawData[tableMeta.rowIndex],
month: String(tableMeta.rowData[3]).toLocaleLowerCase().includes("master") ? null : getDataMonth(this.state.rawData[tableMeta.rowIndex])
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginRight: 10
}}
onClick={() => null}
>
<img src={Images.editCopy2} />
</button>
</Link>
</div >
);
}
}
}]
const data = [
["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
......@@ -519,6 +594,107 @@ class HomePage extends Component {
<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 (
<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={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography>
......@@ -684,7 +860,116 @@ class HomePage extends Component {
<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>
</div>
{(this.state.accessMB || this.state.accessMR) &&
<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) &&
<div style={{ flex: 1, paddingLeft: 20, paddingRight: 20, paddingTop: 20, paddingBottom: 0, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
......@@ -700,138 +985,138 @@ class HomePage extends Component {
}
<div style={{ display: 'inline-flex' }}>
{this.state.accessMB &&
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listPeriodeMB}
id="periodeMB"
onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listPeriodeMB}
id="periodeMB"
onChange={(event, newInputValue) => this.setState({ periodeMB: newInputValue, loading: true }, () => {
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }\
this.getListUserSubcoMB()
// }\
this.getListUserSubcoMB()
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode MB" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeMB}
/>
</div>
<Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`}</Typography>
{this.state.listSubcoMB.map((item, index) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
<div style={{ display: 'flex' }}>
<img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
<Link to={{
pathname: `/home/master-budget/`,
state: {
userType: 'user',
rawData: item
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}>
<Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
</button>
</Link>
</div>
{item.is_overdue && (
<div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
<Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
</div>
)}
</div>
)
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode MB" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeMB}
/>
</Paper>
</div>
<Paper style={{ width: 450, padding: 20, borderRadius: 10, marginTop: 5 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`}</Typography>
{this.state.listSubcoMB.map((item, index) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
<div style={{ display: 'flex' }}>
<img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
<Link to={{
pathname: `/home/master-budget/`,
state: {
userType: 'user',
rawData: item
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}>
<Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
</button>
</Link>
</div>
{item.is_overdue && (
<div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
<Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
</div>
)}
</div>
)
})}
</Paper>
</div>
}
{this.state.accessMR &&
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getListUserSubcoMR()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getListUserSubcoMR()
// 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" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>
<Autocomplete
{...this.state.listPeriodeMR}
id="periodeMR"
onChange={(event, newInputValue) => this.setState({ periodeMR: newInputValue, loading: true }, () => {
this.getListUserSubcoMR()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// }
})}
disableClearable
style={{ minWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>
<Autocomplete
{...this.state.listPeriodeMR}
id="periodeMR"
onChange={(event, newInputValue) => this.setState({ periodeMR: newInputValue, loading: true }, () => {
this.getListUserSubcoMR()
// if (this.state.isApprover === true) {
// this.getCompanySubmitted()
// } else {
// this.setState({ visibleTableHistory: false })
// this.getRevision()
// }
// }
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode MR" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeMR}
/>
</div>
<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>
{this.state.listSubcoMR.map((item, index) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
<div style={{ display: 'flex' }}>
<img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
<Link to={{
pathname: `/home/monthly-report/`,
state: {
userType: 'user',
rawData: item,
month: this.state.month
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}>
<Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
</button>
</Link>
</div>
{item.is_overdue && (
<div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
<Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
</div>
)}
</div>
)
})}
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode MR" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periodeMR}
/>
</Paper>
</div>
<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>
{this.state.listSubcoMR.map((item, index) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
<div style={{ display: 'flex' }}>
<img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
<Link to={{
pathname: `/home/monthly-report/`,
state: {
userType: 'user',
rawData: item,
month: this.state.month
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}>
<Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
</button>
</Link>
</div>
{item.is_overdue && (
<div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
<Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
</div>
)}
</div>
)
})}
</Paper>
</div>
}
</div>
</div>
......
src/container/Laporan/DashboardCAT.js
View file @ 7c68bef8
......@@ -36,12 +36,22 @@ export default class DashboardCAT extends Component {
}
componentDidMount() {
this.getDetailUser()
console.log(this.props);
// this.getMonth()
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()
}
}
getDetailUser() {
console.log(this.state.rawData)
let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => {
if (response.data) {
......@@ -92,7 +102,7 @@ export default class DashboardCAT extends Component {
if (response.data) {
if (response.data.status === 'success') {
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) => {
return {
company_id: item.company_id,
......@@ -157,6 +167,7 @@ export default class DashboardCAT extends Component {
let data = []
console.log(response.data.data)
console.log(this.state.lastPeriod)
let periodeID = this.state.rawData ? this.state.rawData.periode : 0
response.data.data.map((item) => {
if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
......@@ -174,17 +185,17 @@ export default class DashboardCAT extends Component {
}
})
let defaultProps = {
options: periodeData,
options: periodeData.sort((a, b) => a.periode - b.periode),
getOptionLabel: (option) => option.periode,
};
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.state.lastPeriod)
console.log(data)
console.log(periodeData)
console.log(defaultProps)
// // // console.log(index)
console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
this.getMonth()
})
......@@ -202,6 +213,7 @@ export default class DashboardCAT extends Component {
if (response.data.status === "success") {
console.log(response);
let data = response.data.data
let monthID = this.state.rawData ? this.state.rawData.month : 0
let monthData = data.map((item) => {
return {
month_id: item.id,
......@@ -212,8 +224,9 @@ export default class DashboardCAT extends Component {
options: monthData,
getOptionLabel: (option) => option.month_value,
};
let index = data.findIndex((val) => val.month_name == month)
// console.log(index);
let index = data.findIndex((val) => monthID == 0? val.month_name == month : val.id == monthID)
console.log(index);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
this.getDasboardCAT()
})
......@@ -266,7 +279,13 @@ export default class DashboardCAT extends Component {
}
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() {
......
src/container/Laporan/StrategiMap.js
View file @ 7c68bef8
......@@ -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 }}>
<Typography style={{ color: '#fff', fontSize: 12, textAlign: 'center' }}>{items.item_name}</Typography>
</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 == '-' ?
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography>
:
......
src/library/Constant.js
View file @ 7c68bef8
......@@ -9,7 +9,7 @@ const Constant = {
URL_FE_DEV: 'https://tia.eksad.com/tia-web-dev',
URL_FE_DEMO: 'https://tia.eksad.com/tia-web-demo',
URL_FE_PROD: 'https://dashboard.triputra-group.com/tia-web',
DATACAT: 'datacat'
// URL_BE_MAIN : Constant.URL_BE_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