bukopin-redemption-client-r.../src/common/pages/Dashboard/CardAdmin.js
Rifqy Zacky Ariadhy 1a000700e6 Initial commit
2019-01-02 18:39:53 +07:00

136 lines
4.8 KiB
JavaScript

import React from "react";
import {inject, observer} from "mobx-react";
import QueueAnim from 'rc-queue-anim';
import "./style.scss";
import {LINKS} from './../../routes'
import {Link} from 'react-router-dom';
import * as _ from 'lodash';
import NumberFormat from 'react-number-format';
import {
Paper,
Card,
CardActions,
CardHeader,
CardMedia,
CardTitle,
CardText,
FlatButton,
GridList,
GridTile,
Divider,
Step,
Stepper,
StepLabel,
StepButton,
RaisedButton,
} from 'material-ui';
@inject('appstate')
@observer
export default class CardAdmin extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
stepIndex: 1,
stepAccount : false,
stepDeposit : false,
stepChallenge : false,
};
this.defaultState = Object.assign({}, this.state);
this.globalUI = props.appstate.globalUI;
this
.globalUI
.changeBackgroundColor("#f7f7f7");
// .changeBackgroundColor("#208166");
this.dashboardStore = props.appstate.dashboard;
this.authStore = props.appstate.auth;
this.userData = props.appstate.userData;
}
componentDidMount() {
}
componentWillUnmount() {
this
.globalUI
.changeBackgroundColor("#fff");
}
getValue = (data)=> {
if(data == null){
return 0
}
else{
return data
}
}
render() {
const contentStyle = {margin: '0 16px'};
return (
<div>
<div className="col s12 m4 l4 row">
{/*<Card style={{backgroundColor: '#2196f3', minHeight: 145}} className="cardLite">*/}
{/*<CardHeader*/}
{/*style={{padding: '16px 16px 0',}}*/}
{/*title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Total Deposit</h1>}*/}
{/*/>*/}
{/*<CardTitle style={{padding: '16px 16px 8px 16px'}}*/}
{/*title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span*/}
{/*className="saldo-analytic-percentage" style={{fontSize: 18}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}*/}
{/*subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}>Today</span>}/>*/}
{/*<CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>*/}
{/*<Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>*/}
{/*<span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Yesterday</span>*/}
{/*<span style={{*/}
{/*position: 'absolute',*/}
{/*right: '16px',*/}
{/*fontSize: 16,*/}
{/*fontWeight: 400,*/}
{/*paddingLeft: 16,*/}
{/*color: "#fff"*/}
{/*}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>*/}
{/*</CardText>*/}
{/*</Card>*/}
</div>
<div className="col s12 m4 l4">
<Card style={{minHeight: 145}} className="cardLite">
<CardHeader
style={{padding: '16px 16px 0',}}
title={<h1 style={{fontSize: 22, fontWeight: '400'}}>Total Withdraw</h1>}
/>
<CardTitle style={{padding: '16px 16px 8px 16px'}}
title={<h1 style={{fontSize: 38, fontWeight: "300"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span
className="saldo-analytic-percentage" style={{fontSize: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}
subtitle={<span style={{fontSize: 16, fontWeight: 300}}>Today</span>}/>
<CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>
<Divider style={{marginBottom: 8}}/>
<span style={{fontSize: 16, fontWeight: 300, color: 'rgba(66, 71, 112, 0.54)', paddingLeft: 16}}>Yesterday</span>
<span style={{position: 'absolute', right: '16px', fontSize: 16, fontWeight: 400, paddingLeft: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>
</CardText>
</Card>
</div>
</div>
)
}
}