refactor: POS workflow (#20789)

* refactor: add pos invoice doctype replacing sales invoice in POS

* refactor: move pos.py to pos invoice

* feat: add pos invoice merge log doctype

* feat: ability to merge pos invoices into a sales invoice

* feat: [wip] new ui for point of sale

* fix: pos.py moved to pos_invoice

* feat: loyalty points for POS Invoice

* fix: loyalty points on merging

* feat: return against pos invoices

* Merge 'fork/serial-no-selector' into refactor-pos-invoice

* chore: status fix and set warehouse from pos profile

* fix: naming series

* feat: merge pos returns into credit notes

* feat: add pos list action for merging into sales invoices

* feat[UX]: add shortcuts & focus on search after customer selection

* feat: stock validation from previous pos transactions

* Merge 'fork/serial-no-selector' into refactor-pos-invoice

* chore: fix df not found for base_amount precision

* feat: serial no validation from previous pos transactions

* chore: move pos.py into pos page

* feat: pos opening voucher

* feat: link pos closing voucher with opening voucher

* chore: use map_doc instead of get_mapped_doc for better perf

* feat: enforce opening voucher on pos page

* feat: [ui] [wip] point of sale beta ui refactor

* fix: auto fetching serial nos with batch no

* feat: [ui] item details section for new pos ui

* feat: remove item from cart

* refactor: [ui] [wip] split point_of_sale into components
* new payment component
* new numberpad
* fix pos opening status
* move from flex to grids

* fix: search from item selector

* feat: loyalty points as payment method

* feat: pos invoice status
* fix a bug with invalid JSON

* fix: loyalty program ui fixes

* feat: past order list and past order summary

* feat: (minor) setting discount from item details

* fix: adding item before customer selection

* feat: post order submission summary
* save and open draft orders
* fix: item group filter

* fix:  item_det not defined while submitting sle

* fix: minor bugs

* fix: minor ux fixes

* feat: show opening time in pos ui

* feat: item and customer images

* feat: emailing and printing an invoice

* fix: item details field edit shows empty alert

* fix: (minor) ux fixes

* chore: rename pos opening voucher to pos opening entry

* chore: (minor) rename pos closing voucher and sub doctypes

* chore: add patch for renaming pos closing doctypes

* fix: negative stock not allowed in pos invoices* default is_pos in pos invoices* fix: transalation

* fix: invoices not getting fetched on pos closing

* fix: indentation

* feat: view / edit customer info

* fix: minor bugs

* fix: minor bug

* fix: patch

* fix: minor ux issues

* fix: remove uppercase status

* refactor: pos closing payment reconciliation

* fix: move pos invoice print formats to pos invoice doctype

* fix: ui issues

* feat: new child doctype to store pos payment mode details

* fix: add to patches.txt

* feat: search by serial no

* chore: [wip] code cleanup

* fix: item not selectable from cart

* chore: [wip] code cleanup

* fix: minor issues
* loyalty points transactions
* default payment mode

* fix: minor fixes
* set correct mop amount with loaylty points
* editing draft invoices from UI

* chore: pos invoice merge log tests

* fix: batch / serial validation in pos ui and on submission

* feat: use onscan js for barcode scan events

* fix: cart header with amount column

* fix: validate batch no and qty in pos transactions

* chore: do not fetch closing balances as opening balance

* feat: show available qty in item selector

* feat: shortcuts

* fix: onscan.js not found

* fix: onscan.js not found

* fix: cannot return partial items

* fix: neagtive stock indicator

* feat: invoice discount

* fix: change available stock on warehouse change

* chore: cleanup code

* fix: pos profile payment method table

* feat: adding same item with different uom

* fix: loyalty points deleted after consolidation

* fix: enter loyalty amount instead of loyalty points

* chore: return print format

* feat: custom fields in pos view

* chore: pos invoice test

* chore: remove offline pos

* fix: cyclic dependency

* fix: cyclic dependency

* patch: remove pos page and order fixes

* chore: little fixes

* fix: patch perf and plural naming

* chore: tidy up pos invoice validation

* chore: move pos closing to accounts

* fix: move pos doctypes to accounts

* fix: move pos doctypes to accounts

* fix: item description in cart

* fix: item description in cart

* chore: loyalty tests
* minor fixes

* chore: rename point of sale beta to point of sale

* chore: reset past order summary on filter change

* chore: add point of sale to accounting desk

* fix: payment reconciliation table in pos closing

* fix: travis

* Update accounting.json

* fix: test cases

* fix: tests
* patch loyalty point entries

* fix: remove test
* default mode of payment is mandatory for pos transaction

* chore: remove unused checks from pos profile

* fix: loyalty point entry patch

* fix: numpad reset and patches

* fix: minor bugs

* fix: travis

* fix: travis

* fix: travis

* fix: travis

Co-authored-by: Nabin Hait <nabinhait@gmail.com>
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index 613a5ff..e80e3ed 100644
--- a/erpnext/public/css/pos.css
+++ b/erpnext/public/css/pos.css
@@ -1,179 +1,216 @@
-[data-route="point-of-sale"] .layout-main-section-wrapper {
-  margin-bottom: 0;
-}
-[data-route="point-of-sale"] .pos-items-wrapper {
-  max-height: calc(100vh - 210px);
-}
-.pos {
-  padding: 15px;
-}
-.list-item {
-  min-height: 40px;
-  height: auto;
-}
-.cart-container {
-  padding: 0 15px;
-  display: inline-block;
-  width: 39%;
-  vertical-align: top;
-}
-.item-container {
-  padding: 0 15px;
-  display: inline-block;
-  width: 60%;
-  vertical-align: top;
-}
-.search-field {
-  width: 60%;
-}
-.search-field input::placeholder {
-  font-size: 12px;
-}
-.item-group-field {
-  width: 40%;
-  margin-left: 15px;
-}
-.cart-wrapper {
-  margin-bottom: 12px;
-}
-.cart-wrapper .list-item__content:not(:first-child) {
-  justify-content: flex-end;
-}
-.cart-wrapper .list-item--head .list-item__content:nth-child(2) {
-  flex: 1.5;
-}
-.cart-items {
-  height: 150px;
-  overflow: auto;
-}
-.cart-items .list-item.current-item {
-  background-color: #fffce7;
-}
-.cart-items .list-item.current-item.qty input {
-  border: 1px solid #5E64FF;
-  font-weight: bold;
-}
-.cart-items .list-item.current-item.disc .discount {
-  font-weight: bold;
-}
-.cart-items .list-item.current-item.rate .rate {
-  font-weight: bold;
-}
-.cart-items .list-item .quantity {
-  flex: 1.5;
-}
-.cart-items input {
-  text-align: right;
-  height: 22px;
-  font-size: 12px;
-}
-.fields {
-  display: flex;
-}
-.pos-items-wrapper {
-  max-height: 480px;
-  overflow-y: auto;
-}
-.pos-items {
-  overflow: hidden;
-}
-.pos-item-wrapper {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 25%;
-}
-.image-view-container {
-  display: block;
-}
-.image-view-container .image-field {
-  height: auto;
-}
-.empty-state {
-  height: 100%;
-  position: relative;
-}
-.empty-state span {
-  position: absolute;
-  color: #8D99A6;
-  font-size: 12px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-@keyframes yellow-fade {
-  0% {
-    background-color: #fffce7;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-.highlight {
-  animation: yellow-fade 1s ease-in 1;
-}
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.number-pad {
-  border-collapse: collapse;
-  cursor: pointer;
-  display: table;
-}
-.num-row {
-  display: table-row;
-}
-.num-col {
-  display: table-cell;
-  border: 1px solid #d1d8dd;
-}
-.num-col > div {
-  width: 50px;
-  height: 50px;
-  text-align: center;
-  line-height: 50px;
-}
-.num-col.active {
-  background-color: #fffce7;
-}
-.num-col.brand-primary {
-  background-color: #5E64FF;
-  color: #ffffff;
-}
-.discount-amount .discount-inputs {
-  display: flex;
-  flex-direction: column;
-  padding: 15px 0;
-}
-.discount-amount input:first-child {
-  margin-bottom: 10px;
-}
-.taxes-and-totals {
-  border-top: 1px solid #d1d8dd;
-}
-.taxes-and-totals .taxes {
-  display: flex;
-  flex-direction: column;
-  padding: 15px 0;
-  align-items: flex-end;
-}
-.taxes-and-totals .taxes > div:first-child {
-  margin-bottom: 10px;
-}
-.grand-total {
-  border-top: 1px solid #d1d8dd;
-}
-.grand-total .list-item {
-  height: 60px;
-}
-.grand-total .grand-total-value {
-  font-size: 18px;
-}
-.rounded-total-value {
-  font-size: 18px;
-}
-.quantity-total {
-  font-size: 18px;
-}
+[data-route="point-of-sale"] .layout-main-section { border: none;  font-size: 12px; }
+[data-route="point-of-sale"] .layout-main-section-wrapper { margin-bottom: 0; }
+[data-route="point-of-sale"] .pos-items-wrapper { max-height: calc(100vh - 210px); }
+:root { --border-color: #d1d8dd;  --text-color: #8d99a6;  --primary: #5e64ff; }
+[data-route="point-of-sale"] .flex { display: flex; }
+[data-route="point-of-sale"] .grid { display: grid; }
+[data-route="point-of-sale"] .absolute { position: absolute; }
+[data-route="point-of-sale"] .relative { position: relative; }
+[data-route="point-of-sale"] .abs-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
+[data-route="point-of-sale"] .inline { display: inline; }
+[data-route="point-of-sale"] .float-right { float: right; }
+[data-route="point-of-sale"] .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+[data-route="point-of-sale"] .gap-2 { grid-gap: 0.5rem;  gap: 0.5rem; }
+[data-route="point-of-sale"] .gap-4 { grid-gap: 1rem;  gap: 1rem; }
+[data-route="point-of-sale"] .gap-6 { grid-gap: 1.25rem;  gap: 1.25rem; }
+[data-route="point-of-sale"] .gap-8 { grid-gap: 1.5rem;  gap: 1.5rem; }
+[data-route="point-of-sale"] .row-gap-2 { grid-row-gap: 0.5rem;  row-gap: 0.5rem; }
+[data-route="point-of-sale"] .col-gap-4 { grid-column-gap: 1rem;  column-gap: 1rem; }
+[data-route="point-of-sale"] .col-span-2 { grid-column: span 2 / span 2; }
+[data-route="point-of-sale"] .col-span-3 { grid-column: span 3 / span 3; }
+[data-route="point-of-sale"] .col-span-4 { grid-column: span 4 / span 4; }
+[data-route="point-of-sale"] .col-span-6 { grid-column: span 6 / span 6; }
+[data-route="point-of-sale"] .col-span-10 { grid-column: span 10 / span 10; }
+[data-route="point-of-sale"] .row-span-2 { grid-row: span 2 / span 2; }
+[data-route="point-of-sale"] .grid-auto-row { grid-auto-rows: 5.5rem; }
+[data-route="point-of-sale"] .d-none { display: none; }
+[data-route="point-of-sale"] .flex-wrap { flex-wrap: wrap; }
+[data-route="point-of-sale"] .flex-row { flex-direction: row; }
+[data-route="point-of-sale"] .flex-col { flex-direction: column; }
+[data-route="point-of-sale"] .flex-row-rev { flex-direction: row-reverse; }
+[data-route="point-of-sale"] .flex-col-rev { flex-direction: column-reverse; }
+[data-route="point-of-sale"] .flex-1 { flex: 1 1 0%; }
+[data-route="point-of-sale"] .items-center { align-items: center; }
+[data-route="point-of-sale"] .items-end { align-items: flex-end; }
+[data-route="point-of-sale"] .f-grow-1 { flex-grow: 1; }
+[data-route="point-of-sale"] .f-grow-2 { flex-grow: 2; }
+[data-route="point-of-sale"] .f-grow-3 { flex-grow: 3; }
+[data-route="point-of-sale"] .f-grow-4 { flex-grow: 4; }
+[data-route="point-of-sale"] .f-shrink-0 { flex-shrink: 0; }
+[data-route="point-of-sale"] .f-shrink-1 { flex-shrink: 1; }
+[data-route="point-of-sale"] .f-shrink-2 { flex-shrink: 2; }
+[data-route="point-of-sale"] .f-shrink-3 { flex-shrink: 3; }
+[data-route="point-of-sale"] .shadow { box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
+[data-route="point-of-sale"] .shadow-sm { box-shadow: 0 0.5px 3px 0 rgba(0, 0, 0, 0.125); }
+[data-route="point-of-sale"] .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
+[data-route="point-of-sale"] .rounded { border-radius: 0.3rem; }
+[data-route="point-of-sale"] .rounded-b { border-bottom-left-radius: 0.3rem;  border-bottom-right-radius: 0.3rem; }
+[data-route="point-of-sale"] .p-8 { padding: 2rem; }
+[data-route="point-of-sale"] .p-16 { padding: 4rem; }
+[data-route="point-of-sale"] .p-32 { padding: 8rem; }
+[data-route="point-of-sale"] .p-6 { padding: 1.5rem; }
+[data-route="point-of-sale"] .p-4 { padding: 1rem; }
+[data-route="point-of-sale"] .p-3 { padding: 0.75rem; }
+[data-route="point-of-sale"] .p-2 { padding: 0.5rem; }
+[data-route="point-of-sale"] .m-8 { margin: 2rem; }
+[data-route="point-of-sale"] .p-1 { padding: 0.25rem; }
+[data-route="point-of-sale"] .pr-0 { padding-right: 0rem; }
+[data-route="point-of-sale"] .pl-0 { padding-left: 0rem; }
+[data-route="point-of-sale"] .pt-0 { padding-top: 0rem; }
+[data-route="point-of-sale"] .pb-0 { padding-bottom: 0rem; }
+[data-route="point-of-sale"] .mr-0 { margin-right: 0rem; }
+[data-route="point-of-sale"] .ml-0 { margin-left: 0rem; }
+[data-route="point-of-sale"] .mt-0 { margin-top: 0rem; }
+[data-route="point-of-sale"] .mb-0 { margin-bottom: 0rem; }
+[data-route="point-of-sale"] .pr-2 { padding-right: 0.5rem; }
+[data-route="point-of-sale"] .pl-2 { padding-left: 0.5rem; }
+[data-route="point-of-sale"] .pt-2 { padding-top: 0.5rem; }
+[data-route="point-of-sale"] .pb-2 { padding-bottom: 0.5rem; }
+[data-route="point-of-sale"] .pr-3 { padding-right: 0.75rem; }
+[data-route="point-of-sale"] .pl-3 { padding-left: 0.75rem; }
+[data-route="point-of-sale"] .pt-3 { padding-top: 0.75rem; }
+[data-route="point-of-sale"] .pb-3 { padding-bottom: 0.75rem; }
+[data-route="point-of-sale"] .pr-4 { padding-right: 1rem; }
+[data-route="point-of-sale"] .pl-4 { padding-left: 1rem; }
+[data-route="point-of-sale"] .pt-4 { padding-top: 1rem; }
+[data-route="point-of-sale"] .pb-4 { padding-bottom: 1rem; }
+[data-route="point-of-sale"] .mr-4 { margin-right: 1rem; }
+[data-route="point-of-sale"] .ml-4 { margin-left: 1rem; }
+[data-route="point-of-sale"] .mt-4 { margin-top: 1rem; }
+[data-route="point-of-sale"] .mb-4 { margin-bottom: 1rem; }
+[data-route="point-of-sale"] .mr-2 { margin-right: 0.5rem; }
+[data-route="point-of-sale"] .ml-2 { margin-left: 0.5rem; }
+[data-route="point-of-sale"] .mt-2 { margin-top: 0.5rem; }
+[data-route="point-of-sale"] .mb-2 { margin-bottom: 0.5rem; }
+[data-route="point-of-sale"] .mr-1 { margin-right: 0.25rem; }
+[data-route="point-of-sale"] .ml-1 { margin-left: 0.25rem; }
+[data-route="point-of-sale"] .mt-1 { margin-top: 0.25rem; }
+[data-route="point-of-sale"] .mb-1 { margin-bottom: 0.25rem; }
+[data-route="point-of-sale"] .mr-auto { margin-right: auto; }
+[data-route="point-of-sale"] .ml-auto { margin-left: auto; }
+[data-route="point-of-sale"] .mt-auto { margin-top: auto; }
+[data-route="point-of-sale"] .mb-auto { margin-bottom: auto; }
+[data-route="point-of-sale"] .pr-6 { padding-right: 1.5rem; }
+[data-route="point-of-sale"] .pl-6 { padding-left: 1.5rem; }
+[data-route="point-of-sale"] .pt-6 { padding-top: 1.5rem; }
+[data-route="point-of-sale"] .pb-6 { padding-bottom: 1.5rem; }
+[data-route="point-of-sale"] .mr-6 { margin-right: 1.5rem; }
+[data-route="point-of-sale"] .ml-6 { margin-left: 1.5rem; }
+[data-route="point-of-sale"] .mt-6 { margin-top: 1.5rem; }
+[data-route="point-of-sale"] .mb-6 { margin-bottom: 1.5rem; }
+[data-route="point-of-sale"] .mr-8 { margin-right: 2rem; }
+[data-route="point-of-sale"] .ml-8 { margin-left: 2rem; }
+[data-route="point-of-sale"] .mt-8 { margin-top: 2rem; }
+[data-route="point-of-sale"] .mb-8 { margin-bottom: 2rem; }
+[data-route="point-of-sale"] .pr-8 { padding-right: 2rem; }
+[data-route="point-of-sale"] .pl-8 { padding-left: 2rem; }
+[data-route="point-of-sale"] .pt-8 { padding-top: 2rem; }
+[data-route="point-of-sale"] .pb-8 { padding-bottom: 2rem; }
+[data-route="point-of-sale"] .pr-16 { padding-right: 4rem; }
+[data-route="point-of-sale"] .pl-16 { padding-left: 4rem; }
+[data-route="point-of-sale"] .pt-16 { padding-top: 4rem; }
+[data-route="point-of-sale"] .pb-16 { padding-bottom: 4rem; }
+[data-route="point-of-sale"] .w-full { width: 100%; }
+[data-route="point-of-sale"] .h-full { height: 100%; }
+[data-route="point-of-sale"] .w-quarter { width: 25%; }
+[data-route="point-of-sale"] .w-half { width: 50%; }
+[data-route="point-of-sale"] .w-66 { width: 66.66%; }
+[data-route="point-of-sale"] .w-33 { width: 33.33%; }
+[data-route="point-of-sale"] .w-60 { width: 60%; }
+[data-route="point-of-sale"] .w-40 { width: 40%; }
+[data-route="point-of-sale"] .w-fit { width: fit-content; }
+[data-route="point-of-sale"] .w-6 { width: 2rem; }
+[data-route="point-of-sale"] .h-6 { min-height: 2rem; height: 2rem; }
+[data-route="point-of-sale"] .w-8 { width: 2.5rem; }
+[data-route="point-of-sale"] .h-8 { min-height: 2.5rem; height: 2.5rem; }
+[data-route="point-of-sale"] .w-10 { width: 3rem; }
+[data-route="point-of-sale"] .h-10 { min-height:3rem; height: 3rem; }
+[data-route="point-of-sale"] .h-12 { min-height: 3.3rem; height: 3.3rem; }
+[data-route="point-of-sale"] .w-12 { width: 3.3rem; }
+[data-route="point-of-sale"] .h-14 { min-height: 4.2rem; height: 4.2rem; }
+[data-route="point-of-sale"] .h-16 { min-height: 4.6rem; height: 4.6rem; }
+[data-route="point-of-sale"] .h-18 { min-height: 5rem; height: 5rem; }
+[data-route="point-of-sale"] .w-18 { width: 5.4rem; }
+[data-route="point-of-sale"] .w-24 { width: 7.2rem; }
+[data-route="point-of-sale"] .w-26 { width: 8.4rem; }
+[data-route="point-of-sale"] .h-24 { min-height: 7.2rem; height: 7.2rem; }
+[data-route="point-of-sale"] .h-32 { min-height: 9.6rem; height: 9.6rem; }
+[data-route="point-of-sale"] .w-46 { width: 15rem; }
+[data-route="point-of-sale"] .h-46 { min-height:15rem; height: 15rem; }
+[data-route="point-of-sale"] .h-100 { height: 100vh; }
+[data-route="point-of-sale"] .mx-h-70 { max-height: 67rem; }
+[data-route="point-of-sale"] .border-grey-300 { border-color: #e2e8f0; }
+[data-route="point-of-sale"] .border-grey { border: 1px solid #d1d8dd; }
+[data-route="point-of-sale"] .border-white { border: 1px solid #fff; }
+[data-route="point-of-sale"] .border-b-grey { border-bottom: 1px solid #d1d8dd; }
+[data-route="point-of-sale"] .border-t-grey { border-top: 1px solid #d1d8dd; }
+[data-route="point-of-sale"] .border-r-grey { border-right: 1px solid #d1d8dd; }
+[data-route="point-of-sale"] .text-dark-grey { color: #5f5f5f; }
+[data-route="point-of-sale"] .text-grey { color: #8d99a6; }
+[data-route="point-of-sale"] .text-grey-100 { color: #d1d8dd; }
+[data-route="point-of-sale"] .text-grey-200 { color: #a0aec0; }
+[data-route="point-of-sale"] .bg-green-200 { background-color: #c6f6d5; }
+[data-route="point-of-sale"] .text-bold { font-weight: bold; }
+[data-route="point-of-sale"] .italic { font-style: italic; }
+[data-route="point-of-sale"] .font-weight-450 { font-weight: 450; }
+[data-route="point-of-sale"] .justify-around { justify-content: space-around; }
+[data-route="point-of-sale"] .justify-between { justify-content: space-between; }
+[data-route="point-of-sale"] .justify-center { justify-content: center; }
+[data-route="point-of-sale"] .justify-end { justify-content: flex-end; }
+[data-route="point-of-sale"] .bg-white { background-color: white; }
+[data-route="point-of-sale"] .bg-light-grey { background-color: #f0f4f7; }
+[data-route="point-of-sale"] .bg-grey-100 { background-color: #f7fafc; }
+[data-route="point-of-sale"] .bg-grey-200 { background-color: #edf2f7; }
+[data-route="point-of-sale"] .bg-grey { background-color: #f4f5f6; }
+[data-route="point-of-sale"] .text-center { text-align: center; }
+[data-route="point-of-sale"] .text-right { text-align: right; }
+[data-route="point-of-sale"] .text-sm { font-size: 1rem; }
+[data-route="point-of-sale"] .text-md-0 { font-size: 1.25rem; }
+[data-route="point-of-sale"] .text-md { font-size: 1.4rem; }
+[data-route="point-of-sale"] .text-lg { font-size: 1.6rem; }
+[data-route="point-of-sale"] .text-xl { font-size: 2.2rem; }
+[data-route="point-of-sale"] .text-2xl { font-size: 2.8rem; }
+[data-route="point-of-sale"] .text-2-5xl { font-size: 3rem; }
+[data-route="point-of-sale"] .text-3xl { font-size: 3.8rem; }
+[data-route="point-of-sale"] .text-6xl { font-size: 4.8rem; }
+[data-route="point-of-sale"] .line-through { text-decoration: line-through; }
+[data-route="point-of-sale"] .text-primary { color: #5e64ff; }
+[data-route="point-of-sale"] .text-white { color: #fff; }
+[data-route="point-of-sale"] .text-green-500 { color: #48bb78; }
+[data-route="point-of-sale"] .bg-primary { background-color: #5e64ff; }
+[data-route="point-of-sale"] .border-primary { border-color: #5e64ff; }
+[data-route="point-of-sale"] .text-danger { color: #e53e3e; }
+[data-route="point-of-sale"] .scroll-x { overflow-x: scroll;overflow-y: hidden; }
+[data-route="point-of-sale"] .scroll-y { overflow-y: scroll;overflow-x: hidden; }
+[data-route="point-of-sale"] .overflow-hidden { overflow: hidden; }
+[data-route="point-of-sale"] .whitespace-nowrap { white-space: nowrap; }
+[data-route="point-of-sale"] .sticky { position: sticky;  top: -1px; }
+[data-route="point-of-sale"] .bg-white { background-color: #fff; }
+[data-route="point-of-sale"] .bg-selected { background-color: #fffdf4; }
+[data-route="point-of-sale"] .border-dashed { border-width:1px; border-style: dashed; }
+[data-route="point-of-sale"] .z-100 { z-index: 100; }
+
+[data-route="point-of-sale"] .frappe-control { margin: 0 !important;  width: 100%; }
+[data-route="point-of-sale"] .form-control { font-size: 12px; }
+[data-route="point-of-sale"] .form-group { margin: 0 !important; }
+[data-route="point-of-sale"] .pointer { cursor: pointer; }
+[data-route="point-of-sale"] .no-select { user-select: none; }
+[data-route="point-of-sale"] .item-wrapper:hover { transform: scale(1.02, 1.02); }
+[data-route="point-of-sale"] .hover-underline:hover { text-decoration: underline; }
+[data-route="point-of-sale"] .item-wrapper { transition: scale 0.2s ease-in-out; }
+[data-route="point-of-sale"] .cart-items-section .cart-item-wrapper:not(:first-child) { border-top: none; }
+[data-route="point-of-sale"] .customer-transactions .invoice-wrapper:not(:first-child) { border-top: none; }
+
+[data-route="point-of-sale"] .payment-summary-wrapper:last-child { border-bottom: none; }
+[data-route="point-of-sale"] .item-summary-wrapper:last-child { border-bottom: none; }
+[data-route="point-of-sale"] .total-summary-wrapper:last-child { border-bottom: none; }
+[data-route="point-of-sale"] .invoices-container .invoice-wrapper:last-child { border-bottom: none; }
+[data-route="point-of-sale"] .summary-btns:last-child { margin-right: 0px; }
+[data-route="point-of-sale"] ::-webkit-scrollbar { width: 1px }
+
+[data-route="point-of-sale"] .indicator.grey::before { background-color: #8d99a6; }
\ No newline at end of file
diff --git a/erpnext/public/js/controllers/taxes_and_totals.js b/erpnext/public/js/controllers/taxes_and_totals.js
index b72ceb2..405a33c 100644
--- a/erpnext/public/js/controllers/taxes_and_totals.js
+++ b/erpnext/public/js/controllers/taxes_and_totals.js
@@ -34,12 +34,12 @@
 		this.calculate_discount_amount();
 
 		// Advance calculation applicable to Sales /Purchase Invoice
-		if(in_list(["Sales Invoice", "Purchase Invoice"], this.frm.doc.doctype)
+		if(in_list(["Sales Invoice", "POS Invoice", "Purchase Invoice"], this.frm.doc.doctype)
 			&& this.frm.doc.docstatus < 2 && !this.frm.doc.is_return) {
 			this.calculate_total_advance(update_paid_amount);
 		}
 
-		if (this.frm.doc.doctype == "Sales Invoice" && this.frm.doc.is_pos &&
+		if (in_list(["Sales Invoice", "POS Invoice"], this.frm.doc.doctype) && this.frm.doc.is_pos &&
 			this.frm.doc.is_return) {
 			this.update_paid_amount_for_return();
 		}
@@ -425,7 +425,7 @@
 			? this.frm.doc["taxes"][tax_count - 1].total + flt(this.frm.doc.rounding_adjustment)
 			: this.frm.doc.net_total);
 
-		if(in_list(["Quotation", "Sales Order", "Delivery Note", "Sales Invoice"], this.frm.doc.doctype)) {
+		if(in_list(["Quotation", "Sales Order", "Delivery Note", "Sales Invoice", "POS Invoice"], this.frm.doc.doctype)) {
 			this.frm.doc.base_grand_total = (this.frm.doc.total_taxes_and_charges) ?
 				flt(this.frm.doc.grand_total * this.frm.doc.conversion_rate) : this.frm.doc.base_net_total;
 		} else {
@@ -604,7 +604,7 @@
 		// NOTE:
 		// paid_amount and write_off_amount is only for POS/Loyalty Point Redemption Invoice
 		// total_advance is only for non POS Invoice
-		if(this.frm.doc.doctype == "Sales Invoice" && this.frm.doc.is_return){
+		if(in_list(["Sales Invoice", "POS Invoice"], this.frm.doc.doctype) && this.frm.doc.is_return){
 			this.calculate_paid_amount();
 		}
 
@@ -612,7 +612,7 @@
 
 		frappe.model.round_floats_in(this.frm.doc, ["grand_total", "total_advance", "write_off_amount"]);
 
-		if(in_list(["Sales Invoice", "Purchase Invoice"], this.frm.doc.doctype)) {
+		if(in_list(["Sales Invoice", "POS Invoice", "Purchase Invoice"], this.frm.doc.doctype)) {
 			var grand_total = this.frm.doc.rounded_total || this.frm.doc.grand_total;
 
 			if(this.frm.doc.party_account_currency == this.frm.doc.currency) {
@@ -634,7 +634,7 @@
 				this.frm.refresh_field("base_paid_amount");
 			}
 
-			if(this.frm.doc.doctype == "Sales Invoice") {
+			if(in_list(["Sales Invoice", "POS Invoice"], this.frm.doc.doctype)) {
 				let total_amount_for_payment = (this.frm.doc.redeem_loyalty_points && this.frm.doc.loyalty_amount)
 					? flt(total_amount_to_pay - this.frm.doc.loyalty_amount, precision("base_grand_total"))
 					: total_amount_to_pay;
@@ -691,11 +691,13 @@
 		if(this.frm.doc.is_pos && (update_paid_amount===undefined || update_paid_amount)) {
 			$.each(this.frm.doc['payments'] || [], function(index, data) {
 				if(data.default && payment_status && total_amount_to_pay > 0) {
-					data.base_amount = flt(total_amount_to_pay, precision("base_amount"));
-					data.amount = flt(total_amount_to_pay / me.frm.doc.conversion_rate, precision("amount"));
+					let base_amount = flt(total_amount_to_pay, precision("base_amount", data));
+					frappe.model.set_value(data.doctype, data.name, "base_amount", base_amount);
+					let amount = flt(total_amount_to_pay / me.frm.doc.conversion_rate, precision("amount", data));
+					frappe.model.set_value(data.doctype, data.name, "amount", amount);
 					payment_status = false;
 				} else if(me.frm.doc.paid_amount) {
-					data.amount = 0.0;
+					frappe.model.set_value(data.doctype, data.name, "amount", 0.0);
 				}
 			});
 		}
@@ -707,7 +709,7 @@
 		var base_paid_amount = 0.0;
 		if(this.frm.doc.is_pos) {
 			$.each(this.frm.doc['payments'] || [], function(index, data){
-				data.base_amount = flt(data.amount * me.frm.doc.conversion_rate, precision("base_amount"));
+				data.base_amount = flt(data.amount * me.frm.doc.conversion_rate, precision("base_amount", data));
 				paid_amount += data.amount;
 				base_paid_amount += data.base_amount;
 			});
@@ -719,14 +721,14 @@
 			paid_amount += flt(this.frm.doc.loyalty_amount / me.frm.doc.conversion_rate, precision("paid_amount"));
 		}
 
-		this.frm.doc.paid_amount = flt(paid_amount, precision("paid_amount"));
-		this.frm.doc.base_paid_amount = flt(base_paid_amount, precision("base_paid_amount"));
+		this.frm.set_value('paid_amount', flt(paid_amount, precision("paid_amount")));
+		this.frm.set_value('base_paid_amount', flt(base_paid_amount, precision("base_paid_amount")));
 	},
 
 	calculate_change_amount: function(){
 		this.frm.doc.change_amount = 0.0;
 		this.frm.doc.base_change_amount = 0.0;
-		if(this.frm.doc.doctype == "Sales Invoice"
+		if(in_list(["Sales Invoice", "POS Invoice"], this.frm.doc.doctype)
 			&& this.frm.doc.paid_amount > this.frm.doc.grand_total && !this.frm.doc.is_return) {
 
 			var payment_types = $.map(this.frm.doc.payments, function(d) { return d.type; });
diff --git a/erpnext/public/js/controllers/transaction.js b/erpnext/public/js/controllers/transaction.js
index 3c56a63..4e50f3d 100644
--- a/erpnext/public/js/controllers/transaction.js
+++ b/erpnext/public/js/controllers/transaction.js
@@ -651,7 +651,7 @@
 					let child = frappe.model.add_child(me.frm.doc, "taxes");
 					child.charge_type = "On Net Total";
 					child.account_head = tax;
-					child.rate = 0;
+					child.rate = rate;
 				}
 			});
 		}
diff --git a/erpnext/public/js/utils/serial_no_batch_selector.js b/erpnext/public/js/utils/serial_no_batch_selector.js
index d75633e..42f9cabc 100644
--- a/erpnext/public/js/utils/serial_no_batch_selector.js
+++ b/erpnext/public/js/utils/serial_no_batch_selector.js
@@ -43,6 +43,7 @@
 				label: __(me.warehouse_details.type),
 				default: typeof me.warehouse_details.name == "string" ? me.warehouse_details.name : '',
 				onchange: function(e) {
+					me.warehouse_details.name = this.get_value();
 
 					if(me.has_batch && !me.has_serial_no) {
 						fields = fields.concat(me.get_batch_fields());
@@ -50,7 +51,6 @@
 						fields = fields.concat(me.get_serial_no_fields());
 					}
 
-					me.warehouse_details.name = this.get_value();
 					var batches = this.layout.fields_dict.batches;
 					if(batches) {
 						batches.grid.df.data = [];
@@ -98,8 +98,13 @@
 					numbers.then((data) => {
 						let auto_fetched_serial_numbers = data.message;
 						let records_length = auto_fetched_serial_numbers.length;
+						if (!records_length) {
+							const warehouse = me.dialog.fields_dict.warehouse.get_value().bold();
+							frappe.msgprint(__(`Serial numbers unavailable for Item ${me.item.item_code.bold()} 
+								under warehouse ${warehouse}. Please try changing warehouse.`));
+						}
 						if (records_length < qty) {
-							frappe.msgprint(`Fetched only ${records_length} serial numbers.`);
+							frappe.msgprint(__(`Fetched only ${records_length} available serial numbers.`));
 						}
 						let serial_no_list_field = this.dialog.fields_dict.serial_no;
 						numbers = auto_fetched_serial_numbers.join('\n');
@@ -445,6 +450,28 @@
 			serial_no_filters['warehouse'] = me.warehouse_details.name;
 		}
 
+		if (me.frm.doc.doctype === 'POS Invoice' && !this.showing_reserved_serial_nos_error) {
+			frappe.call({
+				method: "erpnext.stock.doctype.serial_no.serial_no.get_pos_reserved_serial_nos",
+				args: {
+					item_code: me.item_code,
+					warehouse: typeof me.warehouse_details.name == "string" ? me.warehouse_details.name : ''
+				}
+			}).then((data) => {
+				if (!data.message[1].length) {
+					this.showing_reserved_serial_nos_error = true;
+					const warehouse = me.dialog.fields_dict.warehouse.get_value().bold();
+					const d = frappe.msgprint(__(`Serial numbers unavailable for Item ${me.item.item_code.bold()} 
+						under warehouse ${warehouse}. Please try changing warehouse.`));
+					d.get_close_btn().on('click', () => {
+						this.showing_reserved_serial_nos_error = false;
+						d.hide();
+					});
+				}
+				serial_no_filters['name'] = ["not in", data.message[0]]
+			})
+		}
+
 		return [
 			{fieldtype: 'Section Break', label: __('Serial Numbers')},
 			{