Initial commit

src/common/pages/Stores/Address/Dialog/AddAddress.js

@@ -0,0 +1,335 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Dialog, FlatButton, RaisedButton,
+  Step,
+  StepLabel,
+  Stepper,
+  IconButton
+} from "material-ui";
+import {DIALOG} from "../../../../stores/global_ui";
+import schema from 'async-validator'
+import AddressDetail from './Address';
+
+@inject('appstate')
+@observer
+export default class AddressAdd extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      stepIndex: 0,
+      finished: false,
+      openedDialog: false,
+      openMaps : false,
+      confirmationDialog : false,
+      formData: {},
+      errorMessage: '',
+      default:{
+        is_shipment : true,
+        is_default : true
+      }
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.globalUI = props.appstate.globalUI;
+    this.userAddress = props.appstate.userAddress;
+    this.userData = props.appstate.userData;
+  }
+
+  componentDidMount(){
+    this.setState({
+      stepIndex:0
+    });
+  }
+
+  componentWillReceiveProps(nextProps){
+    this.setState({stepIndex : 0,formData : nextProps.defaultValue, default : nextProps.defaultValue});
+  }
+
+  getStepContent(stepIndex) {
+
+    const {mode="create", defaultValue={}} = this.props;
+
+    switch (stepIndex) {
+      case 0:
+        return (
+          <AddressDetail
+            mode={mode}
+            defaultValue={defaultValue}
+            onChangeData={formData => this.setState({formData})}/>
+        );
+    }
+  }
+
+  handleOpen = () => {
+    this.setState({confirmationDialog: true})
+  };
+
+  handleNext = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex === 0) {
+
+      const rules = {
+        name: [
+          {
+            required: true,
+            message: "Please fill address name"
+          }
+        ],
+        address: [
+          {
+            required: true,
+            message: 'Please fill address',
+          }
+        ],
+        province_id: [
+          {
+            required: true,
+            message: 'Please select province',
+          }
+        ],
+        city_id: [
+          {
+            required: true,
+            message: 'Please select city',
+          }
+        ],
+        phone_number: [
+          {
+            required: true,
+            message: 'Please fill phone number',
+          }
+        ],
+        postal_code: [
+          {
+            required: true,
+            message: 'Please fill postal code',
+          }
+        ],
+      };
+
+      const validator = new schema(rules);
+      console.log(this.state.formData);
+      validator.validate(this.state.formData, (errs, f) => {
+        console.log(errs);
+
+        if (errs) {
+          this.globalUI.showNotification("Something's Wrong", errs[0].message);
+        } else {
+          // let regex=/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{11,15})([0-9]{8}|\s*)$/;
+          let regex=/^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g;
+          if(this.state.formData.phone_number.match(regex)) {
+            this.setState({
+              stepIndex: stepIndex + 1,
+            });
+          }
+          else{
+            this.globalUI.showNotification("Phone number should be correct !");
+          }
+        }
+      });
+    }
+  }
+
+  handlePrev = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex > 0) {
+      this.setState({stepIndex: stepIndex - 1});
+    }
+  }
+
+  save = () => {
+    this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
+    this.globalUI.showDialogLoading();
+    const {mode="create", defaultValue={}} = this.props;
+    var data = this.state.formData;
+    data.lat = this.userAddress.geoData.lat;
+    data.long = this.userAddress.geoData.lng;
+    data.geoaddress = this.userAddress.geoData.geoaddress;
+
+    if(this.userData.role == 'store') {
+      if (mode === "create") {
+
+        this.userAddress.addAddress(data).then(res=>{
+          this.globalUI.openSnackbar('Successfully add new Address');
+        }).catch((err)=> {
+          console.log(err);
+          this.globalUI.closeLoading();
+        })
+      } else if (mode === "update") {
+        this.userAddress.updateAddress(data).then(res=>{
+          this.globalUI.openSnackbar('Successfully update Address');
+        }).catch(err=>{
+          console.log(err);
+          this.globalUI.openSnackbar('Something Error');
+        })
+
+      }
+    }
+    else if(this.userData.role == 'administrator'){
+      if (mode === "create") {
+        this.userAddress.addAddressAdmin(this.props.id,data).then(res=>{
+          this.globalUI.openSnackbar('Successfully add new Address');
+        }).catch((err)=> {
+          console.log(err);
+          this.globalUI.closeLoading();
+        })
+      } else if (mode === "update") {
+        this.userAddress.updateAddressAdmin(this.props.id,data).then(res=>{
+          this.globalUI.openSnackbar('Successfully update Address');
+        }).catch(err=>{
+          console.log(err);
+          this.globalUI.openSnackbar('Something Error');
+        })
+
+      }
+    }
+
+  }
+
+  handleClose = () => {
+    this.setState({confirmationDialog: false,formData : {}})
+  };
+
+
+  continueButton() {
+    if (this.state.stepIndex === 1) {
+      return (
+        <RaisedButton
+          label="Finish"
+          primary={true}
+          onClick={this.save}
+        />
+      );
+    } else {
+      return (
+        <RaisedButton
+          label="Next"
+          primary={true}
+          onClick={this.handleNext}
+        />
+      );
+    }
+  }
+
+  openWarningDialog = ()=>{
+    // this.userAddress.deletedAddress(data.id).then(res=>{
+    //   this.globalUI.openSnackbar('Delete Success');
+    // })
+    // console.log(data);
+    this.setState(
+      {
+      confirmationDialog :true,errorMessage:
+          'Are you sure want to delete this address?'}
+          )
+  ;};
+
+  deletedAddress = (data)=>{
+    this.setState({confirmationDialog:false});
+    this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
+    if(this.userData.role == 'store') {
+      this.userAddress.deletedAddress(data.id).then(res=>{
+        this.globalUI.openSnackbar('Delete success')
+      });
+    }
+    else if(this.userData.role == 'administrator'){
+      this.userAddress.deletedAddressAdmin(this.props.id,data.id).then(res=>{
+        this.globalUI.openSnackbar('Delete success')
+      });
+    }
+  };
+
+  render() {
+
+    const {finished, stepIndex} = this.state;
+    const {mode="create", defaultValue={}} = this.props;
+
+    const actions = [
+      <RaisedButton
+        label="No"
+        primary={false}
+        style={{marginRight: 10}}
+        onClick={this.handleClose}
+      />,
+      <RaisedButton
+        label="Yes"
+        primary={true}
+        style={{marginRight: 10}}
+        onClick={()=>this.deletedAddress(this.state.formData)}
+      />
+    ];
+
+    const title =
+      <div>
+        <h4 style={{
+          fontSize: 26,
+          marginBottom: 0,
+          marginTop: 0,
+          fontWeight: 500,
+          color: "black"
+        }}>{(mode === "create") ? "Add New" : "Update"} Address</h4>
+      </div>
+    ;
+
+    return (
+      <div>
+        <Dialog
+          title={<div>
+            <div>{title}</div>
+            {/*<div style={{padding: "0px 14px 0 0", marginTop: 10}}>*/}
+              {/*<Stepper activeStep={stepIndex}>*/}
+                {/*<Step>*/}
+                  {/*<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Bank Account</StepLabel>*/}
+                {/*</Step>*/}
+                {/*/!* <Step>*/}
+                  {/*<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>*/}
+                {/*</Step> *!/*/}
+              {/*</Stepper>*/}
+            {/*</div>*/}
+          </div>}
+          titleStyle={{paddingBottom: 10}}
+          modal={false}
+          actions={<div style={{marginTop: 12}}>
+            <FlatButton
+              label={(stepIndex === 0) ? "Cancel" : "Back"}
+              style={{marginRight: 10}}
+              primary={true}
+              onClick={() => (stepIndex === 0) ? this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE) : this.handlePrev()}
+            />
+            {this.continueButton()}
+            {(this.state.default.is_shipment != true && this.state.default.is_default != true) ?
+              <FlatButton
+                label={"Delete"}
+                style={{marginRight: 10}}
+                primary={true}
+                onClick={() => this.openWarningDialog()}
+              /> : ''}
+          </div>}
+          autoScrollBodyContent={true}
+          repositionOnUpdate={true}
+          open={this.globalUI[DIALOG.ADDRESS.CREATE]}
+          onRequestClose={this.handleClose}
+          paperClassName={'radius6'}
+          contentClassName={'marketplace-dialog-small'}
+        >
+          <div style={{marginTop: 20}}>
+            {this.getStepContent(stepIndex)}
+          </div>
+        </Dialog>
+
+        <Dialog
+          title="Warning"
+          actions={actions}
+          modal={false}
+          autoScrollBodyContent={false}
+          contentStyle={{width: 350}}
+          open={this.state.confirmationDialog}
+          onRequestClose={() => this.handleClose()}
+        >
+          {this.state.errorMessage}
+        </Dialog>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Address/Dialog/Address.js

@@ -0,0 +1,253 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {DatePicker, MenuItem, SelectField, TextField,Checkbox,RaisedButton} from 'material-ui';
+import MapDialog from './map_dialog';
+// import '../../Service/style.scss';
+
+@inject('appstate')
+@observer
+export default class AddressDetail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.customer = props.appstate.customer;
+    this.state = {
+      formData: Object.assign({
+        geoaddress : ''
+      }, props.defaultValue) || {},
+      openMaps : false,
+    };
+    this.http = props.appstate.http;
+    this.globalUI = props.appstate.globalUI;
+    this.userAddress = props.appstate.userAddress;
+    this.phone = new RegExp(/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{12})([0-9]{8}|\s*)$/);
+  }
+
+  componentWillMount(){
+    this.userAddress.setGeoData({
+      lat : this.props.defaultValue.lat,
+      lng : this.props.defaultValue.long,
+      geoaddress : this.props.defaultValue.geoaddress
+    })
+  }
+
+  componentDidMount() {
+    // this.globalUI.showNotification("Something's Wrong", 'errs[0].message');
+    this.globalUI.openLoading();
+    this.userAddress.getProvinces().then(res=>{
+      this.globalUI.closeLoading();
+    })
+    if(this.props.mode === 'update'){
+      this.userAddress.getCities(this.props.defaultValue.province_id);
+    }
+  }
+
+  closeMap = ()=>{
+    this.setState({
+      openMaps : !this.state.openMaps
+    });
+  };
+
+
+
+  triggerOnChange() {
+    if (this.props.onChangeData && typeof this.props.onChangeData === 'function') {
+      this.props.onChangeData(this.state.formData);
+    }
+  }
+
+
+  render() {
+    // const roles = this.roleStore.roles.map(r => {
+    //   return <MenuItem key={r.id} value={r.id} primaryText={r.name} />
+    // });
+
+    const wrapperText = key => ele => React.cloneElement(ele, {
+      value: this.state.formData[key],
+      onChange: (e, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+    const wrapperImage = key => ele => React.cloneElement(ele, {
+      src: this.http.appendImagePath(this.state.formData[key]),
+      onChange: (e, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+
+    const wrapperSelect = key => ele => React.cloneElement(ele, {
+      value: this.state.formData[key],
+      onChange: (e, k, v) => {
+        if(key == 'province_id'){
+          this.userAddress.resetCities();
+          this.userAddress.getCities(v);
+        }
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+    const wrapperSwitch = key => ele => React.cloneElement(ele, {
+      checked: this.state.formData[key],
+      onCheck: (e, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+    const province = this.userAddress.provinces.map(r => {
+      return <MenuItem key={r.id} value={r.id} primaryText={r.name} />
+    });
+
+    const cities = this.userAddress.cities.map(r => {
+      return <MenuItem key={r.id} value={r.id} primaryText={r.type+" "+r.name} />
+    });
+
+    return(
+      <div>
+        <div className="row">
+          <div className="col s6">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Name</p>
+            {wrapperText("name")(
+              <TextField
+                fullWidth={true}
+                className={'font-14'}
+                hintText="E.g. Ridwan Abadi"/>
+            )}
+          </div>
+          <div className="col s6">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Sender Name</p>
+            {wrapperText("receiver_name")(
+              <TextField
+                fullWidth={true}
+                className={'font-14'}
+                hintText="E.g. Ridwan Abadi"/>
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s12">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Phone Number</p>
+            {wrapperText("phone_number")(
+              <TextField
+                fullWidth={true}
+                className={'font-14'}
+                hintText="E.g. 08883339992"
+                type="number"
+              />
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s6">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Province</p>
+            {wrapperSelect("province_id")(
+              <SelectField
+                fullWidth={true}
+                className={'font-14'}
+              >
+                {province}
+              </SelectField>
+            )}
+          </div>
+          <div className="col s6">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Cities</p>
+            {wrapperSelect("city_id")(
+              <SelectField
+                fullWidth={true}
+                className={'font-14'}
+              >
+                {cities}
+              </SelectField>
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s12">
+            {/* <p className="label-form" style={{marginBottom: -4}}>Phone Number</p> */}
+            {wrapperText("address")(
+              <TextField
+                fullWidth={true}
+                className={'font-14'}
+                hintText="Building name, Street name, etc"
+              />
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s12">
+            {wrapperText("postal_code")(
+              <TextField
+                fullWidth={true}
+                className={'font-14'}
+                type="number"
+                hintText="Post code"
+              />
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s12">
+            <p className="label-form font-14" style={{marginBottom: -4}}>Pin Location (Optional)</p>
+            <div className="pin-picker">
+              <div className="row">
+                <div className="col s1 icon-pin">
+                </div>
+                <div className="col s7 text-pin">
+                  <p>{(this.userAddress.geoData.geoaddress == "" || this.userAddress.geoData.geoaddress == null) ? 'Pin your location on map so you can use services such as Go Send or another delivery services' : this.userAddress.geoData.geoaddress}</p>
+                </div>
+                <div className="col s4 text-pin">
+                  <RaisedButton label="Pick Location" primary={true} fullWidth={true} onClick={this.closeMap}/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s6">
+            {wrapperSwitch("is_default")(
+              <Checkbox
+                label="Set as my default address"
+                labelStyle={{fontSize:14}}
+                style={{marginTop: 20}}
+              />
+            )}
+          </div>
+          <div className="col s6">
+            {wrapperSwitch("is_shipment")(
+              <Checkbox
+                label="Set as store address"
+                labelStyle={{fontSize:14}}
+                style={{marginTop: 20}}
+              />
+            )}
+          </div>
+        </div>
+        <MapDialog openMaps={this.state.openMaps} onClose={this.closeMap} mode={this.props.mode}/>
+      </div>
+    );
+
+  }
+
+}

src/common/pages/Stores/Address/Dialog/map_dialog.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Dialog, FlatButton, RaisedButton,
+  Step,
+  StepLabel,
+  Stepper,
+  IconButton,
+  Paper
+} from "material-ui";
+import Maps from "./maps";
+
+@inject('appstate')
+@observer
+export default class MapDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      stepIndex: 0,
+      finished: false,
+      openedDialog: false,
+      openMaps : false,
+      formData: {},
+      errorMessage: '',
+      default:{
+        is_shipment : true,
+        is_default : true
+      }
+    };
+    this.mapHeight= '500px';
+    this.defaultState = Object.assign({}, this.state);
+    this.globalUI = props.appstate.globalUI;
+    this.userAddress = props.appstate.userAddress;
+  }
+
+  componentDidMount(){
+    this.setState({
+      stepIndex:0
+    });
+  }
+
+  save = () => {
+    this.props.onClose();
+  }
+
+  handleClose = ()=>{
+    if(this.props.mode != 'update'){
+      this.userAddress.setGeoData({
+        geoaddress : null,
+        lat : null,
+        lng : null
+      })
+    }
+    this.props.onClose();
+  }
+
+  componentDidUpdate() {
+  }
+
+  render() {
+
+    const {mapHeight} = this;
+
+    const title =
+      <div>
+        <h4 style={{
+          fontSize: 26,
+          marginBottom: 0,
+          marginTop: 0,
+          fontWeight: 500,
+          color: "black"
+        }}>Pin Location</h4>
+      </div>
+    ;
+
+    return (
+      <div>
+        <Dialog
+          title={<div>
+            <div>{title}</div>
+          </div>}
+          titleStyle={{paddingBottom: 10}}
+          modal={false}
+          actions={<div style={{marginTop: 12}}>
+            <FlatButton
+              label={"Back"}
+              style={{marginRight: 10}}
+              primary={true}
+              onClick={() =>this.handleClose()}
+            />
+            <RaisedButton
+              label={"Save"}
+              style={{marginRight: 10}}
+              primary={true}
+              onClick={() =>this.save()}/>
+            
+          </div>}
+          autoScrollBodyContent={true}
+          repositionOnUpdate={true}
+          open={this.props.openMaps}
+          onRequestClose={this.handleClose}
+          paperClassName={'radius6'}
+          contentClassName={'marketplace-dialog-small'}
+        >
+          <div style={{marginTop: 20}}>
+            <Maps/>
+          </div>
+        </Dialog>
+
+      
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Address/Dialog/maps.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {AutoComplete} from 'material-ui';
+@inject('appstate')
+@observer
+export default class Maps extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      geoaddress : 'RW.10 Menteng Kota Jakarta Pusat'
+    }
+    this.addressStore = props.appstate.userAddress;
+  }
+
+
+  componentDidMount() {
+        const google = window.google;
+        this.map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 12,
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+          center: {
+            lat: -6.206491, 
+            lng: 106.844651
+          },
+          disableDefaultUI: true,
+          zoomControl : true,
+          gestureHandling: 'greedy'
+        });
+
+        var defaultBounds = new google.maps.LatLngBounds(
+          new google.maps.LatLng(-33.8902,151.1759),
+          new google.maps.LatLng(-33.8474,151.2631)
+        );
+
+
+        // Create the search box and link it to the UI element.
+        // this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('pac-input'));
+        var marker= new google.maps.Marker({
+          map : this.map,
+        });
+
+        var geocoder  = new google.maps.Geocoder();
+
+        var input = document.getElementById('pac-input');
+        let autocomplete = new google.maps.places.AutocompleteService();
+
+        google.maps.event.addListener(this.map, 'click', function(event) {
+           let latLng = {
+             lat: event.latLng.lat(),
+             lng: event.latLng.lng(),
+           };
+           
+           // this.markers.push(marker);
+        marker.setPosition(latLng); 
+
+          geocoder.geocode({ location: latLng }, (results, status) => {
+            if (status === 'OK') {
+              // this.setState({
+                // geoaddress: results[0].formatted_address
+              // })
+                setAddress(results[0].formatted_address,latLng)
+              
+            }
+          });
+
+        });
+
+        var setAddress = (la,position)=>{
+          this.setState({
+            geoaddress : la
+          })
+          this.addressStore.setGeoData({
+            geoaddress : la,
+            lat : position.lat,
+            lng : position.lng
+          })
+        }
+
+        this.onChooseAddress = (id)=>{
+          geocoder.geocode({'placeId': id}, (results, status) => {
+              if (status === 'OK') {
+                
+                this.map.fitBounds(results[0].geometry.viewport);
+                this.map.setCenter(results[0].geometry.location);
+                
+                // if(this.marker) {
+                //   this.marker.setMap(null);
+                // }
+
+                // console.log(results[0], 'results');
+                // console.log(results[0].geometry.location, 'location');
+                // console.log(results[0].geometry.location.lat(),results[0].geometry.location.lng(),'location');
+
+                marker.setPosition(results[0].geometry.location);
+
+                this.setState({
+                  geoaddress : results[0].formatted_address
+                });
+
+                this.addressStore.setGeoData({
+                  geoaddress : results[0].formatted_address,
+                  lat : results[0].geometry.location.lat(),
+                  lng : results[0].geometry.location.lng()
+                });
+
+              } else {
+                console.log('Geocode was not successful for the following reason: ' + status);
+              }
+            });
+      }
+
+  }
+
+  render() {
+    return (
+      <div>
+      <AutoComplete
+        hintText="Search location"
+        textFieldStyle={{fontSize: 14, fontWeight: 400}}
+        menuStyle={{
+          fontSize: 12
+        }}
+        searchText={this.addressStore.searchValue}
+        onNewRequest={(choosenRequest, index) => {
+          this.onChooseAddress(choosenRequest.place_id);
+          
+        }}
+        dataSource={this.addressStore.autocompleteData.slice()}
+        filter={() => {
+          return true;
+        }}
+        fullWidth={true}
+        onUpdateInput={(value) => this.addressStore.searchPlaces(value)}
+      />
+        <div
+        id="map"
+        style={{
+          display: 'block',
+          height: '345px',
+          width: "100%",
+          marginBottom: 0,
+          marginLeft: "auto",
+          marginRight: "auto",
+          padding: 20
+        }}>
+        </div>
+        <div style={{height:'50px',width:'100%','background' : '#f8f8f8','display' : 'flex','alignItems' : 'center','justifyContent' : 'center',color : '#000',fontSize : '0.8em',padding : '5px'}}>
+          {this.state.geoaddress}
+        </div>
+
+      </div>
+      );
+  }
+}

src/common/pages/Stores/Address/index.js

@@ -0,0 +1,263 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import bind from 'bind-decorator';
+import {
+  Avatar,
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  AutoComplete,
+  CardText,
+  FlatButton,
+  List,
+  ListItem,
+  Divider,
+  Snackbar,
+  Tabs, Tab,
+  RaisedButton,
+  Toolbar,
+  DatePicker,
+  FontIcon,
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+  MenuItem,
+  Toggle,
+  ToolbarGroup,
+  FloatingActionButton,
+  ToolbarSeparator,
+  IconButton,
+  ToolbarTitle,
+  RadioButton,
+  TextField,
+  Paper,
+  RadioButtonGroup,
+  Dialog,
+  Checkbox,
+} from 'material-ui';
+import {Icon, Button, Tag, Cascader,} from 'antd';
+import {yellow500} from 'material-ui/styles/colors';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+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 DeleteIcon from 'material-ui/svg-icons/action/delete';
+import ImageEdit from 'material-ui/svg-icons/image/edit';
+import EmptyComponent from '../../EmptyComponent';
+import {Link} from 'react-router-dom';
+import {LINKS} from "../../../routes";
+import './style.scss';
+import {appConfig} from "../../../config/app";
+import NumberFormat from 'react-number-format';
+import LoadingDialog from "../../LoadingDialog";
+import Loader from 'react-loader-advanced';
+import AddressAdd from './Dialog/AddAddress';
+import {DIALOG} from "../../../stores/global_ui";
+
+@inject('appstate')
+@observer
+export default class AddressComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      open: false,
+      mode: 'create',
+      defaultValue: {}
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.globalUI = props.appstate.globalUI;
+    this.userAddress = props.appstate.userAddress;
+    this.userData = props.appstate.userData;
+  }
+
+  componentDidMount() {
+    if(this.userData.role == 'store') {
+      this.userAddress.getAllAddress();
+      console.log(this.userAddress.address[0])
+
+    }
+    else if(this.userData.role == 'administrator') {
+      console.log(this.props.id, 'ini address id');
+      this.userAddress.getAllAddressAdmin(this.props.id);
+    }
+
+
+  }
+
+  handleOpen = () => {
+    this.setState({open: true});
+  };
+
+  handleClose = () => {
+    this.setState({open: false});
+  };
+
+  handleOpenDialog = () => {
+    this.setState({mode: 'create', defaultValue: {is_shipment: true, is_default: true}});
+    this.globalUI.showDialog(DIALOG.ADDRESS.CREATE);
+  };
+
+  updateAddress = (index) => {
+    this.setState({
+      mode: 'update',
+      defaultValue: this.userAddress.address[index]
+    });
+    this.globalUI.showDialog(DIALOG.ADDRESS.CREATE);
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        label="Cancel"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+      <RaisedButton
+        label="Create"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+    ];
+
+    return (
+      <div className="row">
+        <AddressAdd id={this.props.id} mode={this.state.mode} defaultValue={this.state.defaultValue}/>
+        <div className="col l12 m12 s12">
+          <Card className="animated fadeIn cardLite">
+            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+              <ToolbarGroup>
+                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Address'}/>
+              </ToolbarGroup>
+              {/*<ToolbarGroup className="ToolbarGroupLast">*/}
+              {/*<ToolbarSeparator/>*/}
+              {/*<RaisedButton onClick={() => this.handleOpenDialog()} className="ToolbarGroupLastButton"*/}
+              {/*icon={<AddIcon/>} label="New Address" primary={true}/>*/}
+              {/*</ToolbarGroup>*/}
+            </Toolbar>
+            <Divider/>
+            <div style={{padding: 15}}>
+              <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
+                      messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
+                <div className='row no-margin'>
+                  <div className="col l4 m3 s12" onClick={() => this.handleOpenDialog()}>
+                    <div className="flex add-new"
+                         style={{
+                           flexDirection: 'column',
+                           alignItems: 'center',
+                           justifyContent: 'center',
+                           height: "172.5px"
+                         }}>
+                      <div>
+                        <FontIcon className="material-icons icon-add ">add</FontIcon>
+                      </div>
+                      Add new address
+                    </div>
+                  </div>
+                  {this.userAddress.address.map((data, index) => (
+                    <a onClick={() => this.updateAddress(index)}>
+                    <div style={{marginBottom: 10}} className='col l4 m4 s12 marketplace-container-address'>
+                      <List className='no-padding'>
+                        <ListItem
+                          disabled={true}
+                          className='marketplace-list-threeLines'
+                          style={{height: 170, }}
+                          hoverColor={'transparent'}
+                          // leftIcon={<i className="material-icons">location_on</i>}
+                          // leftAvatar={<Avatar
+                          //   icon={<i className="material-icons" style={{fontSize: 25}}>location_on</i>}/>}
+                          primaryText={
+                            <div className="first-row"  style={{marginTop: (data.is_default || data.is_shipment) ? -13 : 0}}>
+                              <a style={{display: 'inline-block'}} onClick={() => this.updateAddress(index)} className="address-name btnFlatUnderline">{_.capitalize(data.name)}</a>
+                              <div style={{marginLeft: 10, display: 'inline-block'}} className="address-status">
+                                {(data.is_default) && <Tag color="green" className="marketplace-tag-small">Main Address</Tag>}
+                                {(data.is_shipment) && <Tag color="geekblue" className="marketplace-tag-small">Store Address</Tag>}
+                              </div>
+                            </div>}
+                          secondaryText={
+                            <div className="second-row" style={{overflow:'visible',whiteSpace: 'normal !important'}}>
+                              <p className="no-margin font-12 address-phone">{data.phone_number}</p>
+                              <span>{data.address}</span><br/>
+                              <span className="address text-capitalize font-12">
+                            {_.capitalize(data.city.type + ' ' + data.city.name)}
+                          </span> - <span className="address text-capitalize font-12">
+                      {_.capitalize(data.province.name)}
+                      </span> <br/><span className="address text-capitalize font-12">
+                      {data.postal_code}
+                      </span>
+
+                            </div>
+                          }
+                        />
+
+                      </List>
+                      {/*<div className="row" style={{paddingTop: 10}}>*/}
+                      {/*<div className="col s1">*/}
+                      {/*<i className="material-icons" style={{fontSize: 25}}>location_on</i>*/}
+                      {/*</div>*/}
+                      {/*<div className=" col s10">*/}
+                      {/*<div className="address-section">*/}
+                      {/*<div className="first-row">*/}
+                      {/*<span className="address-name">*/}
+                      {/*{_.capitalize(data.name)}*/}
+                      {/*</span>*/}
+                      {/*<span className="address-status">*/}
+                      {/*{(data.is_default) ? <Tag color="#87d068">Main Address</Tag> : ""}*/}
+                      {/*{(data.is_shipment) ? <Tag color="#108ee9">Store Address</Tag> : ""}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+
+                      {/*<div className="second-row">*/}
+                      {/*<span className="phone-number">*/}
+                      {/*{data.phone_number}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+
+                      {/*<div className="third-row">*/}
+                      {/*<span className="address">*/}
+                      {/*{data.address}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+
+                      {/*<div className="fourth-row">*/}
+                      {/*<span className="address text-capitalize">*/}
+                      {/*{_.capitalize(data.city.type + ' ' + data.city.name)}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+
+                      {/*<div className="fifth-row">*/}
+                      {/*<span className="address text-capitalize">*/}
+                      {/*{_.capitalize(data.province.name)}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+
+                      {/*<div className="sixth-row">*/}
+                      {/*<span className="address">*/}
+                      {/*Post Code {data.postal_code}*/}
+                      {/*</span>*/}
+                      {/*</div>*/}
+                      {/*</div>*/}
+                      {/*</div>*/}
+                      {/*<div className="col s1" style={{textAlign: 'right'}}>*/}
+                      {/*<Button shape="circle" icon="edit" size={20} onClick={() => this.updateAddress(index)}/>*/}
+                      {/*</div>*/}
+                      {/*</div>*/}
+                    </div>
+                    </a>
+                  ))}
+                </div>
+              </Loader>
+            </div>
+          </Card>
+        </div>
+
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Address/style.scss

@@ -0,0 +1,123 @@
+.address-section{
+    margin-left: -35px;
+
+    .second-row{
+        padding-top: 5px;
+        .phone-number{}
+    }
+    .third-row{
+        padding-top: 5px;
+        .address{}
+    }
+    .fourth-row{
+        padding-top: 5px;
+        .address{}
+    }
+    .fifth-row{
+        padding-top: 5px;
+        .address{}
+    }
+    .sixth-row{
+        padding-top: 5px;
+        .address{}
+    }
+}
+
+.first-row{
+  margin-bottom: 8px;
+  .address-name{
+    font-weight: 500;
+    padding-bottom: 2px;
+  }
+  .address-status{
+    margin-top: 12px;
+  }
+
+  .marketplace-tag-small {
+    line-height: 16px !important;
+    height: 18px !important;
+    font-size: .63rem;
+  }
+}
+
+.address-phone {
+  color: #3E4B5B;
+  font-size: .7rem !important;
+  margin-bottom: 4px !important;
+
+}
+
+.marketplace-list-threeLines {
+  padding: 16px 16px 16px !important;
+}
+
+.marketplace-list-threeLines .second-row {
+  height: 52px !important;
+  -webkit-line-clamp: 3 !important;
+
+}
+
+.marketplace-container-address{
+  border: 2px solid #f6f6f6;
+  border-radius: 4px;
+}
+
+
+
+.cascader-address{
+    z-index: 9999999999999999999999999999999999999999 !important;
+    color: #aaa;
+}
+
+.pin-picker {
+  background: #f2f2f2 url('/assets/images/bg-map.png') no-repeat center center;
+  width: 100%;
+  height: 75px;
+  background-size: cover;
+  margin : 10px auto 0px;
+  border : 1px solid #e0e0e0;
+  border-radius: 2px;
+}
+
+.icon-pin{
+  height: 75px;
+  background: url('/assets/images/icon-pin.png') no-repeat center center;
+  background-size: 18px 25px;
+}
+
+.text-pin{
+  font-size: 0.8em;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text-pin p{
+  margin: 0;
+}
+
+.controls {
+  margin-top: 10px;
+  border: 1px solid transparent;
+  border-radius: 2px 0 0 2px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  height: 32px;
+  outline: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+#pac-input {
+  background-color: #fff;
+  font-size: 15px;
+  font-weight: 300;
+  margin-left: 12px;
+  padding: 0 11px 0 13px;
+  text-overflow: ellipsis;
+  width: 300px;
+}
+
+#pac-input:focus {
+  border-color: #4d90fe;
+}

src/common/pages/Stores/Bank/Dialog/AddDialog.js

@@ -0,0 +1,299 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Dialog, FlatButton, RaisedButton,
+  Step,
+  StepLabel,
+  Stepper,
+  IconButton
+} from "material-ui";
+import {DIALOG} from "../../../../stores/global_ui";
+import BankInformation from './BankInformation';
+import schema from 'async-validator'
+
+@inject('appstate')
+@observer
+export default class BankAddDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      stepIndex: 0,
+      finished: false,
+      openedDialog: false,
+      formData: {},
+      errorMessage: ''
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.globalUI = props.appstate.globalUI;
+    this.userBanks = props.appstate.userBanks;
+    this.userData = props.appstate.userData;
+  }
+
+  componentDidMount() {
+    this.setState({
+      stepIndex: 0
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({stepIndex: 0, formData: nextProps.defaultValue});
+  }
+
+  getStepContent(stepIndex) {
+
+    const {mode = "create", defaultValue = {}} = this.props;
+
+    switch (stepIndex) {
+      case 0:
+        return (
+          <BankInformation
+            mode={mode}
+            defaultValue={defaultValue}
+            onChangeData={formData => this.setState({formData})}/>
+        );
+      // case 1:
+      // return <IdentificationPassport/>;
+    }
+  }
+
+  handleOpen = () => {
+    this.setState({confirmationDialog: true})
+  };
+
+  handleNext = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex === 0) {
+
+      const rules = {
+        on_behalf: [
+          {
+            required: true,
+            message: "Please fill on behalf"
+          },
+          {
+            type: 'string',
+            message: 'On behalf must be alphabet only'
+          }
+        ],
+        account_number: [
+          {
+            required: true,
+            message: 'Please fill first name',
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: 'Please enter a bank name',
+          }
+        ]
+      };
+
+      const validator = new schema(rules);
+      console.log(this.state.formData);
+      validator.validate(this.state.formData, (errs, f) => {
+        console.log(errs);
+
+        if (errs) {
+          this.globalUI.showNotification("Something's Wrong", errs[0].message);
+        } else {
+          this.setState({
+            stepIndex: stepIndex + 1,
+          });
+        }
+      });
+    }
+  }
+
+  handlePrev = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex > 0) {
+      this.setState({stepIndex: stepIndex - 1});
+    }
+  }
+
+  save = () => {
+    this.globalUI.hideDialog(DIALOG.STORES.CREATE);
+    this.globalUI.showDialogLoading();
+    const {mode = "create", defaultValue = {}} = this.props;
+
+    if(this.userData.role === 'store') {
+      if (mode === "create") {
+        // console.log(this.state.formData);
+        this.userBanks.addBank(this.state.formData).then(res => {
+          this.globalUI.openSnackbar('Successfully add new bank');
+        }).catch((err) => {
+          console.log(err);
+          this.globalUI.closeLoading();
+        })
+      } else if (mode === "update") {
+        this.userBanks.updateBank(this.state.formData).then(res => {
+          this.globalUI.openSnackbar('Successfully update bank');
+        }).catch(err => {
+          console.log(err);
+          this.globalUI.openSnackbar('Something Error');
+        })
+        // this.employeeStore.update(defaultValue.id, this.state.formData)
+        //   .then(res => {
+        //     // this.globalUI.hideDialog(DIALOG.STORES.CREATE);
+        //     this.globalUI.hideDialogLoading();
+        //     this.globalUI.openSnackbar("Success Updated New Employee")
+        //     this.setState({
+        //       stepIndex: 0
+        //     })
+        //     // this.employeeStore.getAll();
+        //   })
+        //   .catch(err => {
+        //     console.error(err);
+        //   });
+      }
+    }
+    else if(this.userData.role === 'administrator') {
+      if (mode === "create") {
+        // console.log(this.state.formData);
+        this.userBanks.addBankAdmin(this.props.id,this.state.formData).then(res => {
+          this.globalUI.openSnackbar('Successfully add new bank');
+          console.log(this.props.id);
+        }).catch((err) => {
+          console.log(err);
+          this.globalUI.closeLoading();
+        })
+      } else if (mode === "update") {
+        this.userBanks.updateBankAdmin(this.props.id,this.state.formData).then(res => {
+          this.globalUI.openSnackbar('Successfully update bank');
+        }).catch(err => {
+          console.log(err);
+          this.globalUI.openSnackbar('Something Error');
+        })
+        // this.employeeStore.update(defaultValue.id, this.state.formData)
+        //   .then(res => {
+        //     // this.globalUI.hideDialog(DIALOG.STORES.CREATE);
+        //     this.globalUI.hideDialogLoading();
+        //     this.globalUI.openSnackbar("Success Updated New Employee")
+        //     this.setState({
+        //       stepIndex: 0
+        //     })
+        //     // this.employeeStore.getAll();
+        //   })
+        //   .catch(err => {
+        //     console.error(err);
+        //   });
+      }
+    }
+
+  }
+
+  handleClose = () => {
+    this.setState({confirmationDialog: false, formData: {}})
+  };
+
+  handlePost = () => {
+    // this.agentStore.post().then(res => {
+    //   this.props.history.push(LINKS.SETTING);
+    //   this.globalUI.openSnackbar("Successfull Added Employee");
+    // });
+  };
+
+  continueButton() {
+    if (this.state.stepIndex === 1) {
+      return (
+        <RaisedButton
+          label="Finish"
+          primary={true}
+          onClick={this.save}
+        />
+      );
+    } else {
+      return (
+        <RaisedButton
+          label="Next"
+          primary={true}
+          onClick={this.handleNext}
+        />
+      );
+    }
+  }
+
+  render() {
+
+    const {finished, stepIndex} = this.state;
+    const {mode = "create", defaultValue = {}} = this.props;
+
+    const actions = [
+      <RaisedButton
+        label="OK"
+        primary={true}
+        style={{marginRight: 10}}
+        onClick={this.handleClose}
+      />,
+    ];
+
+    const title =
+      <div>
+        <h4 style={{
+          fontSize: 26,
+          marginBottom: 0,
+          marginTop: 0,
+          fontWeight: 500,
+          color: "black"
+        }}>{(mode === "create") ? "Add New" : "Update"} Bank Account</h4>
+      </div>
+    ;
+
+    return (
+      <div>
+        <Dialog
+          title={<div>
+            <div>{title}</div>
+            <div style={{padding: "0px 14px 0px 0px", marginTop: 10}}>
+              {/*<Stepper activeStep={stepIndex}>*/}
+              {/*<Step>*/}
+              {/*<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Bank Account</StepLabel>*/}
+              {/*</Step>*/}
+              {/*/!* <Step>*/}
+              {/*<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>*/}
+              {/*</Step> *!/*/}
+              {/*</Stepper>*/}
+            </div>
+          </div>}
+          titleStyle={{paddingBottom: 10}}
+          modal={false}
+          actions={<div style={{marginTop: 12}}>
+            <FlatButton
+              label={(stepIndex === 0) ? "Cancel" : "Back"}
+              style={{marginRight: 10}}
+              primary={true}
+              onClick={() => (stepIndex === 0) ? this.globalUI.hideDialog(DIALOG.STORES.CREATE) : this.handlePrev()}
+            />
+            {this.continueButton()}
+          </div>}
+          autoScrollBodyContent={true}
+          repositionOnUpdate={true}
+          open={this.globalUI[DIALOG.STORES.CREATE]}
+          onRequestClose={this.handleClose}
+          style={{zIndex: 999}}
+          paperClassName={'radius6'}
+          contentClassName={'marketplace-dialog-small'}
+        >
+          <div style={{marginTop: 20}}>
+            {this.getStepContent(stepIndex)}
+          </div>
+        </Dialog>
+
+        <Dialog
+          title="Warning"
+          actions={actions}
+          modal={false}
+          autoScrollBodyContent={false}
+          contentStyle={{width: 350}}
+          open={this.state.confirmationDialog}
+          onRequestClose={() => this.handleClose()}
+        >
+          {this.state.errorMessage}
+        </Dialog>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Bank/Dialog/BankInformation.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {DatePicker, MenuItem, SelectField, TextField, Checkbox,} from 'material-ui';
+// import '../../Service/style.scss';
+
+@inject('appstate')
+@observer
+export default class BankInformation extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      formData: Object.assign({}, props.defaultValue, {}) || {},
+      checked: true
+    };
+    this.http = props.appstate.http;
+    this.text = new RegExp(/^[a-zA-Z\s]*$/);
+    this.phone = new RegExp(/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{12})([0-9]{8}|\s*)$/);
+    this.re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  }
+
+  componentDidMount() {
+    this.setState({
+      formData: Object.assign({}, this.props.defaultValue, {}) || {}
+    })
+  }
+
+
+  triggerOnChange() {
+    if (this.props.onChangeData && typeof this.props.onChangeData === 'function') {
+      this.props.onChangeData(this.state.formData);
+    }
+  }
+
+  render() {
+
+    const wrapperText = key => ele => React.cloneElement(ele, {
+      value: this.state.formData[key],
+      onChange: (e, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+    const wrapperSelect = key => ele => React.cloneElement(ele, {
+      value: this.state.formData[key],
+      onChange: (e, k, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        }, () => this.triggerOnChange());
+      }
+    });
+
+    const {mode = "create"} = this.props;
+
+    return (
+      <div style={{
+        paddingTop: 10
+      }}>
+        <div className="row">
+          <div className="col s5 m5 l6">
+            <div>
+              <p className="label-form font-14 no-margin">On Behalf</p>
+              {wrapperText("on_behalf")(
+                <TextField
+                  fullWidth={true}
+                  className={'font-14'}
+                  hintText="E.g. Michael"/>
+              )}
+            </div>
+          </div>
+
+          <div className="col s5 m5 l6">
+            <div>
+              <p className="label-form font-14 no-margin">Bank Name</p>
+              {wrapperText("name")(
+                <TextField
+                  fullWidth={true}
+                  className={'font-14'}
+                  hintText="E.g. BCA"/>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col s12 m12 l12">
+            <div>
+              <p className="label-form font-14 no-margin">Account Number</p>
+              {wrapperText("account_number")(
+                <TextField
+                  fullWidth={true}
+                  className={'font-14'}
+                  type="number"
+                  hintText="E.g. 123456789"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    );
+
+  }
+
+}

src/common/pages/Stores/Bank/index.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  AutoComplete,
+  CardText,
+  FlatButton,
+  List,
+  ListItem,
+  Divider,
+  Snackbar,
+  Tabs, Tab,
+  RaisedButton,
+  Toolbar,
+  DatePicker,
+  FontIcon,
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+  MenuItem,
+  Toggle,
+  ToolbarGroup,
+  FloatingActionButton,
+  ToolbarSeparator,
+  IconButton,
+  ToolbarTitle,
+  RadioButton,
+  TextField,
+  Paper,
+  RadioButtonGroup
+} from 'material-ui';
+import * as _ from 'lodash';
+import "./style.scss";
+import AddDialog from "./Dialog/AddDialog";
+import {DIALOG} from "../../../stores/global_ui";
+import {Button} from 'antd';
+
+@inject('appstate')
+@observer
+export default class BankComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      bank: [{
+        bank_name: 'bca',
+        account_number: '0660990135',
+        on_behalf: 'Tsabit Ghazwan'
+      },
+        {
+          bank_name: 'bca',
+          account_number: '0660983333',
+          on_behalf: 'Hasta Ragil'
+        }
+      ],
+      mode: 'create',
+      defaultValue: {}
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.globalUI = props.appstate.globalUI;
+    this.userBanks = props.appstate.userBanks;
+    this.userData = props.appstate.userData;
+  }
+
+  componentDidMount() {
+
+
+    if(this.userData.role == 'store') {
+      this.userBanks.getAllBanks();
+    }
+    else if(this.userData.role == 'administrator') {
+      this.userBanks.getAllBanksAdmin(this.props.id);
+    }
+  }
+
+  handleOpenDialog = () => {
+    this.setState({mode: 'create', defaultValue: {}});
+    this.globalUI.showDialog(DIALOG.STORES.CREATE);
+  }
+
+  editAccount = (index) => {
+    this.setState({
+      mode: 'update',
+      defaultValue: this.userBanks.banks[index]
+    });
+    this.globalUI.showDialog(DIALOG.STORES.CREATE);
+  }
+
+  render() {
+
+    return (
+      <div className="row">
+        <AddDialog id={this.props.id}mode={this.state.mode} defaultValue={this.state.defaultValue}/>
+        <div className="col l12 m12 s12">
+          <Card className="animated fadeIn cardLite">
+            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+              <ToolbarGroup>
+                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Card / Bank Account'}/>
+              </ToolbarGroup>
+            </Toolbar>
+            <Divider/>
+
+
+            <div style={{padding: 15}} className="bank">
+              <div className="row">
+                <div className="col l4 m3 s12" onClick={() => this.handleOpenDialog()}>
+                  <div className="flex add-new"
+                       style={{
+                         flexDirection: 'column',
+                         alignItems: 'center',
+                         justifyContent: 'center',
+                         height: "172.5px"
+                       }}>
+                    <div>
+                      <FontIcon className="material-icons icon-add ">add</FontIcon>
+                    </div>
+                    Add new bank account
+                  </div>
+                </div>
+
+                {this.userBanks.banks.map((val, index) => (
+                  <div className="col l4 m3 s12 "
+                       onClick={() => this.editAccount(index)}>
+                    <div className="account cardLite">
+                      <div className="header"></div>
+                      <div className="row bank_info">
+                        <div className=" col l4 m4 s4 bank_logo">
+                          <div className=""></div>
+                        </div>
+                        <div className=" col l8 m8 s8 bank_name">
+                          <div className="">{_.toUpper(val.name)}</div>
+                        </div>
+                      </div>
+
+                      <div className="name">
+                        <p className="no-margin"><code className="item">***** {val.account_number.substr(4)}</code>
+                        </p>
+                        <p><code className="item">{val.on_behalf}</code></p>
+                      </div>
+
+                    </div>
+                  </div>
+
+                ))}
+
+                {/*<div className="col l4 m3 s12 add-new" onClick={() => this.handleOpenDialog()}>*/}
+                {/**/}
+                {/*<div className="button-add">*/}
+                {/*<FontIcon className="material-icons"*/}
+                {/*style={{color: 'white', fontSize: '3.5em', marginTop: 5}}>add</FontIcon>*/}
+                {/*</div>*/}
+                {/*Add new bank account*/}
+                {/*</div>*/}
+
+                {/*{this.userBanks.banks.map((val, index) => (*/}
+                {/*<div className="col l4 m3 s12 account marketplace-container-bank"*/}
+                {/*onClick={() => this.editAccount(index)}>*/}
+                {/*<div className="header"></div>*/}
+                {/*<div className="row bank_info">*/}
+                {/*<div className="bank_logo col l4 m4 s4">*/}
+                {/*</div>*/}
+                {/*<div className="bank_name col l8 m8 s8">{_.toUpper(val.name)}*/}
+                {/*</div>*/}
+                {/*</div>*/}
+                {/*<div className="row">*/}
+                {/*<div className="name">*/}
+                {/*<p><code className="item">***** {val.account_number.substr(4)}</code></p>*/}
+                {/*<p><code className="item">{val.on_behalf}</code></p>*/}
+                {/*</div>*/}
+                {/*</div>*/}
+                {/*</div>*/}
+
+                {/*))}*/}
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    )
+  }
+}
+

src/common/pages/Stores/Bank/style.scss

@@ -0,0 +1,71 @@
+.bank {
+  overflow: hidden;
+
+
+  .account {
+    height: 172.5px;
+    border-radius: 5%;
+    cursor: pointer;
+    padding: 0 !important;
+
+    .header {
+      height: 33.3%;
+      background: #2b3991;
+      border-radius: 4px 4px 0 0;
+    }
+
+    .bank_info {
+      position: relative;
+      bottom: 50px;
+      padding: 15px;
+      margin:0 !important;
+      .bank_logo {
+        height: 60px;
+        width: 60px;
+        background: #f2f5fa;
+        border-radius:4px;
+      }
+      .bank_name {
+        color: white;
+        font-size: 14px;
+        padding-top: 10px;
+      }
+    }
+
+    .name {
+      position: relative;
+      bottom: 40px;
+      padding: 15px;
+      .item {
+        font-size: 14px;
+        line-height: 10px;
+      }
+    }
+  }
+
+  .button-add {
+    width: 4.8rem;
+    height: 4.8rem;
+    text-align: center;
+    border-radius: 100%;
+    background: #00bfa5;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    padding: 10px;
+
+
+  }
+}
+
+.icon-add {
+  font-size: 2.5em !important;
+  color: white !important;
+  background: #00bfa5;
+  border-radius: 100%;
+}
+
+.marketplace-container-bank {
+  border: 2px solid #f6f6f6;
+  border-radius: 4px;
+}

src/common/pages/Stores/Delivery/CardDelivery.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Card, CardHeader, CardText, Divider, Toggle,} from 'material-ui';
+
+@inject('appstate')
+@observer
+export class CardDelivery extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {};
+    this.defaultState = Object.assign({}, this.state);
+
+    this.myStore = props.appstate.myStore;
+    this.myStoreShippingMethod = props.appstate.myStoreShippingMethod;
+
+  }
+
+  componentDidMount() {
+    console.log('CardDelivery loaded!')
+  }
+
+  updateShippingMethod(v) {
+    if (v) {
+      this.myStoreShippingMethod.create({shipping_method_id: this.props.data.id});
+    } else {
+      this.myStoreShippingMethod.delete(this.props.data.id);
+    }
+  }
+
+  render() {
+    const {data={}} = this.props;
+    return (
+      <Card className="marketplace-cardLite cardDashboard marketplace-card-delivery">
+        <CardHeader
+          title={data.name}
+          actAsExpander={true}
+          showExpandableButton={true}
+        />
+        <CardText expandable={true}>
+          <Divider/>
+          <div className='row'>
+            <div className='col s8' style={{paddingTop: 15}}>
+              <div className='left-section'>
+                {data.description}
+              </div>
+            </div>
+            <div className='col s4' style={{paddingTop: 15}}>
+              <div className='right-section'>
+                <div className='row'>
+                  <div className='col s9' style={{textAlign: 'left'}}>
+                    <p className='text-delivery'>
+                      Activate this Delivery Service
+                    </p>
+                  </div>
+                  <div className='col s3' style={{textAlign: 'right'}}>
+                    <Toggle
+                      toggled={this.myStoreShippingMethod.isActivated(data.id)}
+                      disabled={this.myStoreShippingMethod.isLoading}
+                      onToggle={(e, checked) => this.updateShippingMethod(checked)}
+                      className='toggle-delivery'/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardText>
+      </Card>
+    )
+  }
+}

src/common/pages/Stores/Delivery/index.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  Card,
+  CardHeader,
+  CardText,
+  Dialog,
+  Divider,
+  FlatButton,
+  IconButton,
+  RaisedButton,
+  TextField,
+  Toggle,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarTitle,
+} from 'material-ui';
+import {Icon} from 'antd';
+import './style.scss';
+import {CardDelivery} from "./CardDelivery";
+
+@inject('appstate')
+@observer
+export default class DeliveryComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      open: false
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+
+    this.shippingMethod = props.appstate.shippingMethod;
+    this.myStoreShippingMethod = props.appstate.myStoreShippingMethod;
+  }
+
+  componentDidMount() {
+    this.shippingMethod.getAll();
+    this.myStoreShippingMethod.getAll();
+  }
+
+  handleOpen = () => {
+    this.setState({open: true});
+  };
+
+  handleClose = () => {
+    this.setState({open: false});
+  };
+
+  render() {
+    const actions = [
+      <FlatButton
+        label="Cancel"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+      <RaisedButton
+        label="Update"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+    ];
+
+    return (
+      <div className='store-delivery'>
+        <div className="row">
+          <div className="col l12 m12 s12">
+            <Card className="animated fadeIn marketplace-cardLite">
+              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                <ToolbarGroup>
+                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Delivery Service'}/>
+                </ToolbarGroup>
+                {/* <ToolbarGroup className="ToolbarGroupLast">
+                <ToolbarSeparator/>
+                <Link to={LINKS.USER}>
+                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
+                </Link>
+              </ToolbarGroup> */}
+              </Toolbar>
+              <Divider/>
+              <div style={{padding: 20}}>
+              <span className='delivery-description'>
+                With Our Supported Send Services, Buyers will be updated on their package tracking.
+              </span>
+              </div>
+            </Card>
+
+            <div className='row' style={{marginTop: 25}}>
+              {this.shippingMethod.data.map(sm => {
+                return <CardDelivery key={sm.id} data={sm}/>
+              })}
+            </div>
+            <Card className="marketplace-cardLite cardDashboard " style={{marginTop: 25}}>
+              <Toolbar className="radius4" style={{backgroundColor: '#fff'}}>
+                <ToolbarGroup>
+                  <CardHeader
+                    title="Sent in"
+                    subtitle="Change the number of days 'Sent in' for all products in your store."
+                    avatar={<Icon type="calendar" style={{fontSize: 25, color: '#555'}}/>}
+                    style={{marginLeft: -15}}
+                  />
+                </ToolbarGroup>
+                <ToolbarGroup className="ToolbarGroupLast">
+                  {/* <ToolbarSeparator/> */}
+                  {/* <Button onClick={() => this.handleOpen()}>Edit</Button> */}
+                  <RaisedButton onClick={() => this.handleOpen()} label="Edit"/>
+                </ToolbarGroup>
+              </Toolbar>
+            </Card>
+          </div>
+
+
+          <Dialog
+            title={
+              <div className="row">
+                <div className="col s11">
+                  <p style={{fontSize: 20, color: '#000'}}>
+                    Mass Update "Sent in"
+                  </p>
+                </div>
+                <div className="col s1">
+                  <IconButton
+                    iconClassName="material-icons"
+                    tooltip="Close"
+                    onClick={() => this.handleClose()}
+                    style={{marginTop: -5}}
+                  >
+                    close
+                  </IconButton>
+                </div>
+              </div>
+            }
+            actions={actions}
+            modal={true}
+            open={this.state.open}
+            onRequestClose={this.handleClose}
+            autoScrollBodyContent={true}
+          >
+            <div style={{paddingLeft: 16, paddingRight: 16}}>
+              <div className="row">
+                The features below can be used to change the amount of time "Sent in" for all products in your store.
+                You can change the "Sent in" time for 3 days for ready stock product or more than 7 days
+                for products with Pre-Order status.
+              </div>
+              <div className="row">
+                <p className="label-form" style={{marginBottom: -4}}>Sent in</p>
+                <TextField
+                  hintText="in days"
+                  defaultValue={`3`}
+                  fullWidth={true}
+                  onChange={(event) => console.log(event.target.value)}
+                />
+              </div>
+            </div>
+          </Dialog>
+        </div>
+
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Delivery/style.scss

@@ -0,0 +1,20 @@
+.store-delivery {
+
+  .left-section {
+    border-right: 1px solid #ccc;
+    // width: 2px;
+    padding-right: 25px;
+    height: 100%;
+  }
+  .right-section {
+    padding-top: 15px;
+  }
+  .toggle-delivery {
+    margin-top: -2px;
+  }
+
+  .marketplace-card-delivery {
+    margin-bottom: 5px;
+  }
+
+}

src/common/pages/Stores/Penalty/index.js

@@ -0,0 +1,223 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Card,
+  CardText,
+  Divider,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarTitle,
+} from 'material-ui';
+import {Icon, Table, Slider, Affix} from 'antd';
+import {LineChart, Line, XAxis, YAxis, ReferenceLine, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import './style.scss';
+import moment from 'moment';
+
+@inject('appstate')
+@observer
+export default class PenaltyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+  }
+
+  componentDidMount() {
+    
+  }
+
+  render() {
+    const marks = {
+      0: {
+        style: {
+          color: '#5cb85c'
+        },
+        label: <p className="mark-start">0 Pts</p>
+      },
+      5: {
+        style: {
+          color: '#5cb85c'
+        },
+        label: <p className="mark-start">5</p>
+      },
+      100: {
+        style: {
+          color: '#d9534f',
+        },
+        label: <p className="mark-end">100 Pts</p>,
+      },
+    };
+
+    const data = [
+      {name: 'January', Points: 40},
+      {name: 'February', Points: 30},
+      {name: 'March', Points: 20},
+      {name: 'April', Points: 27},
+      {name: 'May', Points: 18},
+      {name: 'June', Points: 23},
+      {name: 'July', Points: 34},
+      {name: 'August', Points: 25},
+      {name: 'September', Points: 21},
+      {name: 'October', Points: 40},
+      {name: 'November', Points: 23},
+      {name: 'December', Points: 5},
+    ];
+
+    const columns = [{
+      title: 'Date',
+      dataIndex: 'date',
+      key: 'date',
+    }, {
+      title: 'Type',
+      dataIndex: 'type',
+      key: 'type',
+    }, {
+      title: 'Explanation',
+      dataIndex: 'explanation',
+      key: 'explanation',
+    }, {
+      title: 'Points',
+      dataIndex: 'pts',
+      key: 'pts',
+    }];
+
+    const dataTable = [{
+      key: '1',
+      date: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    }, {
+      key: '2',
+      name: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    }, {
+      key: '3',
+      name: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    },{
+      key: '4',
+      date: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    }, {
+      key: '5',
+      name: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    }, {
+      key: '6',
+      name: moment().format('MMMM Do YYYY'),
+      type: 'Lorem',
+      explanation: 'Lorem Ipsum Dolor Sit Amet',
+      pts: 25
+    }];
+
+
+    return (
+        <div className="">
+          <div className={"row"}>
+            <Card className="animated fadeIn cardLite">
+              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                <ToolbarGroup>
+                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Penalty Point System'}/>
+                </ToolbarGroup>
+                {/* <ToolbarGroup className="ToolbarGroupLast">
+                  <ToolbarSeparator/>
+                  <Link to={LINKS.USER}>
+                    <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
+                  </Link>
+                </ToolbarGroup> */}
+              </Toolbar>
+              <Divider/>
+              <div style={{padding: 15}}>
+                <p className="penalty-description">
+                  Penalty Point Systems are point-based systems designed to reward Sellers who have good store performance,
+                  in order to be the primary choice of Buyers versus Sellers with poor store performance.
+                </p>
+              </div>
+            </Card>
+          </div>
+
+          {/*<div className={"row"}>*/}
+            {/*<Card className="cardLite cardDashboard" style={{marginTop: 25}}>*/}
+              {/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff', marginTop: -15, marginLeft: -8}}>*/}
+                {/*<ToolbarGroup>*/}
+                  {/*<CardHeader*/}
+                    {/*title="Your Points"*/}
+                    {/*subtitle="Your statistic for last 3 months."*/}
+                    {/*avatar={<Icon type="wallet" style={{ fontSize: 25, color: '#555' }}/>}*/}
+                    {/*style={{marginLeft: -15}}*/}
+                  {/*/>*/}
+                {/*</ToolbarGroup>*/}
+              {/*</Toolbar>*/}
+            {/*</Card>*/}
+          {/*</div>*/}
+          <div className="row">
+            <div className="col s12 m6 l6 left-section">
+              <Card className="animated fadeIn cardLite">
+                <CardText>
+                  <div className="body-card">
+                    <div className="slider-status">
+                      <p className="text-title">
+                        Very Good
+                      </p>
+                      <p className="text-content">
+                        Your store performance is very good - just few penalty points are earned.
+                        Maintain the performance of your store!
+                      </p>
+                    </div>
+                    <div className="slider">
+                      <Slider marks={marks} defaultValue={5} disabled={true} />
+                    </div>
+                  </div>
+                </CardText>
+              </Card>
+
+              <Card className="animated fadeIn cardLite table">
+                <CardText>
+                  <div className="body-card">
+                    <Table columns={columns} dataSource={dataTable} />
+                  </div>
+                </CardText>
+              </Card>
+            </div>
+            <div className="col s12 m6 l6 right-section">
+              <Affix offsetTop={85}>
+                <Card className="animated fadeIn cardLite">
+                  <CardText>
+                    <div className="body-card">
+                      <p className={"chart-title"}>
+                        This is the penalty point you have earned on this year
+                      </p>
+                      <ResponsiveContainer width={"100%"} height={300}>
+                        <LineChart margin={{top: 0, right: 0, left: -35, bottom: 0}} data={data}>
+                          <XAxis dataKey="name"/>
+                          <YAxis/>
+                          <CartesianGrid strokeDasharray="3 3"/>
+                          <Tooltip/>
+                          <Legend />
+                          <ReferenceLine y={100} label="Max Points" stroke="red"/>
+                          <Line type="monotone" dataKey="Points" stroke="#82ca9d" />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    </div>
+                  </CardText>
+                </Card>
+              </Affix>
+            </div>
+          </div>
+        </div>
+    )
+  }
+}

src/common/pages/Stores/Penalty/style.scss

@@ -0,0 +1,38 @@
+.penalty-description{
+    padding: 7.5px;
+}
+.left-section{
+    .body-card{
+        padding: 15px;
+    }
+    .slider-status{
+        .text-title{
+            font-size: 2.25em;
+            color: greenyellow;
+            text-align: center;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+    }
+    .slider{
+        margin-top: 20px;
+        pointer: default;
+    }
+}
+.right-section{
+  .body-card{
+    padding: 10px;
+    LineChart{
+      padding: 0px;
+    }
+    .chart-title{
+      text-align: center;
+      font-size: 1.25em;
+      font-weight: 500;
+    }
+  }
+}
+
+.table{
+  margin-top: 15px;
+}

src/common/pages/Stores/Performance/index.js

@@ -0,0 +1,646 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  AutoComplete,
+  CardText,
+  FlatButton,
+  List,
+  ListItem,
+  Snackbar,
+  Tabs, Tab,
+  RaisedButton,
+  Toolbar,
+  DatePicker,
+  FontIcon,
+  MenuItem,
+  Toggle,
+  ToolbarGroup,
+  FloatingActionButton,
+  ToolbarSeparator,
+  IconButton,
+  ToolbarTitle,
+  RadioButton,
+  TextField,
+  Paper,
+  Divider, 
+  RadioButtonGroup
+} from 'material-ui';
+import './style.scss';
+import { 
+  Avatar, 
+  Icon, 
+  Table, 
+  Popover,
+} from 'antd';
+
+@inject('appstate')
+@observer
+export default class PerformanceComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+  }
+
+  componentDidMount() {
+    
+  }
+
+  render() {
+    const contentFail = (
+      <div>
+        <p>Looks like you can't reach your target this time. </p>
+      </div>
+    );
+    const contentSuccess = (
+      <div>
+        <p>You already beaten the target, Keep it up. </p>
+      </div>
+    );
+
+    const dataSourceOrder = [{
+      key: '1',
+      name: 'Total Cancellation / Refund',
+      my_store: '15%',
+      target: '< 20%',
+      last_week: '-',
+      last_month: '-'
+    }, {
+      key: '2',
+      name: 'Cancellation Rate',
+      my_store: '15%',
+      target: '< 10%',
+      last_week: '-',
+      last_month: '-'
+    }, {
+      key: '3',
+      name: 'Returning Rate',
+      my_store: '5%',
+      target: '< 10%',
+      last_week: '-',
+      last_month: '-'
+    }];
+    
+    const columnsOrder = [{
+      title: '',
+      dataIndex: 'name',
+      render: (text, row, index) => {
+        if(index == 1){
+          return(
+            <div className="row baris">
+              <div className="col kiri red">{text}</div>
+              {/* <div className="col kanan">
+                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+              </div> */}
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col kiri">{text}</div>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'My Store',
+      dataIndex: 'my_store',
+      render: (text, row, index) => {
+        if(index == 1){
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri red">{text}</div>
+              <Popover content={contentFail} title="Oops, what's happen?">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri">{text}</div>
+              <Popover content={contentSuccess} title="Whoa! Very Well..">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'Target',
+      dataIndex: 'target',
+      key: 'target',
+    }, {
+      title: 'Last Week',
+      dataIndex: 'last_week',
+      key: 'last_week',
+    }, {
+      title: 'Last Month',
+      dataIndex: 'last_month',
+      key: 'last_month',
+    }];
+
+    const dataSourceDelivery = [{
+      key: '1',
+      name: 'The Packaging Period',
+      my_store: '1 Days',
+      target: '< 3 Days',
+      last_week: '-',
+      last_month: '-'
+    }, {
+      key: '2',
+      name: 'Delays in delivery',
+      my_store: '2%',
+      target: '< 15%',
+      last_week: '-',
+      last_month: '-'
+    }];
+    
+    const columnsDelivery = [{
+      title: '',
+      dataIndex: 'name',
+      render: (text, row, index) => {
+        if(index == 2){
+          return(
+            <div className="row baris">
+              <div className="col kiri red">{text}</div>
+              {/* <div className="col kanan">
+                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+              </div> */}
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col kiri">{text}</div>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'My Store',
+      dataIndex: 'my_store',
+      render: (text, row, index) => {
+        if(index == 2){
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri red">{text}</div>
+              <Popover content={contentFail} title="Oops, what's happen?">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri">{text}</div>
+              <Popover content={contentSuccess} title="Whoa! Very Well..">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'Target',
+      dataIndex: 'target',
+      key: 'target',
+    }, {
+      title: 'Last Week',
+      dataIndex: 'last_week',
+      key: 'last_week',
+    }, {
+      title: 'Last Month',
+      dataIndex: 'last_month',
+      key: 'last_month',
+    }];
+
+    const dataSourceCustomer = [{
+      key: '1',
+      name: 'Overall Assessment',
+      my_store: '4.7 / 5',
+      target: '> 4.5',
+      last_week: '-',
+      last_month: '-'
+    }, {
+      key: '2',
+      name: 'Reply Chat Percentage',
+      my_store: '86%',
+      target: '> 70%',
+      last_week: '-',
+      last_month: '-'
+    }, {
+      key: '3',
+      name: 'Chat Time Replied',
+      my_store: '30 Min',
+      target: '< 1 Days',
+      last_week: '-',
+      last_month: '-'
+    }];
+    
+    const columnsCustomer = [{
+      title: '',
+      dataIndex: 'name',
+      render: (text, row, index) => {
+        if(index == 3){
+          return(
+            <div className="row baris">
+              <div className="col kiri red">{text}</div>
+              {/* <div className="col s3 kanan">
+                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+              </div> */}
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col kiri">{text}</div>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'My Store',
+      dataIndex: 'my_store',
+      render: (text, row, index) => {
+        if(index == 3){
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri red">{text}</div>
+              <Popover content={contentFail} title="Oops, what's happen?">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri">{text}</div>
+              <Popover content={contentSuccess} title="Whoa! Very Well..">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'Target',
+      dataIndex: 'target',
+      key: 'target',
+    }, {
+      title: 'Last Week',
+      dataIndex: 'last_week',
+      key: 'last_week',
+    }, {
+      title: 'Last Month',
+      dataIndex: 'last_month',
+      key: 'last_month',
+    }];
+
+    const dataSourceProduct = [{
+      key: '0',
+      name: 'Serious Product Violations',
+      my_store: '',
+      target: '',
+      last_week: '',
+      last_month: ''
+    },{
+      key: '1',
+      name: 'Prohibited Products',
+      my_store: '0',
+      target: '0',
+      last_week: '0',
+      last_month: '0'
+    }, {
+      key: '2',
+      name: 'Imitation Products',
+      my_store: '0',
+      target: '0',
+      last_week: '0',
+      last_month: '0'
+    }, {
+      key: '3',
+      name: 'Spam Products',
+      my_store: '0',
+      target: '0',
+      last_week: '0',
+      last_month: '0'
+    }, {
+      key: '4',
+      name: 'Light Product Violations',
+      my_store: '0',
+      target: '0',
+      last_week: '0',
+      last_month: '0'
+    }];
+    
+    const columnsProduct = [{
+      title: '',
+      dataIndex: 'name',
+      render: (text, row, index) => {
+        if(index == 8){
+          return(
+            <div className="row baris">
+              <div className="col kiri red">{text}</div>
+              {/* <div className="col s3 kanan">
+                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+              </div> */}
+            </div>
+          );
+        }else if(index == 0 && index == 4){
+          return(
+            <div className="row baris">
+              <div className="col kiri">{text}</div>
+            </div>
+          );
+        }else{
+          return(
+            <div className="row baris">
+              <div style={{marginLeft: 10}} className="col kiri">{text}</div>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'My Store',
+      dataIndex: 'my_store',
+      render: (text, row, index) => {
+        if(index == 9){
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri red">{text}</div>
+              <Popover content={contentFail} title="Oops, what's happen?">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }else if(index != 0){
+          return(
+            <div className="row baris">
+              <div className="col s4 kiri">{text}</div>
+              <Popover content={contentSuccess} title="Whoa! Very Well..">
+                <div className="col s3 kanan">
+                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
+                </div>
+              </Popover>
+            </div>
+          );
+        }
+      }
+    }, {
+      title: 'Target',
+      dataIndex: 'target',
+      key: 'target',
+    }, {
+      title: 'Last Week',
+      dataIndex: 'last_week',
+      key: 'last_week',
+    }, {
+      title: 'Last Month',
+      dataIndex: 'last_month',
+      key: 'last_month',
+    }];
+
+    return (
+      <div className="row">
+        <div className="col l12 m12 s12">
+          <Card className="animated fadeIn cardLite">
+            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+              <ToolbarGroup>
+                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Performance'}/>
+              </ToolbarGroup>
+            </Toolbar>
+            <Divider/>
+            <div style={{padding: 15}}>
+              <div className="row">
+                <div style={{paddingTop: 15}} className="col l3 m3 s12">
+                  <div className="performance-item">
+                    <span>Order Finished</span>
+                    <p>(30 Days)</p>
+                    <div className="rate-warning">
+                      <Icon type="exclamation" style={{fontSize: 40, color: 'white', marginTop: 7}}/>
+                    </div>
+                    <div style={{marginTop:'20px'}}>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Total Cancellation / Refund</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'red', fontSize: 17.5, marginLeft: 15}} className="material-icons">error</FontIcon></div>
+                        <div className="col s10 warning-detail">
+                          <p className="list-performance red">Cancellation Rate</p>
+                          <div className="performance-warning">
+                            <p className="warning-text">
+                              The performance of your shop is 5% lower than the recommended target of our system
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Returning Rate</p></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div style={{paddingTop: 15}} className="col l3 m3 s12">
+                  <div className="performance-item">
+                    <span>Delivery</span>
+                    <p>(30 Days)</p>
+                    <div className="rate">
+                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
+                    </div>
+                    <div style={{marginTop:'20px'}}>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Packaging Period</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Delays in Delivery</p></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div style={{paddingTop: 15}} className="col l3 m3 s12">
+                  <div className="performance-item">
+                    <span>Customer Satisfaction</span>
+                    <p>(30 Days)</p>
+                    <div className="rate">
+                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
+                    </div>
+                    <div style={{marginTop:'20px'}}>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Overall Assessment</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                      <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Reply Chat Percentage</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Chat Time Replied</p></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div style={{paddingTop: 15}} className="col l3 m3 s12">
+                  <div className="performance-item">
+                    <span>Prohibited Products</span>
+                    <p>(30 Days)</p>
+                    <div className="rate">
+                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
+                    </div>
+                    <div style={{marginTop:'20px'}}>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Prohibited Products</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                      <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Imitation Products</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Spam Products</p></div>
+                      </div>
+                      <div className="row" style={{marginBottom: -10}}>
+                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
+                        <div className="col s10"><p className="list-performance">Light Product Violations</p></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+            <Card className="cardLite" style={{marginTop: 25}}>
+              <CardHeader
+                title={
+                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                    <ToolbarGroup>
+                      <CardHeader
+                        title="Order Finished"
+                        subtitle="Your stats about finishing the order."
+                        avatar={<Icon type="shopping-cart" style={{ fontSize: 25, color: '#555' }}/>}
+                        style={{marginLeft: -15}}
+                      />
+                    </ToolbarGroup>
+                  </Toolbar>
+                }
+                actAsExpander={true}
+                showExpandableButton={true}
+              />
+              
+              <CardText expandable={true}>
+                <div className='row'>
+                  <Table pagination={false} dataSource={dataSourceOrder} columns={columnsOrder} />
+                </div>
+              </CardText>
+            </Card>
+
+            <Card className="cardLite" style={{marginTop: 25}}>
+              <CardHeader
+                title={
+                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                    <ToolbarGroup>
+                      <CardHeader
+                        title="Delivery"
+                        subtitle="Your stats for deliverying products on time."
+                        avatar={<Icon type="car" style={{ fontSize: 25, color: '#555' }}/>}
+                        style={{marginLeft: -15}}
+                      />
+                    </ToolbarGroup>
+                  </Toolbar>
+                }
+                actAsExpander={true}
+                showExpandableButton={true}
+              />
+              
+              <CardText expandable={true}>
+                <div className='row'>
+                  <Table pagination={false} dataSource={dataSourceDelivery} columns={columnsDelivery} />
+                </div>
+              </CardText>
+            </Card>
+
+            <Card className="cardLite" style={{marginTop: 25}}>
+              <CardHeader
+                title={
+                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                    <ToolbarGroup>
+                      <CardHeader
+                        title="Customer Satisfaction"
+                        subtitle="Percentage of your customer satisfaction about your store."
+                        avatar={<Icon type="smile-o" style={{ fontSize: 25, color: '#555' }}/>}
+                        style={{marginLeft: -15}}
+                      />
+                    </ToolbarGroup>
+                  </Toolbar>
+                }
+                actAsExpander={true}
+                showExpandableButton={true}
+              />
+              
+              <CardText expandable={true}>
+                <div className='row'>
+                  <Table pagination={false} dataSource={dataSourceCustomer} columns={columnsCustomer} />
+                </div>
+              </CardText>
+            </Card>
+
+            <Card className="cardLite" style={{marginTop: 25}}>
+              <CardHeader
+                title={
+                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                    <ToolbarGroup>
+                      <CardHeader
+                        title="Prohibited Products"
+                        subtitle="Total sales of the prohibited product in your store."
+                        avatar={<Icon type="exception" style={{ fontSize: 25, color: '#555' }}/>}
+                        style={{marginLeft: -15}}
+                      />
+                    </ToolbarGroup>
+                  </Toolbar>
+                }
+                actAsExpander={true}
+                showExpandableButton={true}
+              />
+              
+              <CardText expandable={true}>
+                <div className='row'>
+                  <Table pagination={false} dataSource={dataSourceProduct} columns={columnsProduct} />
+                </div>
+              </CardText>
+            </Card>
+
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Performance/style.scss

@@ -0,0 +1,107 @@
+.performance-item {
+  text-align: center;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+  padding: 10px;
+  p {
+    font-size: 0.9em;
+    color: #5f5555;
+  }
+  span {
+    font-size: 1.2em;
+  }
+  .rate {
+    width: 4.8rem;
+    height: 4.8rem;
+    text-align: center;
+    border-radius: 100%;
+    background: #55CC77;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+  .rate-warning {
+    width: 4.8rem;
+    height: 4.8rem;
+    text-align: center;
+    border-radius: 100%;
+    background: red;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+}
+
+.performance-item:hover {
+  background-color: #eee;
+  padding: 10px;
+}
+
+.baris {
+  margin-bottom: -10px;
+}
+
+.kiri {
+  margin-top: -6px;
+}
+
+.red {
+  color: red;
+}
+
+.green {
+  color: green;
+}
+
+.kanan {
+  margin-top: -4px;
+  cursor: pointer;
+}
+
+.kanan .material-icons {
+  transition: all 0.3s ease;
+}
+
+.kanan:hover .material-icons {
+  transform: translateY(-5px);
+}
+
+.card-performance {
+  transition: all 3.5s ease-in-out;
+}
+
+.list-performance {
+  font-size: 0.5em;
+  text-align: left;
+}
+
+.icon-performance {
+  font-size: 17.5px;
+}
+
+.warning-detail {
+  max-height: 27px;
+  transition: max-height 0.3s ease-out;
+  overflow: hidden;
+  .performance-warning {
+    border-radius: 5px;
+    background-color: rgba(255, 0, 0, 0.2);
+    padding: 6px;
+    margin-bottom: 5px;
+    transition: all 0.3s ease-in-out;
+    .warning-text {
+      font-size: 0.7em;
+      color: #000;
+    }
+  }
+}
+
+.warning-detail:hover {
+  max-height: 120px;
+  transition: max-height 0.3s ease-in;
+  .performance-warning {
+    margin-top: -7.5px;
+  }
+}

src/common/pages/Stores/Profile/index.js

@@ -0,0 +1,385 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import bind from 'bind-decorator';
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  AutoComplete,
+  CardText,
+  FlatButton,
+  List,
+  ListItem,
+  Divider,
+  Snackbar,
+  Tabs, Tab,
+  RaisedButton,
+  Toolbar,
+  DatePicker,
+  FontIcon,
+  MenuItem,
+  Toggle,
+  ToolbarGroup,
+  FloatingActionButton,
+  ToolbarSeparator,
+  IconButton,
+  ToolbarTitle,
+  RadioButton,
+  TextField,
+  Paper,
+  RadioButtonGroup,
+  Avatar,
+} from 'material-ui';
+import {Icon, Button, notification, Table, Tooltip as TooltipAntd} from 'antd';
+import {yellow500} from 'material-ui/styles/colors';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+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 DeleteIcon from 'material-ui/svg-icons/action/delete';
+import ImageEdit from 'material-ui/svg-icons/image/edit';
+import ActionHome from 'material-ui/svg-icons/action/home';
+import EmptyComponent from '../../EmptyComponent';
+import {Link} from 'react-router-dom';
+import {LINKS} from "../../../routes";
+import './style.scss';
+import {appConfig} from "../../../config/app";
+import NumberFormat from 'react-number-format';
+import LoadingDialog from "../../LoadingDialog";
+import Loader from 'react-loader-advanced';
+import {omit} from 'lodash';
+
+@inject('appstate')
+@observer
+export default class ProfileComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      formData: {
+        user_store_id:'',
+        name: '',
+        tagline:'',
+        description: '',
+        image: '',
+      },
+      my_item: 0,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.myStore = props.appstate.myStore;
+    this.myStoreItem = props.appstate.myStoreItem;
+    this.userData = props.appstate.userData;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  componentDidMount() {
+    if(this.userData.role == 'store') {
+      this.myStore.getAll()
+        .then(res => {
+          this.setState({
+            formData: {
+              ...this.myStore.data
+            }
+          });
+          this.myStoreItem.getAll().then(res => {
+            this.setState({
+              my_item: res.max
+            });
+          })
+        });
+    }
+    else if(this.userData.role == 'administrator') {
+      this.myStore.setRequestQuery({user_store_id : this.props.id});
+      this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
+      this.myStore.getAll()
+        .then(res => {
+          this.setState({
+            formData: {
+              ...this.myStore.data
+            }
+          });
+          this.myStoreItem.getAll().then(res => {
+            this.setState({
+              my_item: res.max
+            });
+          })
+        });
+    }
+  }
+
+  changePicture = async (event, index, value) => {
+    if(this.userData.role == 'administrator') {
+      this.setState({
+        user_store_id:this.props.id
+      });
+      console.log(this.state.user_store_id);
+    }
+    let data = this.state.formData;
+
+    const file = event.nativeEvent.target.files[0];
+    const allowedFile = ['jpg', 'jpeg', 'png', 'gif'];
+
+    const [ext] = file.name.split('.').reverse();
+
+    if (!allowedFile.includes(ext.toLowerCase())) {
+
+    }
+
+    let response = await this.http.upload(file);
+    data.image = response.path;
+    this.setState({
+      formData: data
+    });
+    await this.save();
+    // console.log(event.nativeEvent);
+  };
+
+  save = () => {
+    // console.log(this.props.id, this.state.formData);
+    // return;
+    if(this.userData.role == 'administrator') {
+      this.setState({
+        formData : {
+          ...this.state.formData,
+          user_store_id : this.props.id
+        }
+      },() => this.myStore.update(this.props.id, omit(this.state.formData,['user_store_id'])).then(res => {
+        this.globalUI.openSnackbar('Your Store has been succesfully updated');
+      }))
+    }
+    else if(this.userData.role == 'store'){
+      this.myStore.update(this.state.formData.id, this.state.formData).then(res => {
+        this.globalUI.openSnackbar('Your Store has been succesfully updated');
+      })
+    }
+
+  }
+
+  render() {
+
+    const styles = {
+      button: {
+        margin: 12,
+      },
+      exampleImageInput: {
+        cursor: 'pointer',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        width: '100%',
+        opacity: 0,
+      },
+    };
+
+    const wrapperText = key => ele => React.cloneElement(ele, {
+      value: this.state.formData[key],
+      onChange: (e, v) => {
+        this.setState({
+          formData: {
+            ...this.state.formData,
+            [key]: v,
+          }
+        });
+      }
+    });
+    const {my_item} = this.state;
+
+    return (
+      <div className="row">
+        <div className="col l12 m12 s12">
+          <Card className="animated fadeIn marketplace-cardLite">
+            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+              <ToolbarGroup>
+                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Profile'}/>
+              </ToolbarGroup>
+              {/* <ToolbarGroup className="ToolbarGroupLast">
+                <ToolbarSeparator/>
+                <Link to={LINKS.USER}>
+                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
+                </Link>
+              </ToolbarGroup> */}
+            </Toolbar>
+            <Divider/>
+            <div style={{padding: 15}}>
+              <div className="row">
+                <div className="col s12 m12 l5">
+                  <Card className='marketplace-cardLite-light'>
+                    <CardMedia
+                      overlayContentStyle={{background: 'transparent'}}
+                      overlay={
+                        <div className='row'>
+                          <div className="flex">
+                            <div className="picture-container">
+                              <img
+                                src={(this.state.formData.image !== null || '') ? this.http.appendImagePath(this.state.formData.image) : '/assets/images/icon/icon-store24x.jpg'}
+                                className="store-picture"/>
+                              <div className="middle">
+                                <div className="store-text text">
+                                  <ImageEdit color='#fff'/>
+                                </div>
+                              </div>
+                              <input type="file" onChange={this.changePicture} accept="image/*"  style={styles.exampleImageInput}/>
+                            </div>
+                            <div>
+                              <div className='store-name'>{this.myStore.data.name}</div>
+                              <div className='store-join'>{this.myStore.data.tagline}</div>
+                            </div>
+                          </div>
+                          <svg className="decor" width="842px" height="219px" viewBox="0 0 842 219"
+                               preserveAspectRatio="xMaxYMax meet" version="1.1"
+                               xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink">
+                            <g transform="translate(-381.000000, -362.000000)" fill="#FFFFFF">
+                              <path className="decor-path"
+                                    d="M1223,362 L1223,581 L381,581 C868.912802,575.666667 1149.57947,502.666667 1223,362 Z"></path>
+                            </g>
+                          </svg>
+                        </div>
+                      }
+                    >
+                      <div className="banner-container">
+                        <img
+                          src="https://images.unsplash.com/photo-1502160348486-995f41fa55b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=199db34d62d362d0073043ac931c6f4e&auto=format&fit=crop&w=750&q=80 750w"
+                          className="store-banner" alt=""/>
+                      </div>
+                    </CardMedia>
+                    <CardText className="no-padding mt-20">
+                      {/*<Divider/>*/}
+                      {/*<div className='row' style={{paddingTop: 15, paddingBottom: -5}}>*/}
+                      {/*<a href="#">*/}
+                      {/*<div className='col s6' style={{marginTop: 7, color: '#777'}}>*/}
+                      {/*Visit My Store*/}
+                      {/*</div>*/}
+                      {/*<div className='col s6' style={{textAlign: 'right'}}>*/}
+                      {/*<Avatar size='25' icon={<i className="material-icons">computer</i>}/>*/}
+                      {/*</div>*/}
+                      {/*</a>*/}
+                      {/*</div>*/}
+                      <div className='row marketplace-row-profile-info'>
+                        <Link to={LINKS.ITEMS}>
+                          <div className='col s1' style={{textAlign: 'left', paddingTop: 3}}>
+                            <Avatar size={25} icon={<i className="material-icons">business_center</i>}/>
+                          </div>
+                          <div className='col s8' style={{marginTop: 7, color: '#777'}}>
+                            My Items
+                          </div>
+                          <div className='col s3 btn-product'
+                               style={{textAlign: 'right', paddingTop: 6}}>
+                            <Link to={LINKS.ITEMS}>{my_item} </Link><Icon className="ml-8" type="right"/>
+                          </div>
+                        </Link>
+                      </div>
+                      {/*<div className='row marketplace-row-profile-info'>*/}
+                        {/*<div className='col s1' style={{textAlign: 'left', paddingTop: 3}}>*/}
+                          {/*<Avatar size={25} icon={<i className="material-icons">chat</i>}/>*/}
+                        {/*</div>*/}
+                        {/*<div className='col s8' style={{marginTop: 7, color: '#777'}}>*/}
+                          {/*Reply Chat Percentage*/}
+                        {/*</div>*/}
+                        {/*<div className='col s3' style={{textAlign: 'right', color: '#000', paddingTop: 6}}>*/}
+                          {/*0%*/}
+                        {/*</div>*/}
+                      {/*</div>*/}
+                      {/*<div className='row marketplace-row-profile-info'>*/}
+                        {/*<div className='col s1' style={{textAlign: 'left', paddingTop: 3}}>*/}
+                          {/*<Avatar size={25} icon={<i className="material-icons">access_time</i>}/>*/}
+                        {/*</div>*/}
+                        {/*<div className='col s8' style={{marginTop: 7, color: '#777'}}>*/}
+                          {/*Chat Time Replied*/}
+                        {/*</div>*/}
+                        {/*<div className='col s3' style={{textAlign: 'right', color: '#5cb85c', paddingTop: 6}}>*/}
+                          {/*In Minutes*/}
+                        {/*</div>*/}
+                      {/*</div>*/}
+                      {/*<div className='row marketplace-row-profile-info'>*/}
+                        {/*<a href="#">*/}
+                          {/*<div className='col s1' style={{textAlign: 'left', paddingTop: 3}}>*/}
+                            {/*<Avatar size={25} icon={<i className="material-icons">star_border</i>}/>*/}
+                          {/*</div>*/}
+                          {/*<div className='col s8' style={{marginTop: 7, color: '#777'}}>*/}
+                            {/*Customer's Rating*/}
+                          {/*</div>*/}
+                          {/*<div className='col s3 btn-product'*/}
+                               {/*style={{textAlign: 'right', color: '#6772e5', paddingTop: 6}}>*/}
+                            {/*0 <Icon className="ml-8" type="right"/>*/}
+                          {/*</div>*/}
+                        {/*</a>*/}
+                      {/*</div>*/}
+                      {/*<div className='row marketplace-row-profile-info'>*/}
+                        {/*<a href="#">*/}
+                          {/*<div className='col s1' style={{textAlign: 'left', paddingTop: 3}}>*/}
+                            {/*<Avatar size={25} icon={<i className="material-icons">money_off</i>}/>*/}
+                          {/*</div>*/}
+                          {/*<div className='col s8' style={{marginTop: 7, color: '#777'}}>*/}
+                            {/*Total Cancellation / Refund*/}
+                          {/*</div>*/}
+                          {/*<div className='col s3 btn-product'*/}
+                               {/*style={{textAlign: 'right', color: '#6772e5', paddingTop: 6}}>*/}
+                            {/*0 <Icon className="ml-8" type="right"/>*/}
+                          {/*</div>*/}
+                        {/*</a>*/}
+                      {/*</div>*/}
+                    </CardText>
+                  </Card>
+                </div>
+                <div className="col s12 m12 l7">
+                  <div style={{padding: 15}}>
+                    <div className="row">
+                      <div className="col s12">
+                        <p className="label-form">Store Name</p>
+                        {wrapperText("name")(
+                          <TextField
+                            hintText="E.g. Aby Store"
+                            fullWidth={true}
+                            className="font-14"
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="row">
+                      <div className="col s12">
+                        <p className="label-form">Store Tagline</p>
+                        {wrapperText("tagline")(
+                          <TextField
+                            hintText="E.g. Aby Store"
+                            fullWidth={true}
+                            className="font-14"
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="row">
+                      <div className="col s12">
+                        <p className="label-form">Store Description</p>
+                        {wrapperText("description")(
+                          <TextField
+                            hintText="Tell Anything about your store"
+                            fullWidth={true}
+                            className="font-14"
+                          />
+                        )}
+                      </div>
+                    </div>
+                    <div className="row">
+                      <div className='col s12 m12 l12' style={{textAlign: "right"}}>
+                        <RaisedButton
+                          label="Save"
+                          onClick={() => this.save()}
+                          primary={true}
+                          style={{marginTop: '2.3em'}}/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+}

src/common/pages/Stores/Profile/style.scss

@@ -0,0 +1,142 @@
+.picture-container {
+  position: relative;
+  width: 70px;
+  height: 70px;
+  margin-top: 10px;
+  margin-left: 10px;
+  z-index: 9;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid #fff;
+}
+
+.store-picture {
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.middle {
+  transition: .7s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  cursor: pointer;
+  line-height: 1;
+  background: rgba(51, 51, 51, 0.61);
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+}
+
+.store-text {
+  position: relative;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.store-name {
+  padding-top: 20px;
+  padding-left: 15px;
+  color: #fff;
+  font-weight: 500;
+  font-size: 1.5em;
+}
+
+.store-join {
+  padding-left: 15px;
+  color: #fff;
+  font-weight: 300;
+  font-size: 1.0em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+@media screen and (max-width: 600px) {
+  .store-name {
+    padding-top: 20px;
+    padding-left: 40px;
+    color: #fff;
+    font-weight: 500;
+    font-size: 1.5em;
+  }
+  .store-join {
+    padding-left: 40px;
+    color: #fff;
+    font-weight: 300;
+    font-size: 1.0em;
+  }
+}
+
+.banner-container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+
+}
+
+.store-banner {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px 6px 0 0;
+}
+
+.middle-banner {
+  transition: .7s ease;
+  opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  cursor: pointer;
+}
+
+.media-container {
+  // cursor: pointer;
+}
+
+.decor {
+  position: absolute;
+  bottom: -1px;
+  right: 0;
+  max-width: 100%;
+  z-index: 1;
+}
+
+.picture-container:hover .store-picture {
+  opacity: 1;
+}
+
+.picture-container:hover .middle {
+  opacity: 1;
+}
+
+.btn-product i {
+  transition: all 0.3s ease;
+}
+
+.btn-product:hover .ml-8 {
+  transform: translateX(5px);
+}
+
+.marketplace-row-profile-info {
+  border-bottom: 1px solid #f6f6f6;
+  height: 44px;
+}
+
+.marketplace-row-profile-info:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}

src/common/pages/Stores/Rating/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Card,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarTitle,
+} from 'material-ui';
+import { Button, Avatar, Rate, Divider } from 'antd';
+import './style.scss';
+import moment from 'moment';
+
+@inject('appstate')
+@observer
+export default class RatingComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      primaryState: 'all'
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+  }
+
+  componentDidMount() {
+    
+  }
+
+  render() {
+
+    return (
+      <div className="row">
+        <div className="col l12 m12 s12">
+          <Card className="animated fadeIn cardLite">
+            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+              <ToolbarGroup>
+                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Rating'}/>
+              </ToolbarGroup>
+              {/* <ToolbarGroup className="ToolbarGroupLast">
+                <ToolbarSeparator/>
+                <Link to={LINKS.USER}>
+                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
+                </Link>
+              </ToolbarGroup> */}
+            </Toolbar>
+            <Divider style={{marginTop: -3}}/>
+            <div style={{padding: 15}}>
+              <div className="row" style={{marginTop: -25}}>
+                <Button onClick={() => this.setState({primaryState: 'all'})} style={{width: 80}} type={(this.state.primaryState==='all') ? "primary" : ""}>All</Button>
+                <Button onClick={() => this.setState({primaryState: 5})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===5) ? "primary" : ""}>5 Star</Button>
+                <Button onClick={() => this.setState({primaryState: 4})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===4) ? "primary" : ""}>4 Star</Button>
+                <Button onClick={() => this.setState({primaryState: 3})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===3) ? "primary" : ""}>3 Star</Button>
+                <Button onClick={() => this.setState({primaryState: 2})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===2) ? "primary" : ""}>2 Star</Button>
+                <Button onClick={() => this.setState({primaryState: 1})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===1) ? "primary" : ""}>1 Star</Button>
+              </div>
+              <div className="row">
+                <div className="row" style={{marginTop: 25}}>
+                  <div className="col s1">
+                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"/>
+                  </div>
+                  <div className="col s10" style={{marginLeft: '-1vw'}}>
+                    <div className="row">
+                      <p className="rating-username">username</p>
+                    </div>
+                    <div className="row" style={{marginTop: -35}}>
+                      <Rate disabled defaultValue={5} />
+                      <span className="rating-title">Title</span>
+                    </div>
+                    <div className="row" style={{marginTop: -15}}>
+                      <p className="rating-content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
+                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
+                        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
+                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+                        qui officia deserunt mollit anim id est laborum.
+                      </p>
+                      <Divider />
+                    </div>
+                    <div className="row" style={{marginTop: -25}}>
+                      <div className="col"><p className="rating-user-name">User Name</p></div>
+                      <div className="col"><Divider type="vertical"/></div>
+                      <div className="col"><p className="rating-date">{moment().format('DD MMMM YYYY, HH:mm')}</p></div>
+                    </div>
+                  </div>
+                  <div className="col s1">
+                    <Button type="" icon="message">Reply</Button>
+                  </div>
+                </div>
+                <div className="row">
+                  <div className="reply-rating">
+                    <p className="response">Your Response</p>
+                    <p className="response-content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
+                      et dolore magna aliqua.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Rating/style.scss

@@ -0,0 +1,18 @@
+.rating-user-name{
+    color: #888;
+}
+.rating-date{
+    color: #888;
+}
+.reply-rating{
+    width: 81.5%;
+    height: auto;
+    padding: 20px;
+    background-color: #eee;
+    margin-top: -25px;
+    margin-left: 75px;
+    .response{
+        color: #888;
+    }
+    .response-content{}
+}

src/common/pages/Stores/Setting/index.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import {Tab, Tabs,Checkbox,Card,CardHeader,CardText,TextField,Subheader,Avatar,RaisedButton} from 'material-ui';
+import './style.scss';
+import get from 'lodash.get';
+
+@inject('appstate')
+@observer
+export default class SettingComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.defaultState = Object.assign({}, this.state);
+    this.myStore = props.appstate.myStore;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  async componentDidMount() {
+    this.myStore.setRequestQuery({user_store_id : this.props.id});
+    this.myStore.getAll()
+  }
+
+  changeSetting = (key)=>{
+    this.myStore.data[key] = !this.myStore.data[key]
+  }
+
+  save = ()=>{
+    this.myStore.update(this.myStore.data.id,this.myStore.data).then(res=>{
+      this.globalUI.openSnackbar("Success Change Setting");
+    }).catch(err=>{
+      this.globalUI.openSnackbar(err.message);
+    })
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="col l12 m12 s12">
+                <Card
+                  className="cardLite"
+                  initiallyExpanded={true}>
+                  <CardHeader
+                    title="Store"
+                    subtitle="Configure the setting for this store"
+                    avatar={<Avatar backgroundColor={"transparent"}
+                                    style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
+                                    src="/assets/images/icon/store-white.png"/>}
+                    actAsExpander={true}
+                    showExpandableButton={true}
+                    style={{backgroundColor: "#32325d"}}
+                    titleStyle={{color: "white"}}
+                    subtitleStyle={{color: "white"}}
+                    iconStyle={{color: "white"}}
+                  />
+                  <CardText expandable={true}>
+                    <div className="row">
+                      {/*<div className="col s12 m12 l12" style={{paddingLeft: 0}}>*/}
+                        {/*<Subheader>Home page</Subheader>*/}
+                      {/*</div>*/}
+                      <div className="col s12 m6 l6">
+                        <Checkbox
+                          label={"Set store active"}
+                          checked={get(this.myStore.data,'is_active')}
+                          onCheck={() => this.changeSetting('is_active')}
+                        />
+                      </div>
+                      {/*<div className="col s12 m6 l6">*/}
+                        {/*<Checkbox*/}
+                          {/*label="Show Featured Store"*/}
+                          {/*checked={get(this.settingStore.data,'show_featured_stores')}*/}
+                          {/*onCheck={() => this.changeSetting('show_featured_stores')}*/}
+                        {/*/>*/}
+                      {/*</div>*/}
+                      {/*<div className="col s12 m6 l6">*/}
+                        {/*<Checkbox*/}
+                          {/*label={"Show Category List"}*/}
+                          {/*checked={get(this.settingStore.data,'show_categories')}*/}
+                          {/*onCheck={() => this.changeSetting('show_categories')}*/}
+                        {/*/>*/}
+                      {/*</div>*/}
+                      {/*<div className="col s12 m6 l6">*/}
+                        {/*<Checkbox*/}
+                          {/*label="Show Category items"*/}
+                          {/*checked={get(this.settingStore.data,'show_item_categories')}*/}
+                          {/*onCheck={() => this.changeSetting('show_item_categories')}*/}
+                        {/*/>*/}
+                      {/*</div>*/}
+                    </div>
+                  </CardText>
+                </Card>
+                <div style={{textAlign: "right"}}>
+                  <RaisedButton label="Save" primary={true} style={{margin: "12px 0px"}} onClick={this.save}/>
+                </div>
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/Setting/style.scss

@@ -0,0 +1,54 @@
+.setting {
+  margin-top: 35px;
+  .container {
+    padding: 25px;
+
+    .ant-card {
+      background: #fff;
+      border-radius: 0px;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      transition: all .3s;
+    }
+    .ant-card-head {
+      height: 48px;
+      line-height: 48px;
+      background: #fff;
+      border-bottom: 0px 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%;
+  }
+
+}
+
+
+
+

src/common/pages/Stores/index.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import {LINKS} from '../../routes';
+import {Tab, Tabs} from 'material-ui';
+import './style.scss';
+import * as _ from 'lodash';
+
+import Address from './Address';
+import Bank from './Bank';
+import Delivery from './Delivery';
+import Penalty from './Penalty';
+import Performance from './Performance';
+import ProfileComponent from './Profile';
+import Rating from './Rating';
+import ItemAll from '../Items/All/';
+import SettingStore from './Setting';
+export const STORES_TABS = {
+  PROFILE: 'store profile',
+  // DELIVERY: 'delivery',
+  ADDRESS: 'address',
+  // RATING: 'rating',
+  // PERFORMANCE: 'store_performance',
+  // PENALTY: 'penalty_point',
+  BANK: 'bank_account',
+  ITEM : 'item',
+  SETTING : 'setting'
+};
+
+@inject('appstate')
+@observer
+export default class StoreComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.taskStore = props.appstate.task;
+    this.state = {
+      tabSelected: STORES_TABS.PROFILE
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.handleChange = this.handleChange.bind(this);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+    this.userStores = props.appstate.stores;
+    this.userData = props.appstate.userData;
+  }
+
+  componentDidMount() {
+    if(this.userData.role == 'store'){
+      const {match: {params: {tab: tabSelected}}} = this.props;
+      console.log(this.props);
+      if (!tabSelected) {
+        this.props.history.push(LINKS.STORES + "/profile");
+        this.userStores.changeTab('profile');
+      } else {
+        this.handleChange(tabSelected);
+      }
+    }
+  }
+
+  handleChange = (tabSelected) => {
+    this.setState({tab: tabSelected});
+    this.userStores.changeTab(tabSelected);
+    if(this.userData.role == 'store') {
+      this.props.history.push(LINKS.STORES + '/' + tabSelected);
+    }
+  };
+
+  getContent() {
+    switch (this.userStores.selectedTab) {
+      case STORES_TABS.PROFILE:
+        return <ProfileComponent id={this.props.id}/>;
+      case STORES_TABS.ADDRESS:
+        return <Address id={this.props.id}/>;
+      case STORES_TABS.BANK:
+        return <Bank id={this.props.id}/>;
+      case STORES_TABS.DELIVERY:
+        return <Delivery id={this.props.id}/>;
+      case STORES_TABS.PENALTY:
+        return <Penalty id={this.props.id}/>;
+      case STORES_TABS.RATING:
+        return <Rating id={this.props.id}/>;
+      case STORES_TABS.PERFORMANCE:
+        return <Performance id={this.props.id}/>;
+      case STORES_TABS.ITEM:
+        return <ItemAll id={this.props.id}/>;
+      case STORES_TABS.SETTING:
+        return <SettingStore id={this.props.id}/>;
+      default:
+        return <ProfileComponent id={this.props.id}/>
+    }
+  }
+
+  filterMenu = (it)=>{
+    if(this.userData.role == 'store'){
+      return (it !== 'ITEM' && it !== 'SETTING')
+    }
+    if(this.userData.role == 'administrator'){
+      return it
+    }
+  };
+
+  render() {
+    return (
+      <div className="store containerMiddle">
+        <div className="row">
+          <div className="col l12 m12 s12">
+            <Tabs
+              value={this.userStores.selectedTab}
+              onChange={this.handleChange}
+              inkBarStyle={{background: 'transparent'}}
+              className="tabsAkun"
+              style={{background: 'transparent'}}
+            >
+
+              {Object.keys(STORES_TABS).filter(this.filterMenu).map(v => (
+                <Tab
+                  value={STORES_TABS[v]}
+                  label={_.capitalize(v.split('_').join(' '))}
+                  className={(this.userStores.selectedTab === STORES_TABS[v]) ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}
+                />
+              ))}
+              }
+            </Tabs>
+
+            {this.getContent()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/Stores/style.scss

@@ -0,0 +1,54 @@
+.store {
+  margin-top: 35px;
+  .container {
+    padding: 25px;
+
+    .ant-card {
+      background: #fff;
+      border-radius: 0px;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      transition: all .3s;
+    }
+    .ant-card-head {
+      height: 48px;
+      line-height: 48px;
+      background: #fff;
+      border-bottom: 0px 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: 12px;
+    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%;
+  }
+
+}
+
+
+
+