Skip to content

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

update

parent 774159cd
Expand all Hide 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 {
{(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 Complete</Typography>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Completed</Typography>
</div>
</div>
}
......
src/container/Laporan/DashboardCAT.js
View file @ 7819577c
......@@ -29,7 +29,9 @@ export default class DashboardCAT extends Component {
listMonth: null,
month: null,
loading: true,
dataDashboard: []
dataDashboard: [],
selectedKPI: [],
listKPI: []
}
}
......@@ -96,8 +98,8 @@ export default class DashboardCAT extends Component {
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)
......@@ -233,8 +235,8 @@ export default class DashboardCAT extends Component {
getDasboardCAT() {
let payload = {
"company_id" : this.state.company.company_id,
"periode" : this.state.periode.periode,
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"months": this.state.month.month_id
}
let dataDashboard = []
......@@ -242,12 +244,12 @@ export default class DashboardCAT extends Component {
if (res.data.status == 'success') {
console.log(res)
// let resp = res.data.data
this.setState({dataDashboard : res.data.data}, () => {
this.setState({ dataDashboard: res.data.data }, () => {
setTimeout(() => {
this.setState({loading: false})
this.setState({ loading: false })
}, 400);
})
}
}
// else {
// this.setState({loading: false})
// }
......@@ -263,6 +265,10 @@ export default class DashboardCAT extends Component {
this.setState({ tab: newEvent })
}
setSelectedKPI(data) {
this.setState({ selectedKPI: data })
}
render() {
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
......@@ -298,14 +304,14 @@ export default class DashboardCAT extends Component {
</Snackbar>
{this.state.loading && loadingComponent}
<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 style={{padding: 20}}>
<div style={{ marginTop: 0}}>
<div style={{ padding: 20 }}>
<div style={{ marginTop: 0 }}>
<Autocomplete
{...this.state.listCompany}
id="month"
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true }, () => {
onChange={(event, newInputValue) => this.setState({ company: newInputValue, loading: true, selectedKPI: [] }, () => {
this.getDasboardCAT()
})}
disableClearable
......@@ -341,23 +347,23 @@ export default class DashboardCAT extends Component {
/>
</div>
</div>
{!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 }}>
<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="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs>
</AppBar>
{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 ?
<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>
</div>}
......
src/container/Laporan/KPIs.js
View file @ 7819577c
......@@ -91,10 +91,10 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkYTD}
onChange={() => {
this.setState({
this.setState({
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"
......@@ -108,8 +108,8 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkAB}
onChange={() => {
this.setState({ checkAB: !this.state.checkAB}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
this.setState({ checkAB: !this.state.checkAB }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
......@@ -123,8 +123,8 @@ export default class StrategiMap extends Component {
<Checkbox
checked={this.state.checkYoy}
onChange={() => {
this.setState({ checkYoy: !this.state.checkYoy}, () => {
this.setState({checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD})
this.setState({ checkYoy: !this.state.checkYoy }, () => {
this.setState({ checkAll: this.state.checkYoy && this.state.checkAB && this.state.checkYTD })
})
}}
name="checkedB"
......@@ -164,19 +164,19 @@ export default class StrategiMap extends Component {
let dataYoy = []
let option = []
if (this.state.checkYTD === true) {
option.push( {
option.push({
color: "steelblue",
points: dataYTD
})
}
if (this.state.checkAB === true) {
option.push( {
option.push({
color: "#e3e16d",
points: dataAB
})
}
if (this.state.checkYoy === true) {
option.push( {
option.push({
color: "#f27f77",
points: dataYoy
})
......@@ -223,13 +223,17 @@ export default class StrategiMap extends Component {
<div style={{ width: '10%', display: 'grid', alignContent: 'center' }}>
<Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>{item.current_value}</Typography>
</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 }}>
<Typography style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>{item.achievement}</Typography>
</div>
</div>
<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>
)
......
src/container/Laporan/StrategiMap.js
View file @ 7819577c
......@@ -20,12 +20,12 @@ export default class StrategiMap extends Component {
render() {
return (
<div style={{ padding: 20 }}>
<div style={{display: 'flex'}}>
<div style={{ display: 'flex' }}>
<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 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>
</div>
<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 {
<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 ? '#cbf4a8' : '#faaaaa') : (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)} />
<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 }}>
{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' }}>{'Last Month'}</Typography>
<Typography style={{ color: '#4b4b4b', fontSize: 10, textAlign: 'center' }}>{this.state.radioValue ? 'Last Month' : 'YOY'}</Typography>
</div>
</div>
</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