diff --git a/src/common/pages/App/WalletComponent.js b/src/common/pages/App/WalletComponent.js
new file mode 100644
index 0000000..9140b1d
--- /dev/null
+++ b/src/common/pages/App/WalletComponent.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {Route as RouteDOM} from "react-router-dom";
+import {LINKS} from "../../routes";
+import NumberFormat from "react-number-format";
+
+@inject('appstate')
+@observer
+export default class WalletComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    return (<div className={'containerWalletBar'}>
+      <span style={{display: 'none'}}>{this.props.appstate.wallet.data.wallet}</span>
+      <div className={'containerVoucher'}>
+        <p className={'titleVoucher'}>Voucher</p>
+        <RouteDOM render={({ history}) => (
+          <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
+            <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+          </p>
+        )} />
+      </div>
+      <div className={'containerPoints'}>
+        <p className={'titlePoints'}>Points</p>
+        <RouteDOM render={({ history}) => (
+          <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
+            <NumberFormat value={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
+          </p>
+        )} />
+      </div>
+    </div>);
+  }
+}
diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index 5170c46..b15a956 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -44,6 +44,7 @@ import EmptyComponent from '../EmptyComponent';
 import NumberFormat from 'react-number-format';
 import faker from 'faker';
 import { Route as RouteDOM } from 'react-router-dom'
+import WalletComponent from "./WalletComponent";
 
 faker.locale = 'id_ID';
 @inject("appstate")
@@ -442,24 +443,7 @@ export default class App extends React.Component {
 
               </ToolbarGroup>
               <ToolbarGroup>
-                <div className={'containerWalletBar'}>
-                  <div className={'containerVoucher'}>
-                    <p className={'titleVoucher'}>Voucher</p>
-                    <RouteDOM render={({ history}) => (
-                      <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
-                        <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                      </p>
-                    )} />
-                  </div>
-                  <div className={'containerPoints'}>
-                    <p className={'titlePoints'}>Points</p>
-                    <RouteDOM render={({ history}) => (
-                      <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
-                        <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
-                      </p>
-                    )} />
-                  </div>
-                </div>
+                <WalletComponent/>
 
                 {window.location.pathname.split("/")[2] == "shop" ? (
                   <IconMenu
@@ -512,7 +496,7 @@ export default class App extends React.Component {
                   </List>
                 </IconMenu>
                 ) : (<div/>)}
-                
+
 
                 <IconMenu
                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
diff --git a/src/common/pages/Transaction/ItemList/index.js b/src/common/pages/Transaction/ItemList/index.js
index a335c29..21b96fd 100644
--- a/src/common/pages/Transaction/ItemList/index.js
+++ b/src/common/pages/Transaction/ItemList/index.js
@@ -4,6 +4,7 @@ import {inject, observer} from "mobx-react";
 import faker from "faker";
 
 import './style.scss';
+import moment from "moment";
 
 @inject("appstate")
 @observer
@@ -17,13 +18,16 @@ export default class ItemList extends React.Component {
     const {
       data = {
         transaction_id: '',
+        transaction: {},
+        item: {},
+        item_sku: {},
         created_at: '',
         updated_at: '',
         deleted_at: '',
         name: '',
         status: '',
         price: '',
-        voucher_code: ``,
+        voucher_code: `-`,
       }
     } = this.props;
 
@@ -32,24 +36,24 @@ export default class ItemList extends React.Component {
         <div className={'veryParentContainer'}>
           <div className={'parentContainerLeft'}>
             <div className={'headerContainer'}>
-              <p className={'transactionCode'}>{data.transaction_id}</p>
-              <p className={'transactionDate'}>{data.updated_at}</p>
+              <p className={'transactionCode'}>{`INV/20190101/VII/X/${data.transaction_id.split('-')[0].toUpperCase()}`}</p>
+              <p className={'transactionDate'}>{moment(data.updated_at).format("dddd, MMMM Do YYYY, HH:mm:ss")}</p>
             </div>
             <div className={'bodyContainer'}>
-              <p className={'nameText'}>{data.name}</p>
+              <p className={'nameText'}>{data.item.name + " : " + data.item_sku.name}</p>
               <div className={'childContainer'}>
                 <p className={'childTitle'}>Price</p>
-                <p className={'childText'}>{(+data.price).toFixed(0)} BTN Reward</p>
+                <p className={'childText'}>{(+data.item_sku.price).toFixed(0)} Points</p>
               </div>
               <div className={'childContainer'}>
                 <p className={'childTitle'}>Voucher Code</p>
-                <p className={'childText'}>{data.voucher_code}</p>
+                <p className={'childText'}>{data.voucher_code || '-'}</p>
               </div>
             </div>
           </div>
           <div className={'parentContainerRight'}>
             <p className={'statusTitle'}>Status</p>
-            <p className={'statusText'}>{data.status}</p>
+            <p className={'statusText'}>{data.transaction.status}</p>
 
             <div className={'buttonContainer'}>
               <Button className={'buttonSubscribe'} block={true} success>Subscribe</Button>
diff --git a/src/common/pages/Transaction/index.js b/src/common/pages/Transaction/index.js
index 66e37ed..cb6bd9f 100644
--- a/src/common/pages/Transaction/index.js
+++ b/src/common/pages/Transaction/index.js
@@ -7,6 +7,7 @@ import {FlatButton} from "material-ui";
 import './style.scss';
 import ItemList from "./ItemList";
 import moment from 'moment';
+import EmptyComponent from "../EmptyComponent";
 
 @inject("appstate")
 @observer
@@ -14,6 +15,11 @@ export default class TransactionPage extends React.Component {
   constructor(props){
     super(props);
     this.props = props;
+    this.purchasedVoucher = props.appstate.purchased_voucher;
+  }
+
+  componentDidMount() {
+    this.purchasedVoucher.getAll().then((res) => console.log(res, 'ini purchased voucher'))
   }
 
   render() {
@@ -84,9 +90,15 @@ export default class TransactionPage extends React.Component {
           <Divider className={'dividerTop'} />
 
           <div className={'listContainer'}>
-            {data.map(item => {
-              return <ItemList data={item}/>
-            })}
+            {
+              (this.purchasedVoucher.data.length > 0) ?
+                this.purchasedVoucher.data.map(item => {
+                  return <ItemList data={item}/>
+                }) :
+                (
+                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
+                )
+              }
           </div>
         </div>
       </div>
diff --git a/src/common/pages/Wallet/index.js b/src/common/pages/Wallet/index.js
index 510ccaa..1b9b1a1 100644
--- a/src/common/pages/Wallet/index.js
+++ b/src/common/pages/Wallet/index.js
@@ -71,8 +71,8 @@ export default class WalletComponent extends React.Component {
   };
 
   render() {
-    const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
-    const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
+    const voucher = <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
+    const points = <NumberFormat value={this.props.appstate.wallet.data.point} displayType={'text'} thousandSeparator={true}/>;
 
     const data = [
       {
diff --git a/src/common/stores/appstate.js b/src/common/stores/appstate.js
index 08cc0a5..fe32ad1 100644
--- a/src/common/stores/appstate.js
+++ b/src/common/stores/appstate.js
@@ -58,6 +58,8 @@ import Odoo from './odoo';
 
 import Vouchers from './vouchers';
 import {PurchasedItemStore} from "./purchased_item";
+import WalletStore from "./wallet";
+import {PurchasedItemVouchserStore} from "./purchased_item_voucher";
 
 export default class AppState {
   http = new Http(this.token);
@@ -117,6 +119,8 @@ export default class AppState {
   tags = new Tags(this);
   surf_turf = new Surf(this);
   purchased_items = new PurchasedItemStore(this);
+  wallet = new WalletStore(this);
+  purchased_voucher = new PurchasedItemVouchserStore(this);
 
   constructor(initialState) {
     this.token = initialState.token;
@@ -129,6 +133,9 @@ export default class AppState {
         this.user.getUserGeolocation();
       }
     }
+    if(this.token) {
+      this.loadDataAfterLogin();
+    }
   }
 
   @action
@@ -153,8 +160,13 @@ export default class AppState {
     this.items.push(item);
   }
 
+  @action
+  loadDataAfterLogin() {
+    this.wallet.getData();
+  }
+
   @computed get userData() {
-    const token = localStorage.getItem('id_token');
+    const token = this.token;
     if (!token) {
       return {
         user_id: '',
@@ -167,4 +179,3 @@ export default class AppState {
     return tokenData;
   }
 }
-
diff --git a/src/common/stores/authenticaton.js b/src/common/stores/authenticaton.js
index de6f12c..c89120f 100644
--- a/src/common/stores/authenticaton.js
+++ b/src/common/stores/authenticaton.js
@@ -51,6 +51,7 @@ export class Authentication {
       .then(res => {
         this.isLoggingIn = false;
         this.context.setToken(res.token);
+        this.context.loadDataAfterLogin();
       })
       .catch(err => {
         this.isLoggingIn = false;
@@ -96,7 +97,7 @@ export class Authentication {
     // .catch(err => {
     //   throw err;
     // })
-    
+
   }
 
   @action
diff --git a/src/common/stores/purchased_item_voucher.js b/src/common/stores/purchased_item_voucher.js
new file mode 100644
index 0000000..2ca165e
--- /dev/null
+++ b/src/common/stores/purchased_item_voucher.js
@@ -0,0 +1,11 @@
+import { BaseStore } from "./base_store";
+import {observable, action} from "mobx/lib/mobx";
+
+export class PurchasedItemVouchserStore extends BaseStore {
+
+  constructor(context) {
+    super(context);
+    this.url = "purchased_items/vouchers";
+  }
+
+}
diff --git a/src/common/stores/wallet.js b/src/common/stores/wallet.js
new file mode 100644
index 0000000..efae738
--- /dev/null
+++ b/src/common/stores/wallet.js
@@ -0,0 +1,28 @@
+import { observable, action, computed } from 'mobx';
+export default class WalletStore {
+  @observable isLoading = false;
+  @observable data = {
+    wallet: 1,
+    point: 1
+  };
+
+  constructor(context) {
+    this.context = context;
+    this.http = context.http;
+  }
+
+  @action
+  getData() {
+    this.isLoading = true;
+    return this.http.get("wallet")
+      .then(res => {
+        this.isLoading = false;
+        this.data = res;
+        return res;
+      })
+      .catch(err => {
+        this.isLoading = false;
+        throw err;
+      })
+  }
+}