sx-fc/app/views/crm/home/index.html.erb

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">
    <!-- Column One -->

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#queue" role="tab">Queue <span class="badge badge-pill badge-default"><%= @queue.count %></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#booking" role="tab">Bookings <span class="badge badge-pill badge-default"><%= @booking.where("booking_status=?","new").count %></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#customer" role="tab">Customers</a>
      </li>
    </ul>
    <!-- Nav tabs - End -->

    <div class="tab-content" style="min-height:670px; max-height:670px; overflow-y:scroll">
      <!--- Panel 0 - Completed -->
      <div class="tab-pane" id="queue" role="tabpanel" style="min-height:670px; max-height:670px; overflow-y:scroll">
        <%= render :partial => 'queue' %>

      </div>
      <!-- Panel 1 - Tables -->
      <div class="tab-pane active" id="booking" role="tabpanel">

        <%= render :partial => 'booking' %>
        
      </div>
      <!-- Panel 1 - Tables  - End -->
      <!-- Panel 2 - Rooms -->
      <div class="tab-pane" id="customer" role="tabpanel" style="min-height:670px; max-height:670px; overflow-y:scroll">
          <%= render :partial => 'customer' %>
      </div>
      <!-- Panel 2 - Rooms  - End -->
      <!-- Panel 3 - Orders -->
        <!-- Panel 3 - Orders - End -->
    </div>
  </div>
  <!-- Column Two -->
  <div class="col-lg-5 col-md-5 col-sm-5">
    <div class="card"  >
      <div class="card-header">
        <div id="order-title"><strong>ORDER DETAILS</strong> - Table 4</div>
      </div>
      <div id="station"></div>
      <div class="card-block">
        <div class="card-title">
          <table class="table for-booking" id="for-booking">
            <thead>
              <tr>
                <th style="width:33%; text-align:left">Order By</th>
                <th style="width:33%; text-align:center;">Order At</th>
                <th style="width:33%; text-align:right">Customer</th>
              </tr>
            </thead>
            <tbody>
              <tr id="">
                <td style="width:33%; text-align:left" id="order_by"></td>
                <td style="width:33%; text-align:center" id="order_at"></td>
                <td style="width:33%; text-align:right" id="customer"></td>
              </tr>
              <tr id="">
                <td><strong>Table/Room</strong></td>
                <td colspan="2" style="text-align:left" id="table"></td>
              </tr>
            </tbody>
          </table>
          <table class="table customer-detail hide">
            <thead>
              <tr>
                <td style="width:44%; text-align:center"><strong>Name</strong></td>
                <td style="width:44%; text-align:" id="cus_name"></td>
              </tr>
              <tr>
                <td style="width:44%; text-align:center"><strong>Email</strong></td>
                <td style="width:44%; text-align:" id="cus_email"></td>
              </tr>
              <tr>
                <td style="width:44%; text-align:center"><strong>Contact No</strong></td>
                <td style="width:44%; text-align:" id="cus_contact_no"></td>
              </tr>
            </thead>
          </table>
          <table class="table">
            <thead>
              <tr>
                <th style="width:33%; text-align:left">Items</th>
                <th style="width:33%; text-align:center">Qty</th>
                <th style="width:33%; text-align:right">Price</th>
              </tr>
            </thead>
          </table>
         
        </div>

        
        <div class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll">
          <table class="table summary-items">
            <tbody>
             
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
  <!-- Column Three--->
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- OQS Buttons -->
    <button id="crm_print" value="" disabled="disabled" data-type="assign" class="btn crm_print btn-primary btn-lg btn-block" >
        Print
    </button>
     <button type="button" class="btn btn-primary btn-lg btn-block" disabled>Print <br/>Order<br/>Summary</button>
     <button id="assign" value="" disabled="disabled" data-type="assign" class="btn assign btn-primary btn-lg btn-block">ASSIGN</button>
     <button id="cancel" value="" disabled="disabled" data-type="cancel" class="btn btn-danger cancel btn-lg btn-block">CANCLE</button>

  </div>
</div>