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

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

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#completed" role="tab">Processed <span class="badge badge-pill badge-default" id="completed_count"><%= @queue_completed_item.length %></span></a>
      </li>

      <%      
        # For Tab Disable for Station is inactive
        status=""
        @queue_stations_items.each do |qsi|  
          if qsi[:is_active] == false   
            status="disabled"    
          end
      %>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href=<%= '#' + qsi[:station_name].gsub(' ', '_') %> role="tab" <%= status %>>
          <%= qsi[:station_name] %>
              <span class="badge badge-pill badge-default" id=<%= qsi[:station_name].gsub(' ', '_') + '_count' %>>
              <%= qsi[:item_count] %>                
              </span>         
        </a>
      </li>
      <% end %>      
    </ul>
    <!-- Nav tabs - End -->

    <div class="tab-content" style="min-height:670px; max-height:670px; overflow:auto">
      <!--- Panel 0 - Completed -->
      <div class="tab-pane active" id="completed" role="tabpanel">
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
            <%   
                @queue_completed_item.each do |qid|                                   
            %>
              <div class="card queue_station">
                <div class="card-block">
                  <h4 class="card-title">
                    <span class="order-zone">
                      <%= qid.zone %>
                    </span> - 
                    <span class="order-item">
                      <%= qid.item_name %>
                    </span> [x
                    <span class="order-qty">
                      <%= qid.qty %>
                    </span> ]   
                  </h4>                  
                  <p class="card-text">Medium, Fries, Salad</p>
                  <p class="card-text">
                    <small class="text-muted">Order at 
                    <span class="order-at">
                      <%= qid.created_at.strftime("%Y %m %d") %>
                    </span> - 
                    <span class="order-by">
                      <%= qid.item_order_by %>
                    </span> 
                    </small>
                  </p>
                  <p class="hidden order-customer"><%= qid.customer_name %></p>
                  <p class="hidden assigned-order-item"><%= qid.assigned_order_item_id %></p>                
                </div>
              </div> 
              <%                                       
                end
              %>    
        </div>
      </div>
      <!-- End Panel 0 - Completed -->

      <!-- Order Item for Queue Station -->
      <%      
        @queue_stations_items.each do |qsi|         
      %>
          <!-- Generated Pane -->
          <div class="tab-pane" id=<%= qsi[:station_name].gsub(' ', '_') %> role="tabpanel">
            <!--- Order Items -->
            <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
              <%   
                  @queue_items_details.each do |qid|               
                    if qid.station_name == qsi[:station_name]
              %>
                <div class="card queue_station">
                  <div class="card-block">
                    <h4 class="card-title">
                      <span class="order-zone">
                        <%= qid.zone %>
                      </span> - 
                      <span class="order-item">
                        <%= qid.item_name %>
                      </span> [x
                      <span class="order-qty">
                        <%= qid.qty %>
                      </span> ]   
                    </h4>                  
                    <p class="card-text">Medium, Fries, Salad</p>
                    <p class="card-text">
                      <small class="text-muted">Order at 
                      <span class="order-at">
                        <%= qid.created_at.strftime("%Y %m %d") %>
                      </span> - 
                      <span class="order-by">
                        <%= qid.item_order_by %>
                      </span> 
                      </small>
                    </p>
                    <!-- Hidden Fields for Items -->                    
                    <p class="hidden order-customer"><%= qid.customer_name %></p>
                    <p class="hidden assigned-order-item"><%= qid.assigned_order_item_id %></p>
                  </div>
                  <div class="card-footer">
                    <button id=<%= 'assigned_queue_' + qid.assigned_order_item_id.to_s %> class="btn btn-primary btn-lg btn-block order-complete">COMPLETE</button>
                  </div>
                </div> 
                <%                     
                    end
                  end
                %>

              <!--- end of Items-->
            </div>
          </div>
          <!-- end of Pane -->
      <% end %> 
      <!-- End Order Item for Queue Station -->     
    </div>
  </div>

  <!-- Column Two -->
  <div class="col-lg-3 col-md-3 col-sm-3">
    <div class="card"  >
      <div class="card-header">
        <div><strong id="order-title">ORDER DETAILS -</strong></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 id="order-by" style="width:33%; text-align:left"></td>
                <td id="order-at" style="width:33%; text-align:right"></td>
                <td id="order-customer" style="width:33%; text-align:right"></td>
              </tr>
              <tr>
                <td><strong>Table/Room</strong></td>
                <td id="order-from" colspan="2"></td>
              </tr>
            </tbody>
          </table>                  
        </div>
        <div class="card-text" style="min-height:400px; max-height:400px; overflow:auto">
          <table class="table">
            <thead>
              <tr>
                <th style="width:80%; text-align:left">Items</th>
                <th style="width:20%; text-align:right">QTY</th>
              </tr>
            </thead>
            <tbody>              
              <tr>
                <td id="order-items" style="width:80%; text-align:left">
                  <!-- Menu Items Name <br/>
                  Less Sweet, No MSG -->
                </td>
                <td id="order-qty" 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" title="Print Order Item" id="print_order_item" class="btn btn-primary btn-lg btn-block">Print</a>
    <button type="button" class="btn btn-primary btn-lg btn-block" id="print_order_summary">Print <br/>Order<br/>Summary</button>

  </div>
</div>