From 18a681b6e00cfe43b691acf90a8e902453ad681b Mon Sep 17 00:00:00 2001
From: Ridwan Abadi <devaby@gmail.com>
Date: Tue, 29 Jan 2019 00:08:04 +0700
Subject: [PATCH] updates

---
 src/common/pages/Dashboard/index.js | 160 +++++++++++++++++-----------
 1 file changed, 97 insertions(+), 63 deletions(-)

diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index e9a9b2e..84b1db7 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -27,10 +27,16 @@ import {
 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 {default as MuiCardMedia} from '@material-ui/core/CardMedia';
 import {default as MuiCardActions} from '@material-ui/core/CardActions';
+import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea';
 import {default as MuiCardButton} from '@material-ui/core/Button';
 import {default as MuiGridList} from '@material-ui/core/GridList';
 import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
+import {default as MuiButton} from '@material-ui/core/Button';
+import {default as MuiDivider} from '@material-ui/core/Divider';
+import Hidden from '@material-ui/core/Hidden';
+import Chip from '@material-ui/core/Chip';
 import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import IconButton from '@material-ui/core/IconButton';
@@ -168,7 +174,7 @@ class DashboardComponent extends React.Component {
             spacing={24}
             style={{marginTop: 30}}>
 
-            <Grid item xs={12} sm={3} md={3} lg={3}>
+            <Grid item xs={10} sm={3} md={3} lg={3}>
               {this.props.appstate.wallet.data.wallet ? (
                 <MuiCard className={classes.card}>
                   <MuiCardContent>
@@ -186,7 +192,7 @@ class DashboardComponent extends React.Component {
               ) : ''}
             </Grid>
 
-            <Grid item xs={12} sm={3} md={3} lg={3}>
+            <Grid item xs={10} sm={3} md={3} lg={3}>
               {this.props.appstate.wallet.data.wallet ? (
                 <MuiCard className={classes.card}>
                   <MuiCardContent>
@@ -204,7 +210,7 @@ class DashboardComponent extends React.Component {
               ) : ''}
             </Grid>
 
-            <Grid item xs={12} sm={3} md={3} lg={3}>
+            <Grid item xs={10} sm={3} md={3} lg={3}>
               {this.props.appstate.wallet.data.wallet ? (
                 <MuiCard className={classes.card}>
                   <MuiCardContent>
@@ -225,76 +231,104 @@ class DashboardComponent extends React.Component {
 
           <Grid
             container
-            direction="row"
+            direction="column"
             justify="center"
             alignItems="center"
             spacing={24}
             style={{marginTop: 30}}>
 
-            <MuiGridList cellHeight={180} className={classes.gridList}>
-              <MuiGridListTile key="Subheader" cols={2} style={{height: 'auto'}}>
-                <ListSubheader component="div">December</ListSubheader>
-              </MuiGridListTile>
+            <Grid item xs={9} sm={9} md={9} lg={9}>
+              <Typography variant="h6" gutterBottom>
+                Voucher & Gift Card
+              </Typography>
+              <MuiGridList cellHeight={180} cols={4} className={classes.gridList} style={{
+                width: '100%',
+                height: undefined,
+              }}>
+                {(this.vouchersStore.list.length > 0) ?
+                  this.vouchersStore.list.map((item, index) => {
+                    let image = get(item, 'images.logo', '');
 
-              {(this.vouchersStore.list.length > 0) ?
-                this.vouchersStore.list.map((item, index) => {
-                  let image = get(item, 'images.logo', '');
-
-                  if (!image.includes('http')) {
-                    image = this.http.appendImagePath(image);
-                  }
-                  return (
-                    <MuiGridListTile
-                      key={index}
-                      onClick={() => this.setState({isOpened: true, data: item})}>
-                      <img src={image} alt={''}/>
-                      <MuiGridListTileBar
-                        title={item.name}
-                        subtitle={<span>by: {item.name}</span>}
-                        actionIcon={
-                          <IconButton className={classes.icon}>
-                            <InfoIcon/>
-                          </IconButton>
-                        }
-                      />
-                    </MuiGridListTile>
-                  )
-                }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
-              }
-            </MuiGridList>
+                    if (!image.includes('http')) {
+                      image = this.http.appendImagePath(image);
+                    }
+                    return (
+                        <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
+                          height: 'auto',
+                          padding: 5,
+                          // border: "1px solid #000"
+                        }}>
+                          <MuiCard className={classes.card}>
+                            <MuiCardMedia
+                              component="img"
+                              alt={item.name}
+                              className={classes.media}
+                              height="130"
+                              image={image}
+                              title={item.name}
+                            />
+                            <MuiDivider light/>
+                            <MuiCardContent>
+                              <Typography noWrap={true} variant="subtitle1">
+                                {item.name}
+                              </Typography>
+                              <Typography className={classes.pos} color="textSecondary">
+                                Ind
+                              </Typography>
+                              <Typography variant="subtitle2">
+                                From: 100 Point
+                              </Typography>
+                            </MuiCardContent>
+                            <MuiCardActions>
+                              <MuiButton
+                                fullWidth
+                                variant="outlined"
+                                color="primary"
+                                onClick={() => this.setState({isOpened: true, data: item})}
+                                size="small">
+                                Redeem
+                              </MuiButton>
+                            </MuiCardActions>
+                          </MuiCard>
+                        </MuiGridListTile>
+                    )
+                  }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
+                }
+              </MuiGridList>
+            </Grid>
 
             {/*<Grid item xs={12}>*/}
-              {/*<div className={"voucher"} style={{marginTop: 0}}>*/}
-                {/*<div className="row">*/}
-                  {/*<div className="col l12 m12 s12 padding">*/}
-                    {/*<h3>*/}
-                      {/*Voucher & Gift Card*/}
-                    {/*</h3>*/}
+            {/*<div className={"voucher"} style={{marginTop: 0}}>*/}
+            {/*<div className="row">*/}
+            {/*<div className="col l12 m12 s12 padding">*/}
+            {/*<h3>*/}
+            {/*Voucher & Gift Card*/}
+            {/*</h3>*/}
 
-                    {/*<Row gutter={10}>*/}
-                      {/*{*/}
-                        {/*(this.vouchersStore.list.length > 0) ?*/}
-                          {/*this.vouchersStore.list.map((item, index) => {*/}
-                            {/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
-                              {/*<ItemCard data={item}/>*/}
-                            {/*</Col>)*/}
-                          {/*})*/}
-                          {/*: (*/}
-                            {/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
-                          {/*)*/}
-                      {/*}*/}
-                    {/*</Row>*/}
+            {/*<Row gutter={10}>*/}
+            {/*{*/}
+            {/*(this.vouchersStore.list.length > 0) ?*/}
+            {/*this.vouchersStore.list.map((item, index) => {*/}
+            {/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
+            {/*<ItemCard data={item}/>*/}
+            {/*</Col>)*/}
+            {/*})*/}
+            {/*: (*/}
+            {/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
+            {/*)*/}
+            {/*}*/}
+            {/*</Row>*/}
 
-                    {/*<ModalVouchersComponent*/}
-                      {/*title={this.state.data.name + ' Vouchers'}*/}
-                      {/*data={this.state.data}*/}
-                      {/*isVisible={this.state.isOpened}*/}
-                      {/*onOk={() => this.setState({isOpened: false})}*/}
-                      {/*onCancel={() => this.setState({isOpened: false})}*/}
-                    {/*/>*/}
-                  {/*</div>*/}
-                {/*</div>*/}
-              {/*</div>*/}
+            {/*<ModalVouchersComponent*/}
+            {/*title={this.state.data.name + ' Vouchers'}*/}
+            {/*data={this.state.data}*/}
+            {/*isVisible={this.state.isOpened}*/}
+            {/*onOk={() => this.setState({isOpened: false})}*/}
+            {/*onCancel={() => this.setState({isOpened: false})}*/}
+            {/*/>*/}
+            {/*</div>*/}
+            {/*</div>*/}
+            {/*</div>*/}
             {/*</Grid>*/}
           </Grid>
         </Grid>