From 16adfca13fe6cf6002444e8be248634ed04c1b96 Mon Sep 17 00:00:00 2001
From: enggar_ganteng <enggardamarsaraswata@gmail.com>
Date: Thu, 3 Jan 2019 13:26:17 +0700
Subject: [PATCH] base vouchers

---
 src/common/pages/App/index.js               |   7 +
 src/common/pages/App/routes.js              |   2 +
 src/common/pages/Vouchers/All/index.js      | 567 ++++++++++++++++++++
 src/common/pages/Vouchers/ItemCard/index.js |  99 ++++
 src/common/pages/Vouchers/index.js          |  86 +++
 src/common/pages/Vouchers/style.scss        |  67 +++
 src/common/routes.js                        |   3 +-
 7 files changed, 830 insertions(+), 1 deletion(-)
 create mode 100644 src/common/pages/Vouchers/All/index.js
 create mode 100644 src/common/pages/Vouchers/ItemCard/index.js
 create mode 100644 src/common/pages/Vouchers/index.js
 create mode 100644 src/common/pages/Vouchers/style.scss

diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index beff73c..2bf011c 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -410,6 +410,13 @@ export default class App extends React.Component {
               className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
               className="menuAkun">Shop</span></MenuItem></Link>
 
+            <Link onClick={this
+              .changeRoute
+              .bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
+              // leftIcon={<img src="/assets/images/icon/product.png"/>}
+              className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
+              className="menuAkun">Vouchers</span></MenuItem></Link>
+
             {/*<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"*/}
                     {/*style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}*/}
                     {/*onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>*/}
diff --git a/src/common/pages/App/routes.js b/src/common/pages/App/routes.js
index 9f991b2..2b37d38 100644
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@@ -10,6 +10,7 @@ import ReportComponent from './../Report';
 import SettingComponent from './../Setting';
 import WalletComponent from '../Wallet';
 import ItemsComponent from '../Items/index';
+import VouchersComponent from '../Vouchers/index';
 import FormItems from "../Items/FormItems/FormItems";
 import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
 import FormPromotion from "../Items/FormItems/FormPromotion";
@@ -79,6 +80,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={CarComponent} path={LINKS.CAR}/>
         <Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
         <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
+        <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
         <Route exact component={UploadItems} path={LINKS.FORM_UPLOAD}/>
diff --git a/src/common/pages/Vouchers/All/index.js b/src/common/pages/Vouchers/All/index.js
new file mode 100644
index 0000000..6f123d8
--- /dev/null
+++ b/src/common/pages/Vouchers/All/index.js
@@ -0,0 +1,567 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import bind from 'bind-decorator';
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  AutoComplete,
+  CardText,
+  FlatButton,
+  Divider,
+  RaisedButton,
+  Toolbar,
+  DatePicker,
+  FontIcon,
+  SelectField,
+  MenuItem,
+  ToolbarGroup,
+  FloatingActionButton,
+  ToolbarSeparator,
+  IconButton,
+  ToolbarTitle,
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+  TextField,
+  Paper,
+  RadioButton,
+  RadioButtonGroup,
+  DropDownMenu,
+  Dialog
+} from 'material-ui';
+import {withRouter} from 'react-router';
+import {BrowserRouter as Router, Route} from 'react-router-dom';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import SwipeableViews from 'react-swipeable-views';
+import SearchIcon from 'material-ui/svg-icons/action/search';
+import AddIcon from 'material-ui/svg-icons/content/add';
+import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
+import DeleteIcon from 'material-ui/svg-icons/content/delete-sweep';
+import ImageEdit from 'material-ui/svg-icons/image/edit';
+import EmptyComponent from '../../EmptyComponent';
+import LoadingDialog from "../../LoadingDialog";
+import Loader from 'react-loader-advanced';
+import {Row, Col} from 'antd';
+
+import '../style.scss';
+import {appConfig} from "../../../config/app";
+import {Link} from 'react-router-dom';
+import {LINKS} from "../../../routes";
+import {ItemCard} from '../ItemCard';
+import InfiniteScroll from 'react-infinite-scroller';
+
+@inject('appstate')
+@observer
+export default class All extends React.Component {
+  constructor(props) {
+    super(props);``
+    this.props = props;
+    this.state = {
+      searchText:'',
+      value: 0,
+      statusBanned: "Banned",
+      statusSoldOut: "Sold Out"
+    };
+    this.handleChange = this
+      .handleChange
+      .bind(this);
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.uiStore = props.appstate.uiStore;
+    this.userData = props.appstate.userData;
+    this.globalUI = props.appstate.globalUI;
+    this.rewardStore = props.appstate.reward;
+    this.userData = props.appstate.userData;
+    this.myStoreItem = props.appstate.myStoreItem;
+  }
+
+  componentDidMount() {
+    // this.myStoreItem.isSearching = false;
+    // if(this.userData.role == 'store') {
+    //   this.myStoreItem.getAll();
+    // }
+    // if(this.userData.role == 'administrator') {
+    //   this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
+    //   console.log('ini id',this.props.id);
+    //   this.myStoreItem.getAll();
+    // }
+  }
+
+  componentWillUnmount(){
+    // this.myStoreItem.isSearching = false;
+    // this.myStoreItem.reset();
+  }
+
+  deleteClicked = (id) => {
+    this.state.id = id;
+    this.setState({
+      openedDelete: true
+    });
+  }
+
+  search = (event)=>{
+    console.log("dataSearch",event.target.value);
+    if(event.target.value.length == 0){
+      this.myStoreItem.isSearching = false;
+    }
+    else{
+      this.myStoreItem.isSearching = true;
+      this.myStoreItem.search(event.target.value);
+    }
+  }
+
+
+  handleClickDelete = (id) => {
+    this.rewardStore.deleteReward(id);
+    this.setState({
+      openedDelete: false,
+      openSnackbarDelete: true
+    });
+    this.globalUI.openSnackbar("Successful Deleted Existing Reward");
+  }
+
+  handleCloseDelete = () => {
+    this.setState({
+      openedDelete: false
+    })
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  loadMore = ()=>{
+    console.log('RUNNss');
+    if(this.myStoreItem.data.length > 0){
+      this.myStoreItem.nextPage(true);
+    }
+  }
+
+  render() {
+
+    const data = [
+      {
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      },{
+        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
+        created_at: "2019-01-02T04:00:08.803Z",
+        custom_fields: null,
+        deleted_at: null,
+        description: null,
+        height: "0.00",
+        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
+        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
+        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
+        length: "0.00",
+        name: "Silly Oregano Seasoning",
+        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
+        product_id: 205,
+        product_tmpl_id: 291,
+        product_uom: 21,
+        odoo_stock_id: 123634,
+        order: 147291,
+        preorder: null,
+        regular_price: "10",
+        sale_date_from: null,
+        sale_date_to: null,
+        sale_price: null,
+        seen: 0,
+        sold: 0,
+        stock: "34.00",
+        uom: "pack",
+        updated_at: "2019-01-02T13:00:05.042Z",
+        use_weight_as_stock: false,
+        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
+        visible: true,
+        weight: "0.04",
+        width: "0.00",
+        wishlist: "0",
+      }
+    ];
+
+    const actionsDelete = [
+      <FlatButton
+        label="Cancel"
+        primary={true}
+        onClick={this.handleCloseDelete}
+      />,
+      <FlatButton
+        label="Delete"
+        primary={true}
+        onClick={() => this.handleClickDelete(this.state.id)}
+      />,
+    ];
+
+    return (
+      <div>
+        <div className="row">
+          <div className="col l12 m12 s12">
+            <Card className="animated fadeIn cardLite">
+              <Toolbar className="toolbarCard radius4" style={{backgroundColor: '#fff'}}>
+                <ToolbarGroup>
+                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
+                  <TextField
+                    hintText="Search All by Name"
+                    style={{fontSize: 14}}
+                    hintStyle={{fontSize: 14}}
+                    underlineShow={false}
+                    // onChange={this.search}
+                  />
+                </ToolbarGroup>
+                {/*<ToolbarGroup className="ToolbarGroupLast">*/}
+                  {/*<ToolbarSeparator/>*/}
+                  {/*<Link to={`${LINKS.FORM_ITEMS}`}>*/}
+                    {/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Items"*/}
+                                  {/*primary={true}/>*/}
+                  {/*</Link>*/}
+                {/*</ToolbarGroup>*/}
+              </Toolbar>
+
+              {/*<div style={{paddingBottom: 5}}>*/}
+              {/*<Loader show={false} message={<LoadingDialog/>}*/}
+              {/*messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>*/}
+
+              {/*</Loader>*/}
+              {/*</div>*/}
+              <Dialog
+                title="Warning"
+                actions={actionsDelete}
+                modal={true}
+                open={this.state.openedDelete}
+                onRequestClose={() => this.handleCloseDelete()}
+              >
+                Are you sure want to delete this data?
+              </Dialog>
+            </Card>
+          </div>
+        </div>
+
+        <InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
+        <Row className="row rowItem" gutter={8}>
+          {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
+          <Col className="gutter-row col animated fadeIn" span={4}>
+            <Link to={`${LINKS.FORM_ITEMS}`} style={{color: '#424770'}}>
+              <div className="flex add-new"
+                   style={{
+                     flexDirection: 'column',
+                     alignItems: 'center',
+                     justifyContent: 'center',
+                     height: 323
+                   }}>
+                <div>
+                  <FontIcon className="material-icons icon-add ">add</FontIcon>
+                </div>
+                Add new item
+              </div>
+            </Link>
+          </Col> : ""
+          }
+
+          {(this.userData.role === 'administrator') ?
+            <Col className="gutter-row col animated fadeIn" span={4}>
+              <Link to={`${LINKS.FORM_ITEMS}/${this.props.id}`} style={{color: '#424770'}}>
+                <div className="flex add-new"
+                     style={{
+                       flexDirection: 'column',
+                       alignItems: 'center',
+                       justifyContent: 'center',
+                       height: 323
+                     }}>
+                  <div>
+                    <FontIcon className="material-icons icon-add ">add</FontIcon>
+                  </div>
+                  Add new item
+                </div>
+              </Link>
+            </Col> : ""
+          }
+
+          {data.map(item => {
+            return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
+              <div className="gutter-box"><ItemCard data={item}/></div>
+            </Col>)
+          })}
+        </Row>
+        </InfiniteScroll>
+
+      </div>
+    )
+  }
+}
+
diff --git a/src/common/pages/Vouchers/ItemCard/index.js b/src/common/pages/Vouchers/ItemCard/index.js
new file mode 100644
index 0000000..44ce089
--- /dev/null
+++ b/src/common/pages/Vouchers/ItemCard/index.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  Card,
+  CardMedia,
+  CardTitle,
+  CardText,
+  FontIcon,
+} from 'material-ui';
+import NumberFormat from 'react-number-format';
+import {Link} from 'react-router-dom';
+import {LINKS} from "../../../routes";
+import {appConfig} from "../../../config/app";
+import get from 'lodash.get';
+
+@inject('appstate')
+@observer
+export class ItemCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {};
+    this.defaultState = Object.assign({}, this.state);
+
+    this.http = props.appstate.http;
+  }
+
+  componentDidMount() {
+    // console.log('ItemCard');
+  }
+
+  render() {
+    const {data = {}} = this.props;
+    const main = get(data,'images.main',null);
+    // const mainImage = this.http.appendImagePath(main);
+    const mainImage = main;
+
+    return (
+      <Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
+      <Card className="animated fadeIn cardLite marketplace-cardBox" style={{height: 323, cursor: 'pointer', textOverflow: 'ellipsis'}}>
+        <CardMedia>
+          <img src={(main) ? mainImage : 'https://marketplace-sillyfish-api.asacreative.com/assets/no-image.png'} alt="" style={{height: 175, objectFit: 'cover'}}/>
+        </CardMedia>
+        {/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}
+
+        <CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}
+                   subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
+        {/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/}
+                   {/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}
+                                           {/*value={data.regular_price}*/}
+                                           {/*displayType={'text'}*/}
+                                           {/*thousandSeparator={true} prefix={'Rp'}/>}/>*/}
+
+        {/*<CardText style={{padding: 8}}>*/}
+        {/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
+        {/*<div className="flex flexSpaceBetween">*/}
+        {/*<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}} value={data.regular_price}*/}
+        {/*displayType={'text'}*/}
+        {/*thousandSeparator={true} prefix={'Rp'}/>*/}
+        {/*<div style={{fontSize: "11px"}}><span style={{color: '#5a637e7d'}}>Stock</span>{data.stock}</div>*/}
+        {/*</div>*/}
+        {/*</CardText>*/}
+
+        <CardText style={{
+          padding: '16px 16px 8px',
+          boxShadow: '0px 5px 15px rgba(0,0,0,0.05)',
+          borderRadius: 6,
+          fontSize: 12
+        }}>
+          <div><span style={{color: '#636c72', fontWeight: '300'}}>Stock :</span> {+data.stock} {data.uom}</div>
+        </CardText>
+
+        <CardText style={{padding: "4px 16px"}}>
+          <div className="flex flexSpaceBetween">
+            <div className="font-12" style={{fontSize: '.72rem'}}>
+              <FontIcon className="material-icons font-12"
+                        color='#636c72'
+                        style={{
+                          display: "inlineFlex", verticalAlign: "middle", lineHight: 1
+                        }}>remove_red_eye</FontIcon> : {data.seen}
+            </div>
+            <div className="" style={{fontSize: '.72rem'}}>
+              <FontIcon className="material-icons font-12" color='#636c72' style={{
+                display: "inlineFlex",
+                verticalAlign: "middle",
+                lineHight: 1,
+              }}>favorite_border</FontIcon> : {data.wishlist}
+            </div>
+            <div style={{fontSize: '.72rem'}}><span style={{color: '#636c72', fontWeight: '300'}}>Sold</span>
+              : {data.sold}</div>
+          </div>
+        </CardText>
+
+      </Card>
+      </Link>
+    )
+  }
+
+}
diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js
new file mode 100644
index 0000000..d752e9a
--- /dev/null
+++ b/src/common/pages/Vouchers/index.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import { Affix, Card, Slider, Select } from 'antd';
+import {Tab, Tabs} from 'material-ui';
+import './style.scss';
+import All from "./All/index";
+
+const Option = Select.Option;
+@inject('appstate')
+@observer
+export default class VouchersComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      valueMinimal: 0,
+      valueMaximal: 0,
+    };
+    this.defaultState = Object.assign({}, this.state);
+  }
+
+  componentDidMount() {
+  }
+
+  handleChangeMinimal = (valueMinimal) => {
+    this.setState({ valueMinimal });
+  };
+
+  handleChangeMaximal = (valueMaximal) => {
+    this.setState({ valueMaximal });
+  };
+
+  handleChange = (value) => {
+    console.log(`selected ${value}`);
+  }
+
+  handleBlur = () => {
+    console.log('blur');
+  }
+
+  handleFocus = () => {
+    console.log('focus');
+  }
+
+  render() {
+    const { valueMinimal, valueMaximal } = this.state;
+
+    return (
+      <div className="setting">
+        <div className="row">
+          <div className="col l3 m3 s3 no-padding">
+            <Affix offsetTop={90}>
+              <Card title="Filter" bordered={true} style={{ width: '100%' }}>
+                <p>Min. Points</p>
+                <Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
+
+                <p>Max. Points</p>
+                <Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
+
+                <p style={{marginTop: 25}}>Category</p>
+                <Select
+                  showSearch
+                  style={{ width: '100%' }}
+                  placeholder="Select a category"
+                  optionFilterProp="children"
+                  onChange={this.handleChange}
+                  onFocus={this.handleFocus}
+                  onBlur={this.handleBlur}
+                  // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                >
+                  <Option value="jack">Electronic</Option>
+                  <Option value="lucy">Fashion</Option>
+                  <Option value="tom">Food</Option>
+                </Select>
+              </Card>
+            </Affix>
+          </div>
+          <div className="col l9 m9 s9 no-padding">
+            <All/>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/common/pages/Vouchers/style.scss b/src/common/pages/Vouchers/style.scss
new file mode 100644
index 0000000..6d4e533
--- /dev/null
+++ b/src/common/pages/Vouchers/style.scss
@@ -0,0 +1,67 @@
+.setting {
+    margin-top: 35px;
+    .container {
+      padding: 25px;
+  
+      .ant-card {
+        background: #fff;
+        border-radius: 0;
+        font-size: 12px;
+        position: relative;
+        overflow: hidden;
+        transition: all .3s;
+      }
+      .ant-card-head {
+        height: 48px;
+        line-height: 48px;
+        background: #fff;
+        border-bottom: 0 solid #e9e9e9;
+        padding: 0 24px;
+      }
+      .ant-card:hover {
+        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+        border-color: transparent;
+      }
+      .ant-card-body-dashboard {
+        padding: 10px;
+      }
+    }
+  
+  
+    .label-form {
+      font-size: 14px;
+      line-height: 30px;
+      color: rgb(153, 153, 153);
+      text-shadow: rgb(255, 255, 255) 0px 1px 0px;
+      margin-bottom: -8px;
+    }
+  
+    .backgroundImage {
+      height: 182px;
+      background-image: url('/assets/images/material3.jpg');
+      background-position: center;
+      background-size: cover;
+      cursor: pointer;
+      min-height: 75px;
+      position: relative;
+      width: 100%;
+    }
+  
+  }
+  
+  .photo-title{
+    font-size: 1.25em;
+    font-weight: 400;
+    margin-left: 12px;
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
+  
+  .box-upload{
+    width: 100%;
+    height: 500px;
+  }
+  
+  
+  
+  
\ No newline at end of file
diff --git a/src/common/routes.js b/src/common/routes.js
index de699c1..b0bb2bc 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -109,7 +109,8 @@ export const LINKS = {
   HOTEL:'/app/hotel',
   HOTEL_SEARCH:'/app/hotel/search',
   CAR:'/app/car',
-  CAR_SEARCH:'/app/car/search'
+  CAR_SEARCH:'/app/car/search',
+  VOUCHERS: '/app/vouchers',
 };
 
 @inject('appstate')