[Enhancement] POS Redesign (#7639)

* item group, discount

* POS Redesign

* offline customer

* removed offline records from modal view
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index 9d0ab60..44e42d7 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -1,14 +1,26 @@
 <div class="pos">
     <div class="row">
-    	<div class="col-sm-5 pos-bill-wrapper">
-            <div class="pos-bill-toolbar row">
-                <div class="party-area col-xs-12"></div>
+    	<div class="col-sm-6 pos-bill-wrapper">
+            <div class="pos-bill-toolbar" style="display: flex;">
+                <div class="party-area" style="flex: 1;"></div>
+				<button class="btn btn-default list-customers-btn" style="margin: 0 5px 0 15px;">
+					<i class="fa fa-list"></i>
+				</button>
+				<button class="btn btn-default add-customer-btn">
+					<i class="fa fa-plus"></i>
+				</button>
+				{% if (allow_delete) { %}
+					<button class="btn btn-default btn-danger" style="margin: 0 5px 0 5px;display:none">
+						<i class="octicon octicon-trashcan"></i>
+					</button>
+				{% } %}
             </div>
     		<div class="pos-bill">
     			<div class="item-cart">
                     <div class="row pos-bill-row pos-bill-header">
-                        <div class="col-xs-5"><h6>{%= __("Item") %}</h6></div>
-                        <div class="col-xs-4"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
+                        <div class="col-xs-4"><h6>{%= __("Item") %}</h6></div>
+                        <div class="col-xs-3"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
+						<div class="col-xs-2"><h6 class="text-right">{%= __("Discount") %}</h6></div>
                         <div class="col-xs-3"><h6 class="text-right">{%= __("Rate") %}</h6></div>
                     </div>
                     <div class="items"></div>
@@ -48,18 +60,27 @@
                     </div>
     			</div>
     		</div>
+			<div class="list-customers">
+
+			</div>
     	</div>
-    	<div class="col-sm-7 pos-items-section">
+    	<div class="col-sm-6 pos-items-section">
 			<div class="row pos-item-area">
 
 			</div>
 			<span id="customer-results" style="color:#68a;"></span>
             <div class="row pos-item-toolbar">
-            	<div class="search-area col-xs-12"></div>
+				<div class="search-item-group col-xs-5"></div>
+				<div class="search-item col-xs-7"></div>
             </div>
-    		<div class="item-list-area">
+    		<div class="item-list-area" style="auto">
 				<div class="app-listing item-list"></ul>
     		</div>
     	</div>
+		<div class="row">
+			<div class="text-right list-paging-area">
+				<button class="btn btn-default btn-more btn-sm" style="margin:5px 20px">{{ __("More") }}</button>
+			</div>
+		</div>
     </div>
 </div>