form search hotel

2019-01-03 00:09:28 +07:00 · 2019-01-03 00:09:28 +07:00 · c10eaa34e8
commit c10eaa34e8
parent e503b70640
7 changed files with 337 additions and 270 deletions
--- a/assets/images/icon/hotel-icon.png
+++ b/assets/images/icon/hotel-icon.png
--- a/package-lock.json
+++ b/package-lock.json
@ -9227,6 +9227,11 @@
      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
      "dev": true
    },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
    "lodash.restparam": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
--- a/package.json
+++ b/package.json
@ -66,6 +66,7 @@
    "lodash.capitalize": "^4.2.1",
    "lodash.differenceby": "^4.8.0",
    "lodash.get": "^4.4.2",
+    "lodash.omit": "^4.5.0",
    "lodash.sortby": "^4.7.0",
    "lodash.startcase": "^4.4.0",
    "mapbox-gl": "^0.49.0",
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@ -25,7 +25,8 @@ import UploadItems from "../Items/FormItems/Upload";
 import UploadPromotion from "../Items/FormItems/UploadPromotion";
 import UploadAdminDetail from "../Items/FormItems/UploadAdmin";
 import Tasks from './../Tasks/index';
-import HotelComponent from './../Hotel';
+import HotelComponent from '../Hotel';
+import HotelSearch from './../Hotel/HotelSearch';
 // import TasksDetail from './../Tasks/TaskDetail/index';
 import CustomerComponent from "../Customers/index";
 import CustomerDetail from "../CustomerDetail/index";
@ -73,6 +74,7 @@ export default class ComponentName extends React.Component {
        <Route exact component={OrderComponent} path={LINKS.ORDER}/>
        <Route exact component={WalletComponent} path={LINKS.WALLET}/>
        <Route exact component={HotelComponent} path={LINKS.HOTEL}/>
+        <Route exact component={HotelSearch} path={LINKS.HOTEL_SEARCH}/>
        <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
        <Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
        <Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
--- a/src/common/pages/Hotel/HotelSearch.js
+++ b/src/common/pages/Hotel/HotelSearch.js
@ -0,0 +1,178 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  RaisedButton
+} from 'material-ui';
+import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox  } from 'antd';
+import {startCase} from 'lodash';
+import LoadingDialog from "../LoadingDialog";
+import Loader from 'react-loader-advanced';
+import './style.scss';
+import {DIALOG} from "../../stores/global_ui";
+import EmptyComponent from '../EmptyComponent';
+
+@inject('appstate')
+@observer
+export default class HotelSearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+      valueMinimal: 0,
+      valueMaximal: 0,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  componentDidMount() {
+
+  }
+
+  handleChangeMinimal = (valueMinimal) => {
+    this.setState({ valueMinimal });
+  };
+
+  handleChangeMaximal = (valueMaximal) => {
+    this.setState({ valueMaximal });
+  };
+
+  handleBlur = () => {
+    console.log('blur');
+  }
+
+  handleFocus = () => {
+    console.log('focus');
+  }
+
+  
+
+  render() {
+    const { valueMinimal, valueMaximal } = this.state;
+
+    return (
+      <div className="wallet containerMiddle">
+        <div className="row">
+          <div className="col l3 m3 s3 no-padding">
+              <Card title="Filter" bordered={true} style={{ width: '100%' }}>
+                <p>Min. Points</p>
+                <Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
+
+                <p>Max. Points</p>
+                <Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
+
+                <p>Rating Bintang</p>
+                <Rate />
+
+                <p style={{marginTop: 25}}>Fasilitas</p>
+                <Checkbox.Group style={{ width: '100%' }} >
+                  <Row>
+                      <Col span={16}><Checkbox style={{}} value="Air Conditioning">Air Conditioning</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Check All">Check All</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Bar">Bar</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Business Centre">Business Centre</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Coffee Shop">Coffee Shop</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Gym">Gym</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Internet Access">Internet Access</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Pool">Pool</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Restaurant">Restaurant</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Room Service">Room Service</Checkbox></Col>
+                      <Col span={16}><Checkbox style={{}} value="Wi-Fi Access">Wi-Fi Access</Checkbox></Col>
+                  </Row>
+              </Checkbox.Group>
+              </Card>
+          </div>
+
+          <div className="col s9 m9 l9">
+            <Row>
+              <Card
+                  style={{marginLeft:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000092523_wh_3" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                          <h2>Oasis Amir Hotel</h2>
+                          <Rate disabled defaultValue={2}  style={{marginTop:-20}}/>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />Senen, Jakarta</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#2db7f5">Wi-Fi Access</Tag>
+                              <Tag color="#87d068">Restaurant</Tag>
+                          </div>
+                          <h2 style={{color:'#f96d01'}}>5,390 Poin</h2>
+                          <Col span={24}>
+                              <Button type="primary" block style={{}}>Pilih</Button>
+                          </Col>
+                      </Col>
+                  </Row>
+              </Card>
+            </Row>
+
+            <Row>
+              <Card
+                  style={{marginLeft:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000201429_wh_2" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                          <h2>Hotel Aston</h2>
+                          <Rate disabled defaultValue={4}  style={{marginTop:-20}}/>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />Kuningan, Jakarta</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#2db7f5">Wi-Fi Access</Tag>
+                              <Tag color="#87d068">Restaurant</Tag>
+                              <Tag color="#108ee9">Pool</Tag>
+                          </div>
+                          <h2 style={{color:'#f96d01'}}>14,230 Poin</h2>
+                          <Col span={24}>
+                              <Button type="primary" block style={{}}>Pilih</Button>
+                          </Col>
+                      </Col>
+                  </Row>
+              </Card>
+          </Row>
+          <Row>
+              <Card
+                  style={{marginLeft:20,marginBottom:20}}
+              >
+                  <Row>
+                      <Col span={8}>
+                          <img alt="example" src="https://origin.pegipegi.com/jalan/images/pict2L/Y4/Y953534/Y953534020.jpg" style={{width:'100%', height:190}} />
+                      </Col>
+                      <Col span={1} />
+                      <Col span={15}>
+                          <h2>Hotel Horision</h2>
+                          <Rate disabled defaultValue={5}  style={{marginTop:-20}}/>
+                          <h4 style={{color:'grey'}}><Icon type="environment" />Menteng, Jakarta</h4>
+                          <div style={{marginBottom:10}}>
+                              <Tag color="#f50">Air Conditional</Tag>
+                              <Tag color="#2db7f5">Wi-Fi Access</Tag>
+                              <Tag color="#87d068">Restaurant</Tag>
+                              <Tag color="#108ee9">Pool</Tag>
+                          </div>
+                          <h2 style={{color:'#f96d01'}}>20,500 Poin</h2>
+                          <Col span={24}>
+                              <Button type="primary" block style={{}}>Pilih</Button>
+                          </Col>
+                      </Col>
+                  </Row>
+              </Card>
+            </Row>
+          </div>
+        </div>
+
+
+      </div>
+    )
+  }
+}
--- a/src/common/pages/Hotel/index.js
+++ b/src/common/pages/Hotel/index.js
@ -1,311 +1,191 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {
+  AutoComplete,
+  Avatar,
  Card,
-  CardTitle,
+  CardHeader,
+  Dialog,
  Divider,
+  FlatButton,
+  FontIcon,
+  IconMenu,
+  MenuItem,
  RaisedButton,
-  Table,
-  TableBody,
-  TableHeader,
-  TableHeaderColumn,
-  TableRow,
-  TableRowColumn,
-  TextField,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarSeparator,
-  IconButton,
-  IconMenu, MenuItem,
+  SelectField,
+  TextField
 } from 'material-ui';
-import {Table as TableAntd} from 'antd';
-import {startCase} from 'lodash';
-import {LINKS} from "../../routes";
-import {Link} from 'react-router-dom';
-import SearchIcon from 'material-ui/svg-icons/action/search';
-import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
-import ArchiveIcon from 'material-ui/svg-icons/content/archive';
-import DC from 'decimal.js-light';
-import NumberFormat from 'react-number-format';
-import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
-import LoadingDialog from "../LoadingDialog";
+import {
+    Row, 
+    Col, 
+    Select, 
+    DatePicker, 
+    Button,
+    // Card,
+    Slider,
+    // Divider,
+    Rate, 
+    Checkbox, 
+    Icon, 
+    // Avatar, 
+    Tag} from "antd"
+import moment from 'moment';
+import get from 'lodash.get';
 import Loader from 'react-loader-advanced';
+import LoadingDialog from "../LoadingDialog";
+import omit from 'lodash.omit';
+import {LINKS} from "../../routes";
+
 import './style.scss';
-import {DIALOG} from "../../stores/global_ui";
-import EmptyComponent from '../EmptyComponent';

@inject('appstate')
@observer
-export default class HotelComponent extends React.Component {
+export default class CheckSchedule extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
-      value: 1,
-      searchText: '',
-      slideIndex: 0,
-      filteredInfo: null,
-      sortedInfo: null,
+      maskapai: "",
+      returnDateDisabled: true,
+      depatureAirport: '',
+      destinationAirport: '',
+      adult: 1,
+      children: 0,
+      baby: 0,
+      value: 0,
+      searchTimeoutId: false,
+      errorMessageDialog: false,
+      errorMessage: "",
+      errorDepature: "",
+      errorDestination: "",
+      searchTextArrival: '',
+      searchTextDeparture: ''
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
+    this.appstate = props.appstate;
    this.globalUI = props.appstate.globalUI;
-    this.transactionStore = props.appstate.transaction;
-    this.bankStore = props.appstate.bank;
-    this.userData = props.appstate.userData;
  }

  componentDidMount() {
-    this.globalUI.openLoading();
-    this.transactionStore.getAll().then(res => {
-      this.globalUI.closeLoading();
-    });
-    this.transactionStore.getAmount();
-    this.bankStore.getByUserID('tesss');
-    // this.globalUI.closeLoading();
-    // this.authStore.getWallet();
+
  }

-  handleUpdateInput = (searchText) => {
-    this.setState({
-      searchText: searchText,
-    });
-  };
+  componentWillUnmount() {

-  handleNewRequest = () => {
-    this.setState({
-      searchText: '',
-    });
-  };
-
-  tabsHandleChange = (value) => {
-    this.setState({
-      slideIndex: value,
-    });
-  };
-
-  search = (event)=>{
-    if(event.target.value.length == 0){
-      this.transactionStore.isSearching = false;
-    }
-    else{
-      this.transactionStore.isSearching = true;
-      this.transactionStore.search(event.target.value);
-    }
-  };
-
-  handleChangeSorter = (pagination, filters, sorter) => {
-    // console.log('Various parameters', pagination, filters, sorter);
-    this.setState({
-      filteredInfo: filters,
-      sortedInfo: sorter,
-    });
-  };
-
-  handleChange = (event, index, value) => this.setState({value});
+    console.log('COMPONENT GONE');
+  }

  render() {
-    const undeposit_fund = <NumberFormat value={new DC(this.transactionStore.wallet.pending_payment_to_wallet || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
-    const balance = <NumberFormat value={new DC(this.transactionStore.wallet.balance || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;

+    const styles = {

-    const columns = [{
-      title: 'Id',
-      dataIndex: 'id',
-      key: 'id',
-      className: 'recentOrder-noOrder',
-      render: (text) => <Link to={`#`} key={text}>{<span>{(text.split("-")[0])}</span>}</Link>,
-    },
-      {
-        title: 'Date',
-        dataIndex: 'created_at',
-        key: 'created_at',
-        className: 'recentOrder-noOrder',
-        render: (text) => (
-          <div>
-            <span>{moment(text).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text).format('hh:mm')}</span>
-          </div>
-        )
+      radioButton: {
+        marginBottom: 16,
      },
-      {
-        title: 'Type',
-        dataIndex: 'type',
-        key: 'type',
-        className: 'recentOrder-noOrder',
-        render: (text) => <span>{text.name}</span>
-      },
-
-      {
-        title: 'Status',
-        dataIndex: 'status',
-        key: 'status',
-        className: 'recentOrder-status',
-        render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
-      },
-      {
-        title: 'Amount',
-        dataIndex: 'amount',
-        key: 'amount',
-        className: 'recentOrder-customer bolder green',
-        render: (text) => {
-          return <NumberFormat
-            value={new DC(text).toNumber()} displayType={'text'}
-            thousandSeparator={true} prefix={'Rp. '}/>
-
-        }
-
-      }];
+    };

    return (
-      <div className="wallet containerMiddle">
-        <div className="row">
-          <div className="col s12">
-            <div style={{marginBottom: '16px'}}>
-              <h3 className="headerMenu">Wallet</h3>
-            </div>
-          </div>
-          {
-            (this.transactionStore.saldo.length === 2) ?
-              <div>
-                <div className="col s6 m6">
-                  <Card className="cardLite row">
-                    <CardTitle title={undeposit_fund} subtitle="Undeposited Funds"/>
-                  </Card>
+      <div className="row" style={{marginTop:50}}>
+
+        <div className="col s12 col-sm-noPadding">
+          <Card className="animated fadeIn cardLite" style={{marginBottom: (window.innerWidth < 600) ? 0 : 10, height: (window.innerWidth < 600) ? "100%" : "auto"}}>
+            <CardHeader
+              title="Hotel"
+              titleColor={"#ffffff"}
+              style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
+              subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
+              subtitle="Domestic & International"
+              avatar={<Avatar backgroundColor={"transparent"}
+                              style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
+                              src="/assets/images/icon/hotel-icon.png"/>}
+            />
+            <Divider/>
+            <Loader
+              show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
+              messageStyle={{textAlign: 'center'}}
+              backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
+              <div style={{padding: '24px 14px 14px 14px'}}>
+                <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
+                  <div className="col s12 l3 m3">
+                    <p className="label-form">Where</p>
+                        <Select
+                            allowClear
+                            showSearch
+                            showArrow={false}
+                            style={{ width: '100%' }}
+                            placeholder="City or airport"
+                            optionFilterProp="children"
+                            onChange={this.whereHandleChange}
+                            onFocus={this.whereHandleFocus}
+                            onBlur={this.whereHandleBlur}
+                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                        >
+                            <Option value="jakarta">Jakarta</Option>
+                            <Option value="bali">Bali</Option>
+                            <Option value="surabaya">Surabaya</Option>
+                        </Select>
+                  </div>
+                  <div className="col s12 m3 l3">
+                      <p className="label-form">Check-in</p>
+                      <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
+                  </div>
+                  <div className="col s12 m3 l3">
+                      <p className="label-form">Check-out</p>
+                      <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
+                  </div>
+                  <div className="col s12 m3 l3">
+                  <p className="label-form">Rooms</p>
+                    <Select
+                        allowClear
+                        showSearch
+                        showArrow={false}
+                        style={{ width: '100%' }}
+                        placeholder="Select"
+                        optionFilterProp="children"
+                        onChange={this.roomsHandleChange}
+                        onFocus={this.roomsHandleFocus}
+                        onBlur={this.roomsHandleBlur}
+                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                    >
+                        <Option value="jakarta">1 Adult, 0 Children</Option>
+                        <Option value="bali">2 Adult, 0 Children</Option>
+                        <Option value="surabaya">More options</Option>
+                    </Select>
+                  </div>
                </div>
-                <div className="col s6 m6">
-                  <Card className="cardLite row">
-                    <CardTitle titleStyle={{color:'#6772e5'}} title={balance} subtitle="Total Balance"/>
-                  </Card>
+                <div className="row" style={{marginBottom: (window.innerWidth < 600) ? 0 : 15}}>
+
+                  <div className="col s12 l6">
+
+
+                  </div>
                </div>
-              </div>
-              :
-              <div className="col s12 m12">
-                <Card className="cardLite row">
-                  <CardTitle title={balance} subtitle="Your Balance"/>
-                </Card>
-              </div>
-          }

-          <div className="col s12">
-            <Card className="cardLite" style={{paddingBottom: 5}}>
-              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
-                <ToolbarGroup>
-                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
-                  <TextField
-                    hintText="Search Transaction"
-                    style={{fontSize: 14}}
-                    hintStyle={{fontSize: 14}}
-                    fullWidth={true}
-                    underlineShow={false}
-                  />
-                </ToolbarGroup>
-                <ToolbarGroup className="ToolbarGroupLast">
-                  <ToolbarSeparator/>
-                  {(window.innerWidth < 600) ?
-                    <div className="flexSpaceBetween">
-                      <IconMenu
-                        iconButtonElement={<IconButton><MoreIcon/></IconButton>}
-                        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
-                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
-                      >
-                        <MenuItem primaryText="Deposit"
-                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
-                        <MenuItem primaryText="Withdrawal"
-                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
-                      </IconMenu>
-                    </div>
-                    :
-                    <div>
-                      {/*<RaisedButton*/}
-                      {/*className=""*/}
-                      {/*icon={<UnarchiveIcon/>}*/}
-                      {/*label="Deposit"*/}
-                      {/*style={{marginRight: 20}}*/}
-                      {/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
-                      {/*primary={true}/>*/}
-                      <RaisedButton
-                        className="ToolbarGroupLastButton"
-                        icon={<ArchiveIcon/>}
-                        label="Withdraw"
-                        onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}
-                        primary={true}/>
-                    </div>
-                  }
+                <div className="row">
+                  <div className="col s0 l10"></div>
+                  <div className="col s12 l2">
+                    <Button type="primary" onClick={() => {
+                        this.props.history.push(LINKS.HOTEL_SEARCH);
+                        console.log('hotel');
+                      }} icon="search">Search</Button>
+                    {/* <RaisedButton
+                      onClick={() => {
+                        this.props.history.push(LINKS.HOTEL_SEARCH);
+                        console.log('hotel');
+                      }}
+                      label="Find Schedule"
+                      primary={true}
+                      fullWidth={(window.innerWidth < 600) ? true : false}
+                      icon={<FontIcon className="material-icons">search</FontIcon>}/> */}
+                  </div>
+                </div>

-                </ToolbarGroup>
-              </Toolbar>
-              <Divider/>
-              <div>
-                <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
-                        messageStyle={{textAlign: 'center'}}
-                        backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
-                  <TableAntd
-                    pagination={true}
-                    className='table-padded'
-                    dataSource={this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list}
-                    onChange={this.handleChangeSorter}
-                    columns={columns}
-                    // onRow={(record) => {`
-                    //   return {
-                    //     onClick: () => {
-                    //       this.props.history.push(`${LINKS.ORDER}/${record.id}`);
-                    //     },       // click row
-                    //   };
-                    // }}
-                  />
-                  {/*<Table selectable={false}>*/}
-                  {/*<TableHeader displaySelectAll={false}*/}
-                  {/*adjustForCheckbox={false}*/}
-                  {/*enableSelectAll={false}>*/}
-                  {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
-                  {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                  {/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
-                  {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                  {/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
-                  {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                  {/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
-                  {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                  {/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
-                  {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                  {/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
-                  {/*</TableRow>*/}
-                  {/*</TableHeader>*/}
-                  {/*<TableBody displayRowCheckbox={false}>*/}
-                  {/*{*/}
-                  {/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
-
-                  {/*return (*/}
-                  {/*<TableRow key={index}>*/}
-                  {/*<TableRowColumn style={{width:'13%'}}>*/}
-                  {/*{item.id.split('-')[0]}*/}
-                  {/*</TableRowColumn>*/}
-                  {/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
-                  {/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
-                  {/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
-                  {/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
-                  {/*thousandSeparator={true}*/}
-                  {/*prefix={'IDR '}/></TableRowColumn>*/}
-                  {/*</TableRow>*/}
-                  {/*);*/}
-                  {/*})*/}
-                  {/*}*/}
-                  {/*{*/}
-                  {/*(this.transactionStore.list.length === 0) ?*/}
-                  {/*<TableRow>*/}
-                  {/*<TableRowColumn>*/}
-                  {/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
-                  {/*</TableRowColumn>*/}
-                  {/*</TableRow> : ""*/}
-                  {/*}*/}
-                  {/*</TableBody>*/}
-                  {/*</Table>*/}
-                </Loader>
              </div>
-            </Card></div>
+            </Loader>
+          </Card>
        </div>
-
-
      </div>
    )
  }
--- a/src/common/routes.js
+++ b/src/common/routes.js
@ -106,7 +106,8 @@ export const LINKS = {
  FEATURED_ITEMS : '/app/featured_banners',
  CUSTOM_MENU : '/app/custom_menu',
  PROMOTION:'/app/promotion',
-  HOTEL:'/app/hotel'
+  HOTEL:'/app/hotel',
+  HOTEL_SEARCH:'/app/hotel/search'
 };

@inject('appstate')