Skip to content

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

update

parent 774159cd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 127 additions and 55 deletions
src/container/HomePage.js
View file @ 7819577c
...@@ -687,7 +687,7 @@ class HomePage extends Component { ...@@ -687,7 +687,7 @@ class HomePage extends Component {
{(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' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
</div> </div>
</div> </div>
} }
......
src/container/Laporan/DashboardCAT.js
View file @ 7819577c
...@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component { ...@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component {
listMonth: null, listMonth: null,
month: null, month: null,
loading: true, loading: true,
dataDashboard: [] dataDashboard: [],
selectedKPI: [],
listKPI: []
} }
} }
...@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component { ...@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component {
getDasboardCAT() { getDasboardCAT() {
let payload = { let payload = {
"company_id" : this.state.company.company_id, "company_id": this.state.company.company_id,
"periode" : this.state.periode.periode, "periode": this.state.periode.periode,
"months": this.state.month.month_id "months": this.state.month.month_id
} }
let dataDashboard = [] let dataDashboard = []
...@@ -242,9 +244,9 @@ export default class DashboardCAT extends Component { ...@@ -242,9 +244,9 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') { if (res.data.status == 'success') {
console.log(res) console.log(res)
// let resp = res.data.data // let resp = res.data.data
this.setState({dataDashboard : res.data.data}, () => { this.setState({ dataDashboard: res.data.data }, () => {
setTimeout(() => { setTimeout(() => {
this.setState({loading: false}) this.setState({ loading: false })
}, 400); }, 400);
}) })
} }
...@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component { ...@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component {
this.setState({ tab: newEvent }) this.setState({ tab: newEvent })
} }
setSelectedKPI(data) {
this.setState({ selectedKPI: data })
}
render() { render() {
const perusahaan = [ const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' }, { value: 'TAP Group', label: 'TAP Group' },
...@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component { ...@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component {
</Snackbar> </Snackbar>
{this.state.loading && loadingComponent} {this.state.loading && loadingComponent}
<div className={"main-color"} style={{ padding: 27 }}> <div className={"main-color"} style={{ padding: 27 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography> <Typography style={{ fontSize: '16px', color: 'white' }}>Dashboard CAT Report</Typography>
</div> </div>
<div style={{padding: 20}}> <div style={{ padding: 20 }}>
<div style={{ marginTop: 0}}> <div style={{ marginTop: 0 }}>
<Autocomplete <Autocomplete
{...this.state.listCompany} {...this.state.listCompany}
id="month" id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => { onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, selectedKPI: [] }, () => {
this.getDasboardCAT() this.getDasboardCAT()
})} })}
disableClearable disableClearable
...@@ -343,21 +349,21 @@ export default class DashboardCAT extends Component { ...@@ -343,21 +349,21 @@ export default class DashboardCAT extends Component {
</div> </div>
{!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}> {!this.state.loading && <div className="padding-20px" style={{ display: 'flex' }}>
<Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100}}> <Paper style={{ marginTop: 10, minWidth: this.props.open ? this.props.width - 360 : this.props.width - 100 }}>
<AppBar position="static" style={{ borderTopRightRadius: 10, borderTopLeftRadius: 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 }}> <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 }} /> <Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} /> <Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs> </Tabs>
</AppBar> </AppBar>
{this.state.tab === 0 ? {this.state.tab === 0 ?
<ExceutiveScoreboard height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/> <ExceutiveScoreboard selectedKPI={this.state.selectedKPI} setSelectedKPI={this.setSelectedKPI.bind(this)} 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 ? this.state.tab === 1 ?
<StrategiMap height={this.props.height} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}}/> <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} width={this.props.open ? this.props.width - 360 : this.props.width - 100} data={this.state.dataDashboard} dataPayload={{month: this.state.month, periode: this.state.periode, company: this.state.company}} /> <KPIs height={this.props.height} width={this.props.open ? this.props.width - 360 : this.props.width - 100} data={this.state.dataDashboard} dataPayload={{ month: this.state.month, periode: this.state.periode, company: this.state.company }} />
} }
</Paper> </Paper>
</div>} </div>}
......
src/container/Laporan/KPIs.js
View file @ 7819577c
...@@ -94,7 +94,7 @@ export default class StrategiMap extends Component { ...@@ -94,7 +94,7 @@ export default class StrategiMap extends Component {
this.setState({ this.setState({
checkYTD: !this.state.checkYTD checkYTD: !this.state.checkYTD
}, () => { }, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -108,8 +108,8 @@ export default class StrategiMap extends Component { ...@@ -108,8 +108,8 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkAB} checked={this.state.checkAB}
onChange={() => { onChange={() => {
this.setState({ checkAB: !this.state.checkAB}, () => { this.setState({ checkAB: !this.state.checkAB }, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -123,8 +123,8 @@ export default class StrategiMap extends Component { ...@@ -123,8 +123,8 @@ export default class StrategiMap extends Component {
<Checkbox <Checkbox
checked={this.state.checkYoy} checked={this.state.checkYoy}
onChange={() => { onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy}, () => { this.setState({ checkYoy: !this.state.checkYoy }, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD}) this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
}) })
}} }}
name="checkedB" name="checkedB"
...@@ -164,19 +164,19 @@ export default class StrategiMap extends Component { ...@@ -164,19 +164,19 @@ export default class StrategiMap extends Component {
let dataYoy = [] let dataYoy = []
let option = [] let option = []
if (this.state.checkYTD === true) { if (this.state.checkYTD === true) {
option.push( { option.push({
color: "steelblue", color: "steelblue",
points: dataYTD points: dataYTD
}) })
} }
if (this.state.checkAB === true) { if (this.state.checkAB === true) {
option.push( { option.push({
color: "#e3e16d", color: "#e3e16d",
points: dataAB points: dataAB
}) })
} }
if (this.state.checkYoy === true) { if (this.state.checkYoy === true) {
option.push( { option.push({
color: "#f27f77", color: "#f27f77",
points: dataYoy points: dataYoy
}) })
...@@ -223,13 +223,17 @@ export default class StrategiMap extends Component { ...@@ -223,13 +223,17 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography> <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</div> </div>
<div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems:'center' }}> <div style={{ width: '10%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: item.achievement < -10 ? '#333333' : item.achievement < 0 ? '#333333' : '#333333', height: 70, width: 105, marginRight: 20 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography> <Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div> </div>
</div> </div>
<div style={{ width: '5%', display: 'grid', alignContent: 'center' }}> <div style={{ width: '5%', display: 'grid', alignContent: 'center' }}>
<img src={item.is_higher === false ? Images.down : Images.up} /> {item.is_higher == '-' ?
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>-</Typography>
:
<img src={item.is_higher == false ? Images.down : Images.up} />
}
</div> </div>
</div> </div>
) )
......
src/container/Laporan/StrategiMap.js
View file @ 7819577c
...@@ -20,12 +20,12 @@ export default class StrategiMap extends Component { ...@@ -20,12 +20,12 @@ export default class StrategiMap extends Component {
render() { render() {
return ( return (
<div style={{ padding: 20 }}> <div style={{ padding: 20 }}>
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({radioValue: true})}/>} label="Actual vs Prev. Month" /> <FormControlLabel value="end" control={<Radio color="primary" checked={this.state.radioValue} onClick={() => this.setState({ radioValue: true })} />} label="Actual vs Prev. Month" />
</FormControl> </FormControl>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({radioValue: false})} />} label="YOY" /> <FormControlLabel value="end" control={<Radio color="primary" checked={!this.state.radioValue} onClick={() => this.setState({ radioValue: false })} />} label="YOY" />
</FormControl> </FormControl>
</div> </div>
<Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}> <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)', width: '100%' }}>
...@@ -59,10 +59,14 @@ export default class StrategiMap extends Component { ...@@ -59,10 +59,14 @@ 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 ? '#cbf4a8' : '#faaaaa') : (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 == '-' ? 'white' : (items.is_higher_yoy ? '#cbf4a8' : '#faaaaa')), width: 68, borderTopRightRadius: 6, borderBottomRightRadius: 6, textAlign: 'center', paddingTop: 10, paddingBottom: 10 }}>
<img src={this.state.radioValue? (items.is_higher_actual ? Images.up : Images.down) : (items.is_higher_yoy ? Images.up : Images.down)} /> {items.is_higher_actual == '-' ?
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'-'}</Typography>
:
<img src={this.state.radioValue ? (items.is_higher_actual == 'true' ? Images.up : Images.down) : (items.is_higher_yoy == 'true' ? Images.up : Images.down)} />
}
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography> <Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'vs'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{'Last Month'}</Typography> <Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{this.state.radioValue ? 'Last Month' : 'YOY'}</Typography>
</div> </div>
</div> </div>
</GridListTile> </GridListTile>
......
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