From 92e888588628a7a276a11e167c3ecaaa8951c89c Mon Sep 17 00:00:00 2001
From: Aung Myo <aungmyo.zaw@code2lab.com>
Date: Mon, 9 Oct 2017 15:22:58 +0630
Subject: [PATCH] update admin theme

---
 app/assets/javascripts/application.js         |   5 +
 app/assets/stylesheets/application.scss       |  31 ++
 .../crm/dining_queues_controller.rb           |   2 +-
 app/controllers/oqs/home_controller.rb        |   2 +-
 app/views/crm/customers/_new_form.html.erb    |  33 +-
 app/views/crm/customers/index.html.erb        | 206 ++++++------
 app/views/crm/dining_queues/_form.html.erb    |   2 +-
 app/views/crm/dining_queues/index.html.erb    |  29 +-
 app/views/crm/dining_queues/new.html.erb      |  20 +-
 app/views/layouts/application.html.erb        |  19 --
 app/views/oqs/home/index.html.erb             | 297 ++++++++++--------
 11 files changed, 365 insertions(+), 281 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 74aac80d..b9339fa0 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_nested_form
 //= require tether
+//= require bootstrap/js/bootstrap.js
 //= require bootstrap/js/popper.min
 //= require bootstrap/js/bootstrap-material-design.min
 //= require jquery_ujs
@@ -22,6 +23,10 @@
 //= require bootstrap-select/js/bootstrap-select
 //= require jquery-slimscroll/jquery.slimscroll.js
 //= require node-waves/waves.js
+//= require autosize/autosize.js
+//= requier momentjs/moment.js
+//= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js
+//= require BSBMaterial/pages/forms/basic-form-elements.js
 //= require jquery-countto/jquery.countTo.js
 //= require raphael/raphael.min
 //= require morrisjs/morris
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 3a50565d..1e385413 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -2,6 +2,8 @@
 @import "bootstrap/css/bootstrap-material-design.min";
 @import "node-waves/waves";
 @import "animate-css/animate";
+@import "bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker";
+@import "bootstrap-select/css/bootstrap-select";
 @import "morrisjs/morris";
 @import "BSBMaterial/style";
 @import "BSBMaterial/themes/all-themes";
@@ -91,3 +93,32 @@ section.content {
   opacity: 1; 
 }
 
+#sxModal {
+  display: none;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    background-color: rgba(0,0,0,0.4);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1100;
+}
+
+#sxModal-Content {  
+  position: relative;
+  left: 42%;
+  top: 30%;
+  background-color: #32ad1a;  
+  color: #fff;
+  text-align: center;
+    width: 200px;
+    height: 200px;
+    padding-top: 5%;
+    border-radius: 100px;
+    z-index: 1101;
+}
+
diff --git a/app/controllers/crm/dining_queues_controller.rb b/app/controllers/crm/dining_queues_controller.rb
index a48e03a7..9029bc6c 100644
--- a/app/controllers/crm/dining_queues_controller.rb
+++ b/app/controllers/crm/dining_queues_controller.rb
@@ -1,4 +1,4 @@
-class Crm::DiningQueuesController < BaseCrmController
+class Crm::DiningQueuesController < ApplicationController#BaseCrmController
   load_and_authorize_resource
   before_action :set_dining_queue, only: [:show, :edit, :update, :destroy]
 
diff --git a/app/controllers/oqs/home_controller.rb b/app/controllers/oqs/home_controller.rb
index af843c7e..561b0552 100644
--- a/app/controllers/oqs/home_controller.rb
+++ b/app/controllers/oqs/home_controller.rb
@@ -1,4 +1,4 @@
-class Oqs::HomeController < BaseOqsController
+class Oqs::HomeController < ApplicationController#BaseOqsController
   def index
 
   	@queue_stations = OrderQueueStation.all
diff --git a/app/views/crm/customers/_new_form.html.erb b/app/views/crm/customers/_new_form.html.erb
index 260bdbcd..177c3d14 100644
--- a/app/views/crm/customers/_new_form.html.erb
+++ b/app/views/crm/customers/_new_form.html.erb
@@ -1,18 +1,18 @@
-<div class="col-lg-4 col-md-4 col-sm-4" style="min-height:600px; max-height:600px; overflow-x:scroll">
+
     <%= simple_form_for @crm_customer,:url => crm_customers_path, :method => :post do |f| %>
     <span class="patch_method"></span>
-    <%= f.hidden_field :id, :class => "form-control col-md-6 " %>   
+    <%= f.hidden_field :id, :class => "form-control " %>   
 
     <div class="form-group">
       <label>Salutation :</label><br>
        <label>Mr</label>
-        <%= f.radio_button :salutation,"Mr", :class => "salutation mr", :value=>"Mr", :style=>"width: 30px"%>
+        <%= f.radio_button :salutation,"Mr", :class => "salutation mr with-gap radio-col-indigo", :value=>"Mr", :style=>"width: 30px"%>
         <label>Miss</label>
-        <%= f.radio_button :salutation,"Mrs", :class => "salutation mrs", :value=>"Mrs", :style=>"width: 30px"%>
+        <%= f.radio_button :salutation,"Mrs", :class => "salutation mrs with-gap radio-col-indigo", :value=>"Mrs", :style=>"width: 30px"%>
         <label>Mrs</label>
-        <%= f.radio_button :salutation,"Miss", :class => "salutation miss", :value=>"Miss", :style=>"width: 30px"%>
+        <%= f.radio_button :salutation,"Miss", :class => "salutation miss with-gap radio-col-indigo", :value=>"Miss", :style=>"width: 30px"%>
         <label>Mdm</label>
-        <%= f.radio_button :salutation,"Mdm", :class => "salutation mdm", :value=>"Mdm", :style=>"width: 30px"%>    
+        <%= f.radio_button :salutation,"Mdm", :class => "salutation mdm with-gap radio-col-indigo", :value=>"Mdm", :style=>"width: 30px"%>    
    </div>
   
     <div class="form-group <%= (flash["errors"]) ? "has-error" : "" %>">
@@ -76,7 +76,10 @@
 
     <div class="form-group">
     <label>Sr.No</label>
-     <input type="text" name="" value="<%=@count_customer%>" class="form-control" readonly="true">
+    <div class="form-line disabled">
+    <input type="text" name="" value="<%=@count_customer%>" class="form-control" disabled="" >
+    </div>
+     
    </div>
 
     <div class="form-group">
@@ -86,7 +89,7 @@
 
     <div class="form-group">
     <label>Select Customer Type</label>
-      <select class="selectpicker form-control col-md-12" id="customer_type" name="customer[customer_type]" style="height: 40px" >
+      <select class="form-control col-md-12" id="customer_type" name="customer[customer_type]" style="height: " >
         <%  Lookup.where("lookup_type = ?", "customer_type" ).each do |ct| %>
            <option value="<%= ct.value %>">
           <%= ct.name %></option>
@@ -110,7 +113,7 @@
 
     <div class="form-group">
       <label>Paypar Account No:</label>
-      <div class="input-group">            
+      <div class="-group">            
         <input type="text" class="form-control" id="paypar_account_no" name="customer[paypar_account_no]" readonly/>
         <div class="input-group-addon"><span class="fa fa-credit-card"></span></div>
       </div>
@@ -118,7 +121,7 @@
 
    <div class="form-group">
    <label>Select Member Group</label>
-        <select class="selectpicker form-control col-md-12" name="member_group_id"  style="height: 40px" >
+        <select class="form-control col-md-12" name="member_group_id"  style="height: " >
           <option value="">Select Membership Group</option>
             <%  Lookup.where("lookup_type = ?", "member_group_type" ).each do |member| %>
                <option value="<%= member.value %>">
@@ -133,7 +136,7 @@
         <%= f.button :button, "Reset",:class => 'btn btn-danger ', :id => 'reset' %>
   </div>
  <%end%>
-</div>
+
 
 <div id="sxModal">
     <div id="sxModal-Content"><h3>Card Tap</h3></div>
@@ -142,14 +145,6 @@
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
   <div class="modal-dialog modal-lg" style="margin-left:-380px">
     <div class="modal-content">
-
-      <!-- <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
-      </div> -->
-
       <div class="modal-body">
         <div id="container">
             <video autoplay="true" id="videoElement">
diff --git a/app/views/crm/customers/index.html.erb b/app/views/crm/customers/index.html.erb
index ca5404ec..ec71066c 100644
--- a/app/views/crm/customers/index.html.erb
+++ b/app/views/crm/customers/index.html.erb
@@ -1,108 +1,126 @@
-<!-- <div class="row">
-  <div class="col-lg-12">
-    <ol class="breadcrumb">
-       <li><a href="<%= crm_root_path %>">Home</a></li>
-       <li class="active">
-           <a href="<%= crm_customers_path %>">Customer</a>
-       </li>
-       <!-- <a href="<%= new_crm_customer_path%>" class="btn btn-primary pull-right">
-        <i class="fa fa-plus-circle fa-lg"></i> Add Customer
-       </a> 
-    </ol>
-  </div>
-</div> -->
-<div class="row">
-  <div class="col-lg-7 col-md-7 col-sm-7">
-
-      <div class="main-box-body clearfix">
-        <div class="table-responsive">
-          <table class="table table-striped">
-
-            <thead>
-
-              <tr>
-                 <td colspan="6">
-                    <%= form_tag crm_customers_path, :id => "filter_form", :method => :get do %>
-                      <div class="input-append col-md-7 form-group pull-left">
-                        <input type="text" name="filter" style="margin-right:10px" placeholder="Search" id="search" class="form-control input-xs col-md-9">
-                        <input type="hidden" name="type" id="type" value="">
-                        <button type="submit" class="btn btn-primary btn-md">Search</button>
-                        <!-- <a href="modal-window" data-toggle= "modal" data-target="#modal-window" class="btn btn-primary btn-md" id="card_read" >Read Card</a> -->
-
-                        <!-- <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
-                      </div>
-                    <% end %>
-                    <button id="member_acc_no" class="btn btn-success btn-md"><span class="fa fa-credit-card"></span> Member Card</button>
-                    <button id="qr_code" class="btn btn-danger btn-md">
-                      <span class="fa fa-credit-card"></span> QR CODE
-                    </button>
-                   
-    
-                 </td>
-              </tr>
-              <tr>
-                <th>Select</th>
-                <th>Sr.no</th>
-                <th>Name</th>
-                <th>Card No</th>
-                <th>Contact no</th>
-                <th>Email</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-
-            <tbody>
-                <% @i = 0 %>
-                 <% @crm_customers.each do |crm_customer| %>
-
-                    <tr class="customer_tr" data-ref="<%= crm_customer.customer_id %>">
-                     <td>
-                     <input type="radio" style="width:20px;" name="checkbox" class="checkbox_check" ></td>
-                     <td>
-                      <% if crm_customer.customer_id != "CUS-000000000001" && crm_customer.customer_id != "CUS-000000000002" %>
-                      <%= @i += 1 %>
-                      <% end %>
-                      </td>
-                      <td><%= crm_customer.name %></td>
-                      <td><%= crm_customer.card_no rescue '-' %></td>
-                      <td><%= crm_customer.contact_no %></td>
-                      <td><%= crm_customer.email %></td>
-                      <td><%= link_to 'Show', crm_customer_path(crm_customer) %></td>
-
-                    </tr>
-
-                  <% end %>
-
-            </tbody>
-          </table>
-          <br>
-
-          <%= paginate @crm_customers %>
-        </div>
-      </div>
-  </div>
-
-    <%= render 'new_form', crm_customer: @crm_customer, taxes: @taxes %>
-
-    <div class="col-lg-1 col-md-1 col-sm-1">
-    <br>
-       <a href="<%= dashboard_path%>" class="btn btn-primary">
-        <i class="fa fa-arrow-left fa-lg"></i> Back
-       </a>
-    </div>
+<div class="container-fluid">
+<div class="page-header">
+ <ul class="breadcrumb">
+  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+  <li class="breadcrumb-item active">CRM</li>
+ <!--  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li> -->
+  <span class="float-right">
+    <%= link_to 'Back', dashboard_path %>
+  </span>
+ </ul>
 </div>
+<br />
+  <div class="row clearfix">
+    <div class="col-lg-8 col-md-8 col-sm-8">
+      <!-- <div class="main-box-body clearfix"> -->
+      <div class="body table-responsive">
+        <table class="table table-hover table-striped">
+      <!-- <div class="table-responsive">
+        <table class="table table-striped"> -->
+          <thead>
+            <tr>
+             <td colspan="7">
+              <%= form_tag crm_customers_path, :id => "filter_form", :method => :get do %>
+                <!-- <div class=" col-md-7 form-group float-left">
+                  <input type="text" name="filter" style="margin-right:10px" placeholder="Search" id="search" class="form-control input-xs col-md-9">
+                  <input type="hidden" name="type" id="type" value="">
+                  <button type="submit" class="float-right btn btn-primary btn-md">Search</button>
+                </div> -->
+              <% end %>
+             <!--  <button id="member_acc_no" class="btn btn-success btn-md"><span class="fa fa-credit-card"></span> Member Card</button>
+              <button id="qr_code" class="btn btn-danger btn-md">
+                <span class="fa fa-credit-card"></span> QR CODE
+              </button> -->
+              <div class="body">
+               <%= form_tag crm_customers_path, :id => "filter_form", :method => :get do %>
+               <div class="row clearfix">
+                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
+                  <div class="form-group">
+                    <div class="form-line">
+                      <input type="text" name="filter" style="margin-right:10px" placeholder="Search" id="search" class="form-control">
+                      <input type="hidden" name="type" id="type" value="">
+                    </div>
+                  </div>
+                </div>
+                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
+                  <button type="submit" class="btn bg-blue waves-effect waves-effect">Search</button>
+                </div>
+                <!-- <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" id="member_acc_no"> -->
+                  <button type="button" id="member_acc_no" class="btn bg-green btn-sm waves-effect" style="height: 30%;margin-right: 10px;">Member Card</button>
+                <!-- </div> -->
+                <!-- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" id="qr_code"> -->
+                  <button type="button" id="qr_code" class="btn bg-green btn-sm waves-effect" style="height: 30%;margin-right: 10px;">QR CODE</button>
+                <!-- </div> -->
+              </div>
+              <% end %>
 
+            </div>
+            </td>
+          </tr>
+          <tr>
+            <th></th>
+            <th>Sr.no</th>
+            <th>Name</th>
+            <th>Card No</th>
+            <th>Contact no</th>
+            <th>Email</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <% @i = 0 %>
+          <% @crm_customers.each do |crm_customer| %>
+
+          <tr class="customer_tr" data-ref="<%= crm_customer.customer_id %>">
+           <td>
+             <input type="radio" style="width:20px;" name="checkbox" class="checkbox_check" ></td>
+             <td>
+              <% if crm_customer.customer_id != "CUS-000000000001" && crm_customer.customer_id != "CUS-000000000002" %>
+              <%= @i += 1 %>
+              <%else%>
+              -
+              <% end %>
+            </td>
+            <td><%= crm_customer.name %></td>
+            <td><%= crm_customer.card_no rescue '-' %></td>
+            <td><%= crm_customer.contact_no %></td>
+            <td><%= crm_customer.email %></td>
+            <td><%= link_to 'Show', crm_customer_path(crm_customer) %></td>
+
+          </tr>
+
+          <% end %>
+
+        </tbody>
+        </table>
+        <br>
+        <%= paginate @crm_customers %>
+      </div>
+    <!-- </div> -->
+    </div>
+    <div class="col-lg-4 col-md-4 col-sm-4" style="min-height:600px; max-height:600px; overflow-x:scroll">
+    <%= render 'new_form', crm_customer: @crm_customer, taxes: @taxes %>
+    </div>
+    <!-- <div class="col-lg-1 col-md-1 col-sm-1 ">
+      <br>
+      <a href="<%= dashboard_path%>" class="btn btn-primary">
+        <i class="fa fa-arrow-left fa-lg"></i> Back
+      </a>
+    </div> -->
+  </div>
+</div>
 
 <script type="text/javascript">
 
 $(function() {
 
-    $('.datepicker').datepicker({
+    /*$('.datepicker').datepicker({
         format : 'dd-mm-yyyy',
         autoclose: true
     });
     $('.datepicker').attr('ReadOnly','true');
-    $('.datepicker').css('cursor','pointer');
+    $('.datepicker').css('cursor','pointer');*/
 
     // Read Card Reader
     $("#member_acc_no").on('click', function(e){
diff --git a/app/views/crm/dining_queues/_form.html.erb b/app/views/crm/dining_queues/_form.html.erb
index ad2d0283..7ae38f5b 100644
--- a/app/views/crm/dining_queues/_form.html.erb
+++ b/app/views/crm/dining_queues/_form.html.erb
@@ -14,7 +14,7 @@
       </div>
       <br>
       <div class="form-actions">
-        <%= f.button :submit,"Create Queue" %>
+        <%= f.button :submit,"Create Queue" ,:class=>"btn btn-primary bg-blue"%>
       </div>
   </div>
 <% end %>
diff --git a/app/views/crm/dining_queues/index.html.erb b/app/views/crm/dining_queues/index.html.erb
index ace0f703..30599acd 100644
--- a/app/views/crm/dining_queues/index.html.erb
+++ b/app/views/crm/dining_queues/index.html.erb
@@ -1,12 +1,13 @@
-<!-- <div class="page-header">
-   <ul class="breadcrumb">
-    <li><a href="<%=  %>">Home</a></li>
-    <li>Queue</li>
-    <span style="float: right">
-      <%= link_to t('.new', :default => t("helpers.links.new")),new_crm_dining_queue_path,:class => 'btn btn-primary btn-sm' %>
-    </span>
-  </ul>
-</div> -->
+<div class="container-fluid">
+<div class="page-header">
+ <ul class="breadcrumb">
+  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+  <li class="breadcrumb-item active">CRM</li>
+  <span class="float-right">
+    <%= link_to 'Back', dashboard_path %>
+  </span>
+ </ul>
+</div>
 
 <div class="row">
  <!-- Column One -->
@@ -48,13 +49,15 @@
 <!-- tabs - End -->
 </div>
   <div class="col-lg-1 col-md-1 col-sm-1">
-    <%= link_to t('.new', :default => t("helpers.links.new")),new_crm_dining_queue_path,:class => 'btn btn-primary btn-lg btn-block' %>
+    <%= link_to t('.new', :default => t("helpers.links.new")),new_crm_dining_queue_path,:class => 'btn bg-green btn-block btn-lg btn-block' %>
     <hr>
-    <button type="button" id="assign" class="btn btn-primary btn-lg btn-block" disabled>Assign</button>
-    <button type="button" id="cancel" class="btn btn-warning btn-lg btn-block" disabled>Cancel</button>
-    <a href="<%= dashboard_path %>" class="btn btn-primary btn-lg btn-block" role="button" aria-haspopup="true" aria-expanded="false"> Back </a>
+
+    <button type="button" id="assign" class="btn btn-primary btn-block btn-lg waves-effect" disabled>Assign</button>
+    <button type="button" id="cancel" class="btn btn-danger btn-block btn-lg waves-effect" disabled>Cancel</button>
+    <a href="<%= dashboard_path %>" class="btn btn-default btn-block waves-effect" role="button" aria-haspopup="true" aria-expanded="false"> Back </a>
   </div>
 </div>
+</div>
 <script type="text/javascript">
 $(function(){
 
diff --git a/app/views/crm/dining_queues/new.html.erb b/app/views/crm/dining_queues/new.html.erb
index 280a59b2..b838dabd 100644
--- a/app/views/crm/dining_queues/new.html.erb
+++ b/app/views/crm/dining_queues/new.html.erb
@@ -1,11 +1,15 @@
+<div class="container-fluid">
+<div class="page-header">
+ <ul class="breadcrumb">
+  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+  <li class="breadcrumb-item">CRM</li>
+  <li class="breadcrumb-item active"><a href="<%= crm_dining_queues_path %>">Queue</a></li>
+  <span class="float-right">
+    <%= link_to 'Back', dashboard_path %>
+  </span>
+ </ul>
+</div>
 
-<div class="span12">
-		<div class="page-header">
-		 <ul class="breadcrumb">
-		   	<li><a href="<%= root_path %>">Home</a></li>
-  			<li><a href="<%= crm_dining_queues_path %>">Queue</a></li>
-		  	<li>New</li>
-		 </ul>
-		</div>
     <%= render 'form', dining_queue: @dining_queue %>
+
 </div>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index bf72ee3c..6e8dd5f9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,27 +14,8 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
 
-    <!-- Bootstrap Core Css -->
-    <!-- <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
-
-    <!-- Waves Effect Css -->
-    <!-- <link href="plugins/node-waves/waves.css" rel="stylesheet" /> -->
-
-    <!-- Animation Css -->
-    <!-- <link href="plugins/animate-css/animate.css" rel="stylesheet" /> -->
-
-    <!-- Morris Chart Css-->
-    <!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
-
-    <!-- Custom Css -->
-    <!-- <link href="css/style.css" rel="stylesheet"> -->
-
-    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
-    <!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
-    <!-- <%= stylesheet_link_tag    'sx_font', media: 'all', 'data-turbolinks-track': 'reload' %> -->
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     
-    
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
 </head>
 
diff --git a/app/views/oqs/home/index.html.erb b/app/views/oqs/home/index.html.erb
index 468cd58b..826fe9f9 100644
--- a/app/views/oqs/home/index.html.erb
+++ b/app/views/oqs/home/index.html.erb
@@ -1,73 +1,100 @@
+<div class="container-fluid">
+  <div class="page-header">
+    <ul class="breadcrumb">
+      <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
+      <li class="breadcrumb-item active">OQS</li>
+      <!--  <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li> -->
+      <span class="float-right">
+        <%= link_to 'Back', dashboard_path %>
+      </span>
+    </ul>
+  </div>
+  <hr>
+  <!-- Column One -->
+  <div class="row clearfix">
+    <div class="col-lg-8 col-md-8 col-sm-8">  
+      <div class="body">
+        <%= form_tag oqs_root_path, :method => :get do %>
+        <div class="row clearfix">
+          <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
+            <div class="form-group">
+              <div class="form-line">
+                <input type="text" name="filter" class="form-control" placeholder="Search">
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
+            <button type="submit" class="btn bg-blue waves-effect waves-effect">Search</button>
+          </div>
 
-<hr>
-<!-- Column One -->
-<div class="row">
-  <div class="col-lg-8 col-md-8 col-sm-8">
-   <div class="row">
-    <div class="col-md-12">
-      <%= form_tag oqs_root_path, :method => :get do %>
-    <div class="form-group col-md-6">
-     <input type="text" name="filter" class="form-control input-md" placeholder="">
-    </div>
-
-    <div class="form-group col-md-6">
-     <input type="submit" value="Search" class='btn btn-primary btn-md'>
-    </div>
-    <% end %>
-    </div>
-   </div>     
-    <!-- Nav tabs -->
-    <ul class="nav nav-tabs" role="tablist">
-      <!-- <li class="nav-item nav-search <%= @filter.to_s.length > 0? " " : "hide"%>">
-        <a class="nav-link <%= @filter.to_s.length > 0? "active" : " "%>" data-toggle="tab" href="#search" role="tab">Searching .. <span class="badge badge-pill badge-default" id="completed_count"><%= @queue_completed_item.length %></span></a>
-      </li> -->
-      <li class="nav-item nav-completed">
-        <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
+        </div>
+        <% end %>
+      </div>
+     <ul class="nav nav-tabs tab-col-teal" role="tablist">
+                                        <li role="presentation" class="active">
+                                            <a href="#home_md_col_3" data-toggle="tab" aria-expanded="true">HOME</a>
+                                        </li>
+                                        <li role="presentation" class="">
+                                            <a href="#profile_md_col_3" data-toggle="tab" aria-expanded="false">PROFILE</a>
+                                        </li>
+                                        <li role="presentation">
+                                            <a href="#messages_md_col_3" data-toggle="tab">MESSAGES</a>
+                                        </li>
+                                        <li role="presentation">
+                                            <a href="#settings_md_col_3" data-toggle="tab">SETTINGS</a>
+                                        </li>
+                                    </ul>
+      <!-- Nav tabs -->
+      <ul class="nav nav-tabs" role="tablist">
+        <!-- <li class="nav-item nav-search <%= @filter.to_s.length > 0? " " : "hide"%>">
+          <a class="nav-link <%= @filter.to_s.length > 0? "active" : " "%>" data-toggle="tab" href="#search" role="tab">Searching .. <span class="badge badge-pill badge-default" id="completed_count"><%= @queue_completed_item.length %></span></a>
+        </li> -->
+        <li class="nav-item nav-completed">
+          <a class="nav-link active" data-toggle="tab" href="#completed" role="tab">Processed <span class="" id="completed_count"><%= @queue_completed_item.length %></span></a>
+        </li>
+        <% # For Tab Disable for Station is inactive
         status=""
         i=0
         @queue_stations.each do |qsi|  
           if qsi.is_active == false   
             status="disabled"    
-          end %>
+            end %>
             <li class="nav-item oqs_click" data-id="<%= qsi.id %>">
-                <p class="hidden oqs-id"><%= qsi.id  %></p>
-                <a class="nav-link" data-id="<%= qsi.id  %>" data-toggle="tab" href="" role="tab" <%= status %>>
-                  <%= qsi.station_name %>
-                  <% if @filter.nil? %>
-                    <span class="badge badge-pill badge-default oqs_count<%= i%> oqs_count" data-id="<%= qsi.id  %>"> <%= qsi.assigned_order_items.where("delivery_status=0 AND created_at >= '#{Time.now.beginning_of_day.utc}'").count %>                
-                    </span> 
-                  <%else%>
-                    <span class="badge badge-pill badge-default" data-id="<%= qsi.id  %>"> 
-                     <% @count.each do |c|%>    
-                      <% if qsi.id == c.station_id %>
-                        <%= c.total %>                
-                      <%end %>  
-                     <%end %>    
-                    </span>
-                  <%end%>
-                  <% if qsi.auto_print %>
-                    <span>(ap)</span>
-                  <% end %>  
-                </a>
-            </li>
-            <% i+=1%>
+              <p class="hidden oqs-id"><%= qsi.id  %></p>
+              <a class="nav-link" data-id="<%= qsi.id  %>" data-toggle="tab" href="" role="tab" <%= status %>>
+                <%= qsi.station_name %>
+                <% if @filter.nil? %>
+                <span class="badge badge-pill badge-default oqs_count<%= i%> oqs_count" data-id="<%= qsi.id  %>"> <%= qsi.assigned_order_items.where("delivery_status=0 AND created_at >= '#{Time.now.beginning_of_day.utc}'").count %>                
+                </span> 
+                <%else%>
+                <span class="" data-id="<%= qsi.id  %>"> 
+                 <% @count.each do |c|%>    
+                 <% if qsi.id == c.station_id %>
+                 <%= c.total %>                
+                 <%end %>  
+                 <%end %>    
+               </span>
+               <%end%>
+               <% if qsi.auto_print %>
+               <span>(ap)</span>
+               <% end %>  
+             </a>
+           </li>
+           <% i+=1%>
 
-      <% end %>      
-    </ul>
-    <!-- Nav tabs - End -->
-     <p class="hidden filter"><%= @filter %></p>
+           <% end %>      
+        </ul>
+       <!-- Nav tabs - End -->
+       <p class="hidden filter"><%= @filter %></p>
 
-    <div class="tab-content" style="max-height:670px; overflow:auto">
-      <!--- Panel 0 - Completed -->
+       <div class="tab-content" style="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;">
+        <div class="tab-pane fade in active" id="completed" role="tabpanel">
+          <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
             <%   
-                @queue_completed_item.each do |qid|                               
-            %>
+            @queue_completed_item.each do |qid|                               
+              %>
               <div class="card queue_station">
                 <div class="card-block">
                   <h4 class="card-title">
@@ -83,17 +110,17 @@
                       <%= qid.qty %>
                     </span> ]   
                   </h4>                  
-                                    
+
                   <p class="card-text item-options"><%= qid.options == "[]"? "" : qid.options %></p> 
-                 
+
                   <p class="card-text">
                     <small class="text-muted">Order at 
-                    <span class="order-at">
-                      <%= qid.created_at.utc.getlocal.strftime("%d-%m-%Y %I:%M %p") %>
-                    </span> - 
-                    <span class="order-by">
-                      <%= qid.item_order_by %>
-                    </span> 
+                      <span class="order-at">
+                        <%= qid.created_at.utc.getlocal.strftime("%d-%m-%Y %I:%M %p") %>
+                      </span> - 
+                      <span class="order-by">
+                        <%= qid.item_order_by %>
+                      </span> 
                     </small>
                   </p>
                   <p class="hidden order-status">completed</p>
@@ -102,77 +129,97 @@
                 </div>
               </div> 
               <%                                      
-                end
-              %>    
+            end
+            %>    
+          </div>
         </div>
-      </div>
 
 
-      <!-- End Panel 0 - Completed -->
+        <!-- End Panel 0 - Completed -->
         <!--- Order Items -->
         <div class="card-columns oqs_append" id="oqs_container" style="padding-top:10px; column-gap: 1.2rem;">       
         </div>
-         <!--- end of Items-->
-    </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 - Table</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:360px; max-height:360px; overflow:auto">
-          <table class="table" id="oqs-order-details-table">
-            <thead>
-              <tr>
-                <th style="width:80%; text-align:left">Items</th>
-                <th style="width:20%; text-align:right">QTY</th>
-              </tr>
-            </thead>
-            <tbody>              
-              <!-- Bind With JS -->
-            </tbody>
-          </table>
-        </div>
-
+        <!--- end of Items-->
       </div>
     </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 - Table</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:360px; max-height:360px; overflow:auto">
+                <table class="table" id="oqs-order-details-table">
+                  <thead>
+                    <tr>
+                      <th style="width:80%; text-align:left">Items</th>
+                      <th style="width:20%; text-align:right">QTY</th>
+                    </tr>
+                  </thead>
+                  <tbody>              
+                    <!-- Bind With JS -->
+                  </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>
-    <a href="<%= dashboard_path %>" class="btn btn-primary btn-lg btn-block" role="button" aria-haspopup="true"> Back </a>
-    <!-- <button type="button" class="" id="print_order_summary">Print <br/>Order<br/>Summary</button> -->
+      <button type="button" class="btn btn-primary btn-lg btn-block" id="print_order_summary">Print <br/>Order<br/>Summary</button>
+      <a href="<%= dashboard_path %>" class="btn btn-primary btn-lg btn-block" role="button" aria-haspopup="true"> Back </a>
+      <!-- <button type="button" class="" id="print_order_summary">Print <br/>Order<br/>Summary</button> -->
 
+    </div>
   </div>
 </div>
-<script type="text/javascript">
-  
-</script>
\ No newline at end of file
+
+<style type="text/css">
+  .order-completed {
+  background-color: #CCFFDD;
+}
+
+.order-void {
+  background-color: #FFCCDD;
+}
+
+.selected-item {
+  color: #fff !important;
+  background-color: blue;
+}
+
+.order-item {
+  width: 49%;
+  font-size: 18px;
+  margin: 0px 0px 5px 0px;  
+}
+
+</style>
\ No newline at end of file