132 lines
3.3 KiB
JavaScript
132 lines
3.3 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 DC from 'decimal.js-light';
|
|
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';
|
|
|
|
const {
|
|
LineChart,
|
|
AreaChart,
|
|
BarChart,
|
|
Bar,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
ReferenceLine,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
Area,
|
|
ResponsiveContainer
|
|
} = require('recharts/umd/Recharts.min');
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class CardAgent 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;
|
|
this.transactionStore = props.appstate.transaction;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.transactionStore.getAmount();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this
|
|
.globalUI
|
|
.changeBackgroundColor("#fff");
|
|
}
|
|
|
|
getValue = (data)=> {
|
|
if(data == null){
|
|
return 0
|
|
}
|
|
else{
|
|
return data
|
|
}
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
const money = new DC(this.transactionStore.saldo.amount || 0).toFixed(2);
|
|
const uang = <NumberFormat value={money} displayType={'text'} thousandSeparator={true} prefix={'IDR '} />;
|
|
const contentStyle = {margin: '0 16px'};
|
|
|
|
|
|
return (
|
|
<div>
|
|
|
|
<div className="col s12 m4 l4 row">
|
|
<Card style={{backgroundColor: '#2196f3', minHeight: 245}} className="cardLite">
|
|
<CardHeader
|
|
style={{padding: '16px 16px 0',}}
|
|
title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Wallet</h1>}
|
|
/>
|
|
<CardTitle style={{padding: '16px 16px 8px 16px'}}
|
|
title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}>{uang}<span
|
|
className="saldo-analytic-percentage" style={{fontSize: 18}}>{/*HERE*/}</span></h1>}
|
|
subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}><span style={{fontSize:24,fontWeight:'300'}}></span></span>}/>
|
|
|
|
<CardText style={{padding: "120px 0px 20px 0px", position: 'relative'}}>
|
|
<Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>
|
|
<span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Your Balance</span>
|
|
<span style={{
|
|
position: 'absolute',
|
|
right: '16px',
|
|
fontSize: 16,
|
|
fontWeight: 400,
|
|
paddingLeft: 16,
|
|
color: "#fff"
|
|
}}>{/**/}</span>
|
|
</CardText>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|