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

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

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#completed" role="tab">Processed <span class="badge badge-pill badge-default">2000</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tables" role="tab">Queue 1 <span class="badge badge-pill badge-default">18</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#rooms" role="tab">Queue 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#orders" role="tab">Queue 3</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="completed" role="tabpanel" style="min-height:670px; max-height:670px; overflow-y:scroll">
        <div class="card-columns" style="padding-top:10px">
          <div class="card">
            <div class="card-block  order-completed">
              <h4 class="card-title">9. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text">
                <small class="text-muted">Order at 12:23, Kyaw Lwin</small> |
                <small class="text-muted">Printed at 12:23</small> |
                <small class="text-muted">Completed at 12:43</small>
              </p>


            </div>
          </div>
          <div class="card">
            <div class="card-block  order-void">
              <h4 class="card-title">9. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">9. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
        </div>

      </div>
      <!-- Panel 1 - Tables -->
      <div class="tab-pane active" id="tables" role="tabpanel">
        <!--- Booking Items -->
        <div class="card-columns" style="padding-top:10px">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">1. Table 4 - Beef Steak [x1]</h4>
              <p class="card-text">Medium, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">2. Table 4 - Beef Steak [x1]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">3. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">4. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">5. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">6. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">7. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">8. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
            <div class="card-footer">
              <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">9. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">10. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">11. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">12. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">13. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">14. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">15. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">16. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">17. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">18. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">19. Table 4 - Beef Steak [x3]</h4>
              <p class="card-text">Well Done, Fries, Salad</p>
              <p class="card-text"><small class="text-muted">Order at 12:23, Kyaw Lwin</small></p>
            </div>
          </div>
          <!--- end of Items-->
        </div>
      </div>
      <!-- Panel 1 - Tables  - End -->
      <!-- Panel 2 - Rooms -->
      <div class="tab-pane" id="rooms" role="tabpanel" style="min-height:670px; max-height:670px; overflow-y:scroll">
        <!--- Booking Items -->
        <div class="card-columns" style="padding-top:10px">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title that wraps to a new line</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
          <div class="card p-3">
            <blockquote class="card-block card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>
                <small class="text-muted">
                  Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div class="card card-inverse card-primary p-3 text-center">
            <blockquote class="card-blockquote">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
              <footer>
                <small>
                  Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
              </footer>
            </blockquote>
          </div>
          <div class="card text-center">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
        </div>


      </div>
      <!-- Panel 2 - Rooms  - End -->
      <!-- Panel 3 - Orders -->
      <div class="tab-pane" id="orders" role="tabpanel" style="min-height:670px; max-height:670px; overflow-y:scroll">

        <!--- Booking Items -->
        <div class="card-columns" style="padding-top:10px">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title that wraps to a new line</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>

            </div>
          </div>
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>

          <div class="card text-center">
            <div class="card-block">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
        </div>


      </div>
        <!-- Panel 3 - Orders - End -->
    </div>



  </div>
  <!-- Column Two -->
  <div class="col-lg-3 col-md-3 col-sm-3">
    <div class="card"  >
      <div class="card-header">
        <div id="order-title"><strong>ORDER DETAILS</strong> - Table 4</div>
      </div>
      <div class="card-block">
        <div class="card-title">
          <table class="table">
            <thead>
              <tr>
                <th style="width:33%; text-align:left">Order By</th>
                <th style="width:33%; text-align:right">Order At</td>
                <th style="width:33%; text-align:right">Customer</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td style="width:33%; text-align:left">Kyaw Lwin</td>
                <td style="width:33%; text-align:right">20/04/17 9:30PM</td>
                <td style="width:33%; text-align:right">John Smith</td>
              </tr>
              <tr>
                <td><strong>Table/Room</strong></td>
                <td colspan="2">Table 4</td>
              </tr>
            </tbody>
          </table>
          <table class="table">
            <thead>
              <tr>
                <th style="width:80%; text-align:left">Items</th>
                <th style="width:20%; text-align:right">QTY</td>
              </tr>
            </thead>
          </table>
        </div>
        <div class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:80%; text-align:left">
                  Menu Items Name <br/>
                  Less Sweet, No MSG
                </td>
                <td style="width:20%; text-align:right">
                  5
                </td>
              </tr>


            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
  <!-- Column Three--->
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- OQS Buttons -->
    <button type="button" class="btn btn-primary btn-lg btn-block" disabled>Print</button>
    <button type="button" class="btn btn-primary btn-lg btn-block" disabled>Print <br/>Order<br/>Summary</button>

  </div>
</div>