Skip to content

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

update banyak

parent fdf781c9
Show whitespace changes
Inline Side-by-side
Showing with 408 additions and 46 deletions
src/api/index.js
View file @ dc0a33c0
......@@ -256,7 +256,7 @@ const create = (type = "") => {
const getReportFRMR = (body) => api.post('/transaction/summary_ratio/monthly_report/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/get_report_hierarki', body)
const getDashboardCAT = (body) => api.post('/dashboard/cat', body)
//CASH FLOW
const getDetailReportCF = (body) => api.post('/transaction/cash_flow/master_budget/get_report_hierarki', body)
......@@ -621,7 +621,8 @@ const create = (type = "") => {
getReportFRMB,
getReportFRMR,
getReportFRLastMR,
getReportBSSuma
getReportBSSuma,
getDashboardCAT
}
}
......
src/container/BudgetTahunan.js
View file @ dc0a33c0
......@@ -1458,7 +1458,7 @@ export default class BudgetTahunan extends Component {
<span>INCOMPLETE</span> :
val === "revision" ?
<span>REVISION</span> :
val === "approval_proccess" ?
val === "approval_process" ?
<span>APPROVAL PROCCESS</span> :
val === "approval_review" ?
<span>APPROVAL REVIEW</span> :
......
src/container/Laporan/DashboardCAT.js
View file @ dc0a33c0
import React, { Component } from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab, Snackbar, withStyles } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard'
import StrategiMap from './StrategiMap'
import KPIs from './KPIs'
import api from '../../api'
import { Autocomplete } from '@material-ui/lab'
import { PropagateLoader } from 'react-spinners'
import MuiAlert from '@material-ui/lab/Alert';
import Constant from '../../library/Constant'
import { titleCase } from '../../library/Utils'
import { format } from 'date-fns';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class DashboardCAT extends Component {
constructor(props) {
......@@ -10,8 +20,233 @@ export default class DashboardCAT extends Component {
this.state = {
periode: '2020',
perusahaan: 'TAP Group',
tab: 0
tab: 0,
lastPeriod: '',
listCompany: null,
company: null,
listPeriode: null,
periode: null,
listMonth: null,
month: null,
dataDashboard: []
}
}
componentDidMount() {
this.getDetailUser()
// this.getMonth()
}
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.getRole(response.data.data.role_id)
this.setState({ userCompany: response.data.data.company }, () => {
this.getCompanyActive()
})
}
}
}
})
}
getRole(id) {
api.create().getDetailRole(id).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
// this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
// // // console.log(response.data.data)
if (String(response.data.data.role_name).toLocaleLowerCase() == 'superadmin') {
this.setState({ isAdmin: true })
}
} 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' })
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
console.log(response);
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 companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let arrayBaru = []
this.state.userCompany.map((item, index) => {
let indexID = companyData.findIndex((val) => val.company_id == item)
if (indexID !== -1) {
arrayBaru.push(companyData[indexID])
}
})
let defaultProps = {
options: arrayBaru,
getOptionLabel: (option) => titleCase(option.company_name),
};
let index = arrayBaru.findIndex((val) => val.company_id == comID)
this.setState({ listCompany: defaultProps, company: arrayBaru.length < 1 ? companyData[0] : (index == -1 ? arrayBaru[0] : arrayBaru[index]) }, () => {
this.getLastPeriod()
})
} 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.problem, tipeAlert: 'error', listCompany: null, company: null })
}
})
}
getLastPeriod() {
console.log(this.state.company)
api.create().getLastPeriod(this.state.company.company_id).then(response => {
console.log(response);
if (response.data.status === "success") {
this.setState({ lastPeriod: response.data.data.last_periode, latestPeriode: response.data.data.latest_periode }, () => {
console.log(this.state.lastPeriod)
this.getPeriode()
})
}
})
}
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
// let dateNow = new Date
console.log(response)
// let year = this.state.rawData ? this.state.rawData.periode : format(dateNow, 'yyyy')
let currentYear = new Date().getFullYear()
// // // console.log(currentYear)
if (response.data) {
if (response.data.status === "success") {
let data = []
console.log(response.data.data)
console.log(this.state.lastPeriod)
response.data.data.map((item) => {
if (this.state.isApprover) {
if (item >= 2000 && item <= (Number(currentYear) + 1)) {
data.push(item)
}
} else {
if ((Number(item) >= 2000) && (Number(item) == this.state.lastPeriod || Number(item) < this.state.lastPeriod)) {
data.push(item)
}
}
})
let periodeData = data.map((item) => {
return {
periode: item,
}
})
let defaultProps = {
options: periodeData,
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)
// // console.log(this.props.location.state.rawData)
// console.log(this.state.lastPeriod)
console.log(data)
console.log(periodeData)
console.log(defaultProps)
// // // console.log(index)
this.setState({ listPeriode: defaultProps, periode: index === -1 ? periodeData[0] : periodeData[index] }, () => {
this.getMonth()
})
}
}
})
}
getMonth() {
api.create().getMonthTransaction().then(response => {
let dateNow = new Date
let month = format(dateNow, 'MMMM')
console.log(response);
if (response.data) {
if (response.data.status === "success") {
console.log(response);
let data = response.data.data
let monthData = data.map((item) => {
return {
month_id: item.id,
month_value: String(item.month_name).substr(0, 3)
}
})
let defaultProps = {
options: monthData,
getOptionLabel: (option) => option.month_value,
};
let index = data.findIndex((val) => val.month_name == month)
// console.log(index);
this.setState({ listMonth: defaultProps, month: index == -1 ? monthData[0] : monthData[index] }, () => {
this.getDasboardCAT()
})
} 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' })
}
})
}
getDasboardCAT() {
let payload = {
"company_id" : this.state.company.company_id,
"year" : this.state.periode.periode
}
api.create().getDashboardCAT(payload).then((res) => {
if (res.data.status == 'success') {
console.log(res)
this.setState({loading: false, dataDashboard: res.data.data})
} else {
this.setState({loading: false})
}
// conole.log(JSON.stringify(payload))
})
}
closeAlert() {
this.setState({ alert: false })
}
selectTab = (event, newEvent) => {
......@@ -33,46 +268,72 @@ export default class DashboardCAT extends Component {
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<PropagateLoader
// css={override}
size={20}
color={"#274B80"}
loading={this.state.loading}
/>
</div>
);
return (
<div className='a-s-p-mid no-header'>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
{this.state.loading && loadingComponent}
<div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div>
<div className="padding-20px" style={{ minWidth: 'max-content'}}>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="perusahaan"
select
label="Perusahaan"
value={this.state.perusahaan}
onChange={(e) => this.setState({ perusahaan: e.target.value })}
>
{perusahaan.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<div style={{padding: 20}}>
<div style={{ marginTop: 0}}>
<Autocomplete
{...this.state.listCompany}
id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
this.getDasboardCAT()
})}
disableClearable
style={{ maxWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="periode"
select
label="Periode"
<Autocomplete
{...this.state.listPeriode}
id="month"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue, loading: true }, () => {
this.getDasboardCAT()
})}
disableClearable
style={{ maxWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periode}
onChange={(e) => this.setState({ periode: e.target.value })}
>
{periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
/>
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
{...this.state.listMonth}
id="month"
onChange={(event, newInputValue) => this.setState({ month: newInputValue, loading: true }, () => {
this.getDasboardCAT()
})}
disableClearable
style={{ maxWidth: 250, marginRight: 20 }}
renderInput={(params) => <TextField {...params} label="Month" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.month}
/>
</div>
</div>
<Paper style={{ marginTop: 20, }}>
{!this.state.loading && this.state.dataDashboard.length > 0 && <div className="padding-20px" style={{ display: 'flex' }}>
<Paper style={{ marginTop: 10, }}>
<AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent',borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
<Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
......@@ -81,15 +342,15 @@ export default class DashboardCAT extends Component {
</Tabs>
</AppBar>
{this.state.tab === 0 ?
<ExceutiveScoreboard height={this.props.height} />
<ExceutiveScoreboard height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/>
:
this.state.tab === 1 ?
<StrategiMap height={this.props.height} />
<StrategiMap height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/>
:
<KPIs height={this.props.height} />
<KPIs height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/>
}
</Paper>
</div>
</div>}
</div>
)
}
......
src/container/Laporan/ExceutiveScoreboard.js
View file @ dc0a33c0
import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import { Paper, Typography } from '@material-ui/core'
import { GridList, Paper, Typography, GridListTile } from '@material-ui/core'
import Images from '../../assets/Images'
import LineChart from 'react-linechart';
......@@ -15,11 +15,83 @@ export default class ExceutiveScoreboard extends Component {
{ judul: "Internal Perspective", kpi: 5, rank: 'C', value: 2.61, status: 'down' },
{ judul: "Financial", kpi: 5, rank: 'B+', value: 3.52, status: 'up' },
],
data: this.props.data,
dataPayload: this.props.dataPayload,
selectIndex: null
}
}
componentDidMount() {
console.log(this.props.data)
console.log(this.state.dataPayload)
let arrOverAll = []
let totalOverAll = 0
if (this.state.data.length > 0) {
this.state.data.map((item,index) => {
if(item.parent == null || item.parent == 'null') {
arrOverAll.push(item)
} else {
totalOverAll +=
this.state.dataPayload.month.month_id == 1? Number(item.month1 == null? 0 : item.month1) :
this.state.dataPayload.month.month_id == 2? Number(item.month2 == null? 0 : item.month2) :
this.state.dataPayload.month.month_id == 3? Number(item.month3 == null? 0 : item.month3) :
this.state.dataPayload.month.month_id == 4? Number(item.month4 == null? 0 : item.month4) :
this.state.dataPayload.month.month_id == 5? Number(item.month5 == null? 0 : item.month5) :
this.state.dataPayload.month.month_id == 6? Number(item.month6 == null? 0 : item.month6) :
this.state.dataPayload.month.month_id == 7? Number(item.month7 == null? 0 : item.month7) :
this.state.dataPayload.month.month_id == 8? Number(item.month8 == null? 0 : item.month8) :
this.state.dataPayload.month.month_id == 9? Number(item.month9 == null? 0 : item.month9) :
this.state.dataPayload.month.month_id == 10? Number(item.month10 == null? 0 : item.month10) :
this.state.dataPayload.month.month_id == 11? Number(item.month11 == null? 0 : item.month11) :
Number(item.month12 == null? 0 : item.month12)
}
})
let indexFinancial = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('financial'))
let indexCust = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('customer'))
let indexInternal = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('internal'))
let indexLearn = arrOverAll.findIndex((val) => String(val.item_name).toLocaleLowerCase().includes('learn'))
let arrFinancial = []
let arrCust = []
let arrInternal = []
let arrLearn = []
console.log(indexFinancial)
console.log(indexCust)
console.log(indexInternal)
console.log(indexLearn)
if (indexFinancial != -1) {
arrFinancial = this.state.data.filter((val) => val.parent == arrOverAll[indexFinancial].item_report_id)
}
if (indexCust != -1) {
arrCust = this.state.data.filter((val) => val.parent == arrOverAll[indexCust].item_report_id)
}
if (indexInternal != -1) {
arrInternal = this.state.data.filter((val) => val.parent == arrOverAll[indexInternal].item_report_id)
}
if (indexLearn != -1) {
arrLearn = this.state.data.filter((val) => val.parent == arrOverAll[indexLearn].item_report_id)
}
console.log(totalOverAll)
console.log(arrOverAll)
console.log(arrFinancial)
console.log(arrCust)
console.log(arrInternal)
console.log(arrLearn)
}
}
render() {
let { selectIndex } = this.state
let yuk = [1,2,3]
const data = [
{
color: "steelblue",
......@@ -39,7 +111,7 @@ export default class ExceutiveScoreboard extends Component {
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
{this.state.listDummy.map((item, index) => {
return (
<div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }} onClick={() => this.setState({ selectIndex: index })}>
<div style={{ padding: 10, backgroundColor: this.state.selectIndex === index ? '#6885a6' : '#fff', borderRadius: 6, paddingBottom: 20, margin: 10, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }} onClick={() => this.setState({ selectIndex: index }, () => console.log(this.state.data))}>
<span style={{ fontSize: '17px', color: this.state.selectIndex === index ? '#fff' : '#7e8085' }}>{item.judul}</span>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: index === 0 ? 54 : 30, placeContent: 'center' }}>
<div>
......@@ -78,7 +150,11 @@ export default class ExceutiveScoreboard extends Component {
)
})}
</div>
<div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
<div style={{padding: 10, marginTop: 10, display: 'flex', width: '100%' }}>
<GridList cellHeight={250} cols={3}>
{yuk.map((tile) => (
<GridListTile key={tile} cols={1} style={{}}>
<div style={{ maxWidth: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, marginLeft: 5, marginTop: 5, marginRight: 5, display: 'inline-grid'}}>
<div>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
......@@ -96,6 +172,29 @@ export default class ExceutiveScoreboard extends Component {
hideYLabel={true}
/>
</div>
</GridListTile>
))}
</GridList>
</div>
{/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
<div>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
<Typography style={{ fontSize: 16, fontWeight: 'bold' }}>In IDR mn</Typography>
</div>
<LineChart
width={400}
height={50}
data={data}
yMin={0}
yMax={10}
hideXAxis={true}
hideYAxis={true}
hideXLabel={true}
hideYLabel={true}
/>
</div> */}
</div>
)
}
......
src/container/MonthlyReport.js
View file @ dc0a33c0
......@@ -692,6 +692,7 @@ export default class MonthlyReport extends Component {
saveToMonthlyReport(type) {
this.setState({
visibleMonthlyReport: true,
loading: true,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
......@@ -1428,7 +1429,7 @@ export default class MonthlyReport extends Component {
<span>INCOMPLETE</span> :
val === "revision" ?
<span>REVISION</span> :
val === "approval_proccess" ?
val === "approval_process" ?
<span>APPROVAL PROCCESS</span> :
val === "approval_review" ?
<span>APPROVAL REVIEW</span> :
......
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