diff --git a/app/views/origami/pending_order/completed_sale.html.erb b/app/views/origami/pending_order/completed_sale.html.erb
index 507d698e..21caa906 100644
--- a/app/views/origami/pending_order/completed_sale.html.erb
+++ b/app/views/origami/pending_order/completed_sale.html.erb
@@ -169,14 +169,79 @@
  <!-- Column Three -->
  <div class="col-lg-2 col-md-2 col-sm-2">
    <button type="button" class="btn btn-default btn-block" id='back'><i class="material-icons">reply</i>Back</button>
-      <button type="button" id="reprint" class="btn bg-blue btn-block">Reprint</button>
+    <button type="button" id="reprint" class="btn bg-blue btn-block">Reprint</button>
    <% if current_user.role != "waiter" %>
-      <button id="close_cashier" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.close_cashier") %></button>
-      <button id="cash_in" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.cash_in") %> </button>
-       <button id="cash_out" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.cash_out") %> </button>
+    <% if @sale.sale_status != 'void' && @sale.sale_status != 'waste' && @sale.sale_status != 'spoile' %>
+      <% if current_user.role == "cashier" %>
+        <a class="btn btn-block bg-red waves-effect access_modal" data-toggle="modal"  data-type="void"> Void</a>
+      <% else %>
+        <button type="button" class="btn bg-red btn-block" data-toggle="modal" data-target="#voidModal" <%= (can? :overall_void, :void)? ' ': 'disabled=' %> > Void </button>
+      <% end %>
+    <% end %>
+    <button id="close_cashier" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.close_cashier") %></button>
+    <button id="cash_in" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.cash_in") %> </button>
+    <button id="cash_out" type="button" class="btn btn-block btn-lg bg-blue waves-effect"> <%= t("views.btn.cash_out") %> </button>
    <% end %>
  </div>
 </div>
+
+<div class="modal fade" id="voidModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+      <h4 class="modal-title" id="voidModalLabel">Please Enter Reason for Void</h4>
+      </div>
+      <div class="modal-body">
+         <input type="textarea" name="remark" class="form-control col-md-12 remark" id="remark">
+      </div>
+      <div class="modal-footer ">
+        <div class="row p-r-20">
+          <div class="col-md-5">
+            <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-red waves-effect " id="void" active="true">VOID</button>
+          </div>
+          <div class="col-md-5">
+            <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-blue waves-effect" data-dismiss="modal">CLOSE</button>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="AccessCodeModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+      <h4 class="modal-title" id="AccessCodeModalLabel">Enter Access Code</h4>
+      <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#111;">&times;</button>
+      </div>
+      <div class="modal-body" style="padding: 0px 25px 15px 25px !important"> 
+         <input type="text" id="access_code" class="access_code form-control col-md-12 ">
+        <div class="row bottom p-l-15 p-r-15 m-t-10">
+             <div class="col-md-3 access_number border-top border-left" data-value="1" data-type="num">1</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="2" data-type="num">2</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="3" data-type="num">3</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="4" data-type="num">4</div>
+           </div>
+           <div class="row bottom p-l-15 p-r-15">
+             <div class="col-md-3 access_number border-top border-left" data-value="5" data-type="num">5</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="6" data-type="num">6</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="7" data-type="num">7</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="8" data-type="num">8</div>
+           </div>
+           <div class="row bottom p-l-15 p-r-15">
+             <div class="col-md-3 access_number border-top border-left" data-value="9" data-type="num">9</div>
+             <div class="col-md-3 access_number border-top border-left" data-value="0" data-type="num">0</div>
+             <div class="col-md-3 access_number border-top border-left orange" data-type="clr">Clr</div>
+             <div class="col-md-3 access_number ok border-top border-left blue" data-type="ok" data-action="">OK</div>
+              
+           </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 </div>
 <script>
 var cashier_type = "quick_service";
@@ -209,7 +274,70 @@ $(document).ready(function(){
 
     $('#cash_out').on('click',function(){
       window.location.href  = '/origami/quick_service/cash_outs';
-    })
+    });
+
+    $('#void').on('click', function () {
+      var access_code  = localStorage.getItem("access_code");
+      if ($(this).attr('active')=== "true") {
+        swal({
+            title: "Alert",
+            text: "Are you sure want to Void?",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "Yes, void it!",
+            closeOnConfirm: false
+        }, function (isConfirm) {
+          if (isConfirm) {
+            var sale_id = $('#sale_id').val();
+            var ajax_url = "/origami/sale/" + sale_id + '/cashier/void';
+            var remark  = $("#remark").val();
+
+            $.ajax({
+                type: 'POST',
+                url: ajax_url,
+                data: "remark="+ remark + "&sale_id=" + sale_id+ "&access_code=" + access_code,
+                success: function (result) {
+                   // For Server Print - from jade
+                  if ($("#server_mode").val() == "cloud") {
+                    code2lab.printFile(result.filepath.substr(6), result.printer_url);
+                  }
+                  window.location.href = '/origami/quick_service';
+                }
+            });
+          }
+        }); 
+      }else{
+        swal("Opps","You are not authorized for void","warning")
+      }
+    });
+
+    $(document).on('click', '.access_modal', function(event){
+      type = $(this).data("type");
+      $(".ok").attr("data-action",type)
+      $('#AccessCodeModal').modal('show');
+    });
  
 });
+
+function check_emp_access_code(access_code,type) {
+    var url = "/origami/check_emp_access_code/" + access_code ;
+    $.ajax({
+        type: 'POST',
+        url: url,
+        data: {},
+        success: function (result) {
+           // console.log(result);
+           if (result.status == true) {
+            createAccessCode(code);
+             if(type == "void"){
+               $('#AccessCodeModal').modal('hide');
+               $('#voidModal').modal('show');
+             }
+           }else{
+             swal("Opps",result.message,"warning")
+           }
+        }
+    });
+}
 </script>