diff --git a/erpnext/selling/page/point_of_sale/pos_item_selector.js b/erpnext/selling/page/point_of_sale/pos_item_selector.js index 709fe57747..9384ae5542 100644 --- a/erpnext/selling/page/point_of_sale/pos_item_selector.js +++ b/erpnext/selling/page/point_of_sale/pos_item_selector.js @@ -81,13 +81,24 @@ erpnext.PointOfSale.ItemSelector = class { const { item_image, serial_no, batch_no, barcode, actual_qty, stock_uom } = item; const indicator_color = actual_qty > 10 ? "green" : actual_qty <= 0 ? "red" : "orange"; + let qty_to_display = actual_qty; + + if (Math.round(qty_to_display) > 999) { + qty_to_display = Math.round(qty_to_display)/1000; + qty_to_display = qty_to_display.toFixed(1) + 'K'; + } + function get_item_image_html() { if (!me.hide_images && item_image) { - return `<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100"> + return `<div class="flex" style="margin: 8px; justify-content: flex-end"> + <span class="indicator-pill whitespace-nowrap ${indicator_color}" id="text">${qty_to_display}</span></div> + <div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100"> <img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;"> </div>`; } else { - return `<div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`; + return `<div class="flex" style="margin: 8px; justify-content: flex-end"> + <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span></div> + <div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`; } } @@ -95,13 +106,12 @@ erpnext.PointOfSale.ItemSelector = class { `<div class="item-wrapper" data-item-code="${escape(item.item_code)}" data-serial-no="${escape(serial_no)}" data-batch-no="${escape(batch_no)}" data-uom="${escape(stock_uom)}" - title="Avaiable Qty: ${actual_qty}"> + title="${item.item_name}"> ${get_item_image_html()} <div class="item-detail"> <div class="item-name"> - <span class="indicator ${indicator_color}"></span> ${frappe.ellipsis(item.item_name, 18)} </div> <div class="item-rate">${format_currency(item.price_list_rate, item.currency, 0) || 0}</div> @@ -316,4 +326,4 @@ erpnext.PointOfSale.ItemSelector = class { toggle_component(show) { show ? this.$component.css('display', 'flex') : this.$component.css('display', 'none'); } -}; \ No newline at end of file +};