From e503b70640c4ebc612c34f3fc60c8e14ac58dc45 Mon Sep 17 00:00:00 2001
From: Rifqy Zacky Ariadhy <rifqyzackya@gmail.com>
Date: Wed, 2 Jan 2019 21:16:50 +0700
Subject: [PATCH] update: shop page

---
 src/common/pages/App/index.js            | 222 +--------------
 src/common/pages/App/style.scss          |   4 +-
 src/common/pages/Items/All/index.js      | 334 ++++++++++++++++++++++-
 src/common/pages/Items/ItemCard/index.js |  15 +-
 src/common/pages/Items/index.js          | 114 ++++----
 5 files changed, 387 insertions(+), 302 deletions(-)

diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index b7b35ff..96434d7 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -538,226 +538,10 @@ export default class App extends React.Component {
           {/*</ToolbarGroup>*/}
         </Toolbar>
 
-        <Drawer containerClassName={(window.innerWidth < 600) ? 'drawer_small' : 'drawer_large transparent no-shadow'}
-                docked={(window.innerWidth < 600) ? false : true}
-                onRequestChange={(open) => this.setState({open})}
-                open={this.state.open}>
-          <Toolbar className="hide-on-med-and-up transparent" style={{marginLeft: 16}}>
-            <ToolbarGroup firstChild={true}>
-              {
-                // (this.settingStore.isIconEmpty) ?
-
-                //   <div>
-                //     <Paper style={styles.Paper} zDepth={1} circle={true}>
-                //       <img style={styles.ImageRounded} className="logo"
-                //            src="/assets/images/logo_ikan.png"/>
-                //     </Paper>
-                //   </div>
-                  // :
-                  // <div>
-                  //   <Paper style={styles.Paper} zDepth={1} circle={true}>
-                  //     <img style={styles.ImageRounded} className="logo"
-                  //          src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
-                  //   </Paper>
-                  // </div>
-              }
-                <div>
-                  <Paper style={styles.Paper} zDepth={1} circle={true}>
-                    <img style={styles.ImageRounded} className="logo" src="/assets/images/logo_ikan.png"/>
-                  </Paper>
-                </div>
-              {/*<ToolbarTitle style={{color: '#424770'}}
-                            text={(this.settingStore.setting.name) ? this.settingStore.setting.name : "Tourmate"}/>*/}
-              <ToolbarTitle style={{color: '#424770'}} text={'Marketplace'}/>
-            </ToolbarGroup>
-          </Toolbar>
-
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/chart.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Dashboard</span></MenuItem></Link>*/}
-
-          {/*{*/}
-            {/*userData.role == 'administrator' ?*/}
-              {/*<Link onClick={this*/}
-                {/*.changeRoute*/}
-                {/*.bind(this, '/app/data')} to={LINKS.DATA}> <MenuItem*/}
-                {/*leftIcon={<img src="/assets/images/icon/data.png"/>}*/}
-                {/*className={(this.state.selectedMenu === '/app/data') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-                {/*className="menuAkun">Data</span></MenuItem></Link> : ''*/}
-          {/*}*/}
-
-          {/*{*/}
-            {/*userData.role == 'administrator' &&*/}
-              {/*<Link onClick={this*/}
-                {/*.changeRoute*/}
-                {/*.bind(this, '/app/layout')} to={LINKS.LAYOUT}> <MenuItem*/}
-                {/*leftIcon={<img src="/assets/images/icon/layout.png"/>}*/}
-                {/*className={(this.state.selectedMenu === '/app/layout') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-                {/*className="menuAkun">Layout</span></MenuItem></Link>*/}
-          {/*}*/}
-
-          {/*{*/}
-            {/*userData.role == 'administrator' &&*/}
-            {/*<Link onClick={this*/}
-              {/*.changeRoute*/}
-              {/*.bind(this, '/app/content')} to={LINKS.CONTENT}> <MenuItem*/}
-              {/*leftIcon={<img src="/assets/images/icon/content.png"/>}*/}
-              {/*className={(this.state.selectedMenu === '/app/content') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-              {/*className="menuAkun">Content</span></MenuItem></Link>*/}
-          {/*}*/}
-
-          {/*{*/}
-            {/*userData.role === 'administrator' &&*/}
-            {/*<Link onClick={this*/}
-              {/*.changeRoute*/}
-              {/*.bind(this, '/app/tasks')} to={LINKS.TASKS}> <MenuItem*/}
-              {/*leftIcon={<img src="/assets/images/icon/tasks.png"/>}*/}
-              {/*className={(this.state.selectedMenu === '/app/tasks') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-              {/*className="menuAkun">Tasks</span></MenuItem></Link>*/}
-          {/*}*/}
-
-          {/*{*/}
-            {/*userData.role == 'store' ?*/}
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/items')} to={LINKS.ITEMS}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/product.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/items') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Items</span></MenuItem></Link>*/}
-            {/*: ""*/}
-          {/*}*/}
-
-          {/*{*/}
-            {/*userData.role == 'store' ?*/}
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/billing')} to={LINKS.WALLET}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/wallet.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/billing') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Wallet</span></MenuItem></Link> : ""*/}
-          {/*}*/}
-
-
-          {/*{*/}
-            {/*userData.role == 'store' ?*/}
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/orders')} to={LINKS.ORDER}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/accounting.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/orders') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Order</span></MenuItem></Link>*/}
-            {/*: ""*/}
-          {/*}*/}
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/tasks')} to={LINKS.TASKS}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/tasks.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/tasks') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Tasks</span></MenuItem></Link>*/}
-
-          {/*{*/}
-            {/*userData.role == 'store' ?*/}
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/stores')} to={LINKS.STORES}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/store.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/stores') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Store</span></MenuItem></Link> : ''*/}
-          {/*}*/}
-
-          {/* {
-            userData.role == 'store' ?
-          <Link onClick={this
-            .changeRoute
-            .bind(this, '/app/recipes')} to={LINKS.RECIPES}> <MenuItem
-            leftIcon={<img src="/assets/images/icon/recipe.png"/>}
-            className={(this.state.selectedMenu === '/app/recipes') ? "menuAkunItem active" : 'menuAkunItem'}><span
-            className="menuAkun">Recipes</span></MenuItem></Link> : ''
-          } */}
-
-          {/* {
-            userData.role == 'administrator' ?
-              <Link onClick={this
-                .changeRoute
-                .bind(this, '/app/surf_turf')} to={LINKS.SURF}> <MenuItem
-                leftIcon={<img src="/assets/images/icon/grill.png"/>}
-                className={(this.state.selectedMenu === '/app/surf_turf') ? "menuAkunItem active" : 'menuAkunItem'}><span
-                className="menuAkun">Surf & Turf</span></MenuItem></Link> : ''
-          }
-
-          {
-            userData.role == 'administrator' ?
-          <Link onClick={this
-            .changeRoute
-            .bind(this, '/app/help')} to={LINKS.HELP}> <MenuItem
-            leftIcon={<img src="/assets/images/icon/help.png"/>}
-            className={(this.state.selectedMenu === '/app/help') ? "menuAkunItem active" : 'menuAkunItem'}><span
-            className="menuAkun">Help</span></MenuItem></Link> : ''
-          } */}
-
-
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/inbox')} to={LINKS.INBOX}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/inbox.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/inbox') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Inbox</span></MenuItem></Link>*/}
-          {/*/!*{*!/*/}
-            {/*/!*userData.role == 'administrator' &&           *!/*/}
-            {/*<Link onClick={this*/}
-              {/*.changeRoute*/}
-              {/*.bind(this, '/app/setting')} to={LINKS.SETTING}> <MenuItem*/}
-              {/*leftIcon={<img src="/assets/images/icon/settings.png"/>}*/}
-              {/*className={(this.state.selectedMenu === '/app/setting') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-              {/*className="menuAkun">Setting</span></MenuItem></Link>*/}
-          {/*}*/}
-          {/*
-            userData.role == 'administrator' ?
-              <Link onClick={this
-                .changeRoute
-                .bind(this, '/app/promotion')} to={LINKS.PROMOTION}> <MenuItem
-                leftIcon={<img src="/assets/images/icon/promotion.png"/>}
-                className={(this.state.selectedMenu === '/app/promotion') ? "menuAkunItem active" : 'menuAkunItem'}><span
-                className="menuAkun">Promotion</span></MenuItem></Link> : ''
-          */}
-
-          {/*<Link onClick={this*/}
-            {/*.changeRoute*/}
-            {/*.bind(this, '/app/entities')} to={LINKS.ENTITIES}> <MenuItem*/}
-            {/*leftIcon={<img src="/assets/images/icon/walter_white.png"/>}*/}
-            {/*className={(this.state.selectedMenu === '/app/entities') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-            {/*className="menuAkun">Entities</span></MenuItem></Link>*/}
-
-          {/*<Link onClick={this*/}
-          {/*.changeRoute*/}
-          {/*.bind(this, '/app/agents')} to={LINKS.AGENT}> <MenuItem*/}
-          {/*leftIcon={<img src="/assets/images/icon/conference.png"/>}*/}
-          {/*className={(this.state.selectedMenu === '/app/agents') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-          {/*className="menuAkun">Agents</span></MenuItem></Link>*/}
-
-          {/*<Link onClick={this*/}
-          {/*.changeRoute*/}
-          {/*.bind(this, LINKS.EMPLOYEE)} to={LINKS.EMPLOYEE}> <MenuItem*/}
-          {/*leftIcon={<img src="/assets/images/icon/employee.png"/>}*/}
-          {/*className={(this.state.selectedMenu === LINKS.EMPLOYEE) ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-          {/*className="menuAkun">Employees</span></MenuItem></Link>*/}
-
-          {/*<Link onClick={this*/}
-          {/*.changeRoute*/}
-          {/*.bind(this, '/app/customers')} to={LINKS.CUSTOMER}> <MenuItem*/}
-          {/*leftIcon={<img src="/assets/images/icon/customer.png"/>}*/}
-          {/*className={(this.state.selectedMenu === '/app/customers') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
-          {/*className="menuAkun">Customers</span></MenuItem></Link>*/}
-
-        </Drawer>
-
         <div className="mainContent" style={{
-          paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
-          marginLeft: (window.innerWidth < 600) ? 'auto' : 'auto',
-          marginRight: (window.innerWidth < 600) ? '0' : 'auto'
+          // paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
+          // marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
+          // marginRight: (window.innerWidth < 600) ? '0' : '50px',
         }}>
           <div className="try"/>
           <Route/>
diff --git a/src/common/pages/App/style.scss b/src/common/pages/App/style.scss
index 3548977..994101e 100644
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -1,6 +1,8 @@
 .app-container {
   .mainContent {
-    width: calc(100vw - 275px);
+    width: calc(100vw - 5vw);
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
     position: relative;
   }
   @media screen and (max-width: 780px) {
diff --git a/src/common/pages/Items/All/index.js b/src/common/pages/Items/All/index.js
index 6bed54f..6f123d8 100644
--- a/src/common/pages/Items/All/index.js
+++ b/src/common/pages/Items/All/index.js
@@ -85,19 +85,19 @@ export default class All extends React.Component {
 
   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();
-    }
+    // 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();
+    // this.myStoreItem.isSearching = false;
+    // this.myStoreItem.reset();
   }
 
   deleteClicked = (id) => {
@@ -145,7 +145,315 @@ export default class All extends React.Component {
 
   render() {
 
-    console.log(this.myStoreItem.data.length);
+    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
@@ -173,7 +481,7 @@ export default class All extends React.Component {
                     style={{fontSize: 14}}
                     hintStyle={{fontSize: 14}}
                     underlineShow={false}
-                    onChange={this.search}
+                    // onChange={this.search}
                   />
                 </ToolbarGroup>
                 {/*<ToolbarGroup className="ToolbarGroupLast">*/}
@@ -244,7 +552,7 @@ export default class All extends React.Component {
             </Col> : ""
           }
 
-          {(this.myStoreItem.isSearching ? this.myStoreItem.dataFiltered : this.myStoreItem.data).map(item => {
+          {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>)
diff --git a/src/common/pages/Items/ItemCard/index.js b/src/common/pages/Items/ItemCard/index.js
index 60d3f65..44ce089 100644
--- a/src/common/pages/Items/ItemCard/index.js
+++ b/src/common/pages/Items/ItemCard/index.js
@@ -31,8 +31,9 @@ export class ItemCard extends React.Component {
 
   render() {
     const {data = {}} = this.props;
-    const main = get(data,'images.main',null)
-    const mainImage = this.http.appendImagePath(main);
+    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}`}>
@@ -43,10 +44,12 @@ export class ItemCard extends React.Component {
         {/*<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={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}
-                                           value={data.regular_price}
-                                           displayType={'text'}
-                                           thousandSeparator={true} prefix={'Rp'}/>}/>
+                   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>*/}
diff --git a/src/common/pages/Items/index.js b/src/common/pages/Items/index.js
index 56e91c6..3a442ca 100644
--- a/src/common/pages/Items/index.js
+++ b/src/common/pages/Items/index.js
@@ -1,22 +1,12 @@
 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";
-import Active from "./Active/index";
-import Unactive from "./Unactive/index";
-import SoldOut from "./SoldOut/index";
-import Banned from "./Banned/index";
-
-export const ITEM_TABS = {
-  ALL: 'all',
-  ACTIVE: 'active',
-  UNACTIVE : 'unactive',
-  SOLD_OUT: 'sold_out',
-  BANNED: 'banned',
-};
 
+const Option = Select.Option;
 @inject('appstate')
 @observer
 export default class ItemsComponent extends React.Component {
@@ -24,72 +14,70 @@ export default class ItemsComponent extends React.Component {
     super(props);
     this.props = props;
     this.state = {
-      tabSelected: 'all',
+      valueMinimal: 0,
+      valueMaximal: 0,
     };
-    this.handleChange = this.handleChange.bind(this);
     this.defaultState = Object.assign({}, this.state);
-    this.http = props.appstate.http;
-    this.authStore = props.appstate.auth;
-    this.globalUI = props.appstate.globalUI;
-    this.appStore = props.appstate.app;
-    this.myStore = props.appstate.myStore;
   }
 
   componentDidMount() {
   }
 
-  handleChange = (tabSelected) => {
-    this.setState({tabSelected: tabSelected});
-    this.globalUI.itemsTabSelected = tabSelected;
+  handleChangeMinimal = (valueMinimal) => {
+    this.setState({ valueMinimal });
   };
 
-  getContent() {
-    switch (this.globalUI.itemsTabSelected) {
-      case ITEM_TABS.ALL:
-        return <All/>;
-      case ITEM_TABS.ACTIVE:
-        return <Active/>;
-      case ITEM_TABS.UNACTIVE:
-        return <Unactive/>;
-      case ITEM_TABS.SOLD_OUT:
-        return <SoldOut/>;
-      case ITEM_TABS.BANNED:
-        return <Banned/>;
-      default:
-        return <All/>
-    }
+  handleChangeMaximal = (valueMaximal) => {
+    this.setState({ valueMaximal });
+  };
+
+  handleChange = (value) => {
+    console.log(`selected ${value}`);
+  }
+
+  handleBlur = () => {
+    console.log('blur');
+  }
+
+  handleFocus = () => {
+    console.log('focus');
   }
 
   render() {
-
-    const {type:appType} = this.appStore;
+    const { valueMinimal, valueMaximal } = this.state;
 
     return (
-      <div className="setting containerMiddle">
+      <div className="setting">
         <div className="row">
-          <div className="col l12 m12 s12 no-padding">
-            <Tabs
-              value={this.globalUI.itemsTabSelected}
-              onChange={this.handleChange}
-              inkBarStyle={{background: 'transparent'}}
-              className="tabsAkun"
-              style={{background: 'transparent'}} >
-              <Tab label="All" value="all" className={(this.globalUI.itemsTabSelected === 'all') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
-              </Tab>
-              <Tab label="Active" value="active" className={(this.globalUI.itemsTabSelected === 'active') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
-              
-              </Tab>
-              {/*<Tab label="Inactive" value="unactive" className={(this.globalUI.itemsTabSelected === 'unactive') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
-              
-              </Tab>*/}
-              <Tab label="Sold Out" value="sold_out" className={(this.globalUI.itemsTabSelected === 'sold_out') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
-                
-              </Tab>
-              {/*<Tab label="Banned" value="banned" className={(this.globalUI.itemsTabSelected === 'banned') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}
-                {/**/}
-              {/*</Tab>*/}
-            </Tabs>
-            {this.getContent()}
+          <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>