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/stores/appstate.js b/src/common/stores/appstate.js
index 8caad67..fe32ad1 100644
--- a/src/common/stores/appstate.js
+++ b/src/common/stores/appstate.js
@@ -59,6 +59,7 @@ 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);
@@ -119,7 +120,7 @@ export default class AppState {
   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;
@@ -178,4 +179,3 @@ export default class AppState {
     return tokenData;
   }
 }
-
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";
+  }
+
+}