diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index 9033be0..f65a9a8 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -400,9 +400,9 @@ export default class App extends React.Component {
 
             <Link onClick={this
               .changeRoute
-              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+              .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
               leftIcon={<img src="/assets/images/icon/hotel.png"/>}
-              className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
+              className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
               className="menuAkun">Hotel</span></MenuItem></Link>
 
             <Link onClick={this
diff --git a/src/common/pages/App/routes.js b/src/common/pages/App/routes.js
index eb44447..01197a3 100644
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@@ -25,6 +25,7 @@ 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 TasksDetail from './../Tasks/TaskDetail/index';
 import CustomerComponent from "../Customers/index";
 import CustomerDetail from "../CustomerDetail/index";
@@ -71,6 +72,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={SettingComponent} path={LINKS.SETTING}/>
         <Route exact component={OrderComponent} path={LINKS.ORDER}/>
         <Route exact component={WalletComponent} path={LINKS.WALLET}/>
+        <Route exact component={HotelComponent} path={LINKS.HOTEL}/>
         <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
diff --git a/src/common/pages/Hotel/index.js b/src/common/pages/Hotel/index.js
new file mode 100644
index 0000000..a63ca69
--- /dev/null
+++ b/src/common/pages/Hotel/index.js
@@ -0,0 +1,312 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  Card,
+  CardTitle,
+  Divider,
+  RaisedButton,
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+  TextField,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  IconButton,
+  IconMenu, MenuItem,
+} 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 Loader from 'react-loader-advanced';
+import './style.scss';
+import {DIALOG} from "../../stores/global_ui";
+import EmptyComponent from '../EmptyComponent';
+
+@inject('appstate')
+@observer
+export default class HotelComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+      searchText: '',
+      slideIndex: 0,
+      filteredInfo: null,
+      sortedInfo: null,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    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,
+    });
+  };
+
+  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});
+
+  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 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>
+        )
+      },
+      {
+        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>
+                <div className="col s6 m6">
+                  <Card className="cardLite row">
+                    <CardTitle titleStyle={{color:'#6772e5'}} title={balance} subtitle="Total Balance"/>
+                  </Card>
+                </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>
+                  }
+
+                </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>
+        </div>
+
+
+      </div>
+    )
+  }
+}
diff --git a/src/common/pages/Hotel/style.scss b/src/common/pages/Hotel/style.scss
new file mode 100644
index 0000000..0cdb30e
--- /dev/null
+++ b/src/common/pages/Hotel/style.scss
@@ -0,0 +1,49 @@
+.wallet {
+  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%;
+  }
+}
diff --git a/src/common/routes.js b/src/common/routes.js
index 04bff28..77f85a4 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -105,7 +105,8 @@ export const LINKS = {
   FEATURED_CATEGORY : '/app/featured_categories',
   FEATURED_ITEMS : '/app/featured_banners',
   CUSTOM_MENU : '/app/custom_menu',
-  PROMOTION:'/app/promotion'
+  PROMOTION:'/app/promotion',
+  HOTEL:'/app/hotel'
 };
 
 @inject('appstate')