Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Ridwan Abadi 2019-01-28 20:12:46 +07:00
parent 29acd7a33f
commit 5221815e85
2 changed files with 81 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/pages/App/style.scss
View File

@ -55,10 +55,10 @@
} }
.mainContent { .mainContent {
width: calc(100vw - 14vw); //width: calc(100vw - 14vw);
margin-left: 2.5vw; //margin-left: 2.5vw;
margin-right: 2.5vw; //margin-right: 2.5vw;
position: relative; //position: relative;
} }
@media screen and (max-width: 780px) { @media screen and (max-width: 780px) {
.mainContent { .mainContent {

148
src/common/pages/Dashboard/index.js
View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import {inject, observer} from "mobx-react"; import {inject, observer} from "mobx-react";
import withStyles from "@material-ui/core/styles/withStyles";
import QueueAnim from 'rc-queue-anim'; import QueueAnim from 'rc-queue-anim';
import "./style.scss"; import "./style.scss";
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
@ -24,6 +25,8 @@ import {
Divider, ListItem, List Divider, ListItem, List
} from 'material-ui'; } from 'material-ui';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import {default as MuiCard} from '@material-ui/core/Card'
import {default as MuiCardContent} from '@material-ui/core/CardContent';
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import * as _ from 'lodash'; import * as _ from 'lodash';
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors'; import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@ -46,6 +49,7 @@ import PopularItemCardComponent from "./PopularItemCard";
import NewItemCardComponent from "./NewItemCard"; import NewItemCardComponent from "./NewItemCard";
import '../Vouchers/style.scss'; import '../Vouchers/style.scss';
import ModalTopupComponent from "../Wallet/Modal"; import ModalTopupComponent from "../Wallet/Modal";
import {styles} from "../RegisterNew/styles";
const { const {
LineChart, LineChart,
@ -65,7 +69,7 @@ const {
@inject('appstate') @inject('appstate')
@observer @observer
export default class DashboardComponent extends React.Component { class DashboardComponent extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -104,6 +108,7 @@ export default class DashboardComponent extends React.Component {
}; };
render() { render() {
const {classes} = this.props;
const settings = { const settings = {
arrows: true, arrows: true,
infinite: true, infinite: true,
@ -114,88 +119,87 @@ export default class DashboardComponent extends React.Component {
}; };
return ( return (
<div> <div className={classes.root}>
<div className="dashboard animated fadeIn" style={{ <Grid
marginLeft: '8%', container
marginRight: '7%' direction="row"
}}> justify="center"
<div className="row "> alignItems="center"
<div className="col s12 m12 l12 col-leftDashboard" style={{marginBottom: 0}}> spacing={24}
<div className="row no-margin"> style={{marginTop: 30}}>
{this.props.appstate.wallet.data.wallet ? ( <Grid item xs={12} sm={3} md={3} lg={3}>
<div className="col s12 m4 l4" style={{marginBottom: 0}}> {this.props.appstate.wallet.data.wallet ? (
<Card className="cardLite cardDashboard"> <MuiCard className={classes.card}>
<h3 style={{ <MuiCardContent>
display: 'block', <h3 style={{
fontSize: '1rem', display: 'block',
textTransform: 'uppercase', fontSize: '1rem',
color: '#0006', textTransform: 'uppercase',
letterSpacing: 1 color: '#0006',
}}>Voucher</h3> letterSpacing: 1
<div className="value"> }}>Voucher</h3>
{/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */} <div className="value">
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
</div> <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
<div style={{marginTop: 10}}> </div>
<Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button> <div style={{marginTop: 10}}>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}> <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Add Voucher</span> <span>Add Voucher</span>
<Icon className="ml-8" type="right" /> <Icon className="ml-8" type="right" />
</a> */} </a> */}
</div>
</Card>
</div> </div>
) : ''} </MuiCardContent>
</MuiCard>
{this.props.appstate.wallet.data.wallet ? ( ) : ''}
<div className="col s12 m4 l4" style={{marginBottom: 0}}> </Grid>
<Card className="cardLite cardDashboard"> <Grid item xs={12} sm={3} md={3} lg={3}>
<h3 style={{ {this.props.appstate.wallet.data.wallet ? (
display: 'block', <MuiCard className={classes.card}>
fontSize: '1rem', <MuiCardContent>
textTransform: 'uppercase', <h3 style={{
color: '#0006', display: 'block',
letterSpacing: 1 fontSize: '1rem',
}}> Profile</h3> textTransform: 'uppercase',
<div className="value">Please complete your profile</div> color: '#0006',
<div style={{marginTop: 10}}> letterSpacing: 1
<Button type="primary" icon="edit">Edit Profile</Button> }}> Profile</h3>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}> <div className="value">Please complete your profile</div>
<div style={{marginTop: 10}}>
<Button type="primary" icon="edit">Edit Profile</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Edit Profile</span> <span>Edit Profile</span>
<Icon className="ml-8" type="right" /> <Icon className="ml-8" type="right" />
</a> */} </a> */}
</div>
</Card>
</div> </div>
) : ''} </MuiCardContent>
</MuiCard>
) : ''}
{this.props.appstate.wallet.data.wallet ? ( </Grid>
<div className="col s12 m4 l4" style={{marginBottom: 0}}> <Grid item xs={12} sm={3} md={3} lg={3}>
<Card className="cardLite cardDashboard"> {this.props.appstate.wallet.data.wallet ? (
<h3 style={{ <MuiCard className={classes.card}>
display: 'block', <MuiCardContent>
fontSize: '1rem', <h3 style={{
textTransform: 'uppercase', display: 'block',
color: '#0006', fontSize: '1rem',
letterSpacing: 1 textTransform: 'uppercase',
}}>Credit Card</h3> color: '#0006',
<div className="value ">Please add your credit card</div> letterSpacing: 1
<div style={{marginTop: 10}}> }}>Credit Card</h3>
<Button type="primary" icon="plus">Add Credit Card</Button> <div className="value ">Please add your credit card</div>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}> <div style={{marginTop: 10}}>
<Button type="primary" icon="plus">Add Credit Card</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Add Credit Car</span> <span>Add Credit Car</span>
<Icon className="ml-8" type="right" /> <Icon className="ml-8" type="right" />
</a> */} </a> */}
</div>
</Card>
</div> </div>
) : ''} </MuiCardContent>
</div> </MuiCard>
</div> ) : ''}
</div> </Grid>
</div> </Grid>
<div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}> <div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}>
<div> <div>
@ -289,3 +293,5 @@ export default class DashboardComponent extends React.Component {
); );
} }
} }
export default withStyles(styles)(DashboardComponent);