Update app.py

app.py

@@ -1782,6 +1782,7 @@ SALES_SCREEN_CONTENT = """
                     <button id="stop-scan-btn" class="btn btn-danger btn-sm mt-2">Остановить</button>
                 </div>
                 <input type="text" id="product-search" class="form-control mb-3" placeholder="Поиск по названию или штрих-коду...">
+                <div id="product-search-results" class="d-grid gap-2" style="display: none; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));"></div>
                 
                 <div id="product-accordion" class="accordion">
                     {% for letter, products in grouped_inventory %}
@@ -1896,7 +1897,6 @@ SALES_SCREEN_SCRIPTS = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
     const cart = {};
-    const productGrid = document.getElementById('product-accordion');
     const cartItemsEl = document.getElementById('cart-items');
     const cartTotalEl = document.getElementById('cart-total');
     let audioCtx;
@@ -1907,6 +1907,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const cashierLoginModal = new bootstrap.Modal(document.getElementById('cashierLoginModal'));
     const startShiftModal = new bootstrap.Modal(document.getElementById('startShiftModal'));
     const customItemModal = new bootstrap.Modal(document.getElementById('customItemModal'));
+    const allProducts = {{ inventory|tojson|safe }};
 
     const session = {
         cashier: null,
@@ -2026,7 +2027,8 @@ document.addEventListener('DOMContentLoaded', () => {
             });
     }
 
-    productGrid.addEventListener('click', e => {
+    const productsContainer = document.querySelector('.col-lg-7 .card .card-body');
+    productsContainer.addEventListener('click', e => {
         const card = e.target.closest('.product-card');
         if (card) {
             fetchAndHandleProduct(card.dataset.barcode);
@@ -2048,9 +2050,10 @@ document.addEventListener('DOMContentLoaded', () => {
     cartItemsEl.addEventListener('click', e => {
         if (e.target.classList.contains('cart-qty-btn')) {
             const id = e.target.dataset.id;
-            const op = parseInt(e.target.dataset.op);
+            const op = parseInt(e.target.dataset.op, 10);
             if (cart[id]) {
-                const newQuantity = cart[id].quantity + op;
+                const itemsPerPack = cart[id].items_per_pack || 1;
+                let newQuantity = cart[id].quantity + (op * itemsPerPack);
                 updateCartItemQuantity(id, newQuantity);
             }
         }
@@ -2075,30 +2078,75 @@ document.addEventListener('DOMContentLoaded', () => {
         updateCartView();
     });
 
-    document.getElementById('product-search').addEventListener('input', e => {
-        const term = e.target.value.toLowerCase();
-        const productCards = document.querySelectorAll('#product-accordion .product-card');
-        productCards.forEach(card => {
-            const productName = card.querySelector('.card-title').textContent.toLowerCase();
-            const barcode = card.dataset.barcode.toLowerCase();
-            const show = productName.includes(term) || barcode.includes(term);
-            card.style.display = show ? '' : 'none';
+    const formatCurrencyJS = (value) => {
+        try {
+            const number = parseFloat(String(value).replace(/\\s/g, '').replace(',', '.'));
+            if (isNaN(number)) return '0,00';
+            return number.toLocaleString('ru-RU', {minimumFractionDigits: 2, maximumFractionDigits: 2});
+        } catch (e) {
+            return '0,00';
+        }
+    };
+
+    const productSearchInput = document.getElementById('product-search');
+    const productAccordionEl = document.getElementById('product-accordion');
+    const productSearchResultsEl = document.getElementById('product-search-results');
+
+    productSearchInput.addEventListener('input', e => {
+        const term = e.target.value.toLowerCase().trim();
+
+        if (term === '') {
+            productAccordionEl.style.display = '';
+            productSearchResultsEl.style.display = 'none';
+            productSearchResultsEl.innerHTML = '';
+            document.querySelectorAll('#product-accordion .accordion-collapse.show').forEach(el => {
+                bootstrap.Collapse.getOrCreateInstance(el).hide();
+            });
+            return;
+        }
+
+        productAccordionEl.style.display = 'none';
+        productSearchResultsEl.style.display = 'grid';
+
+        const filtered = allProducts.filter(p => p.name.toLowerCase().includes(term) || p.barcode.toLowerCase().includes(term));
+
+        filtered.sort((a, b) => {
+            const aName = a.name.toLowerCase();
+            const bName = b.name.toLowerCase();
+            const aStarts = aName.startsWith(term);
+            const bStarts = bName.startsWith(term);
+            const aBarcode = a.barcode.toLowerCase() === term;
+            const bBarcode = b.barcode.toLowerCase() === term;
+            
+            if (aBarcode && !bBarcode) return -1;
+            if (!aBarcode && bBarcode) return 1;
+            if (aStarts && !bStarts) return -1;
+            if (!aStarts && bStarts) return 1;
+            
+            return aName.localeCompare(bName);
         });
-        document.querySelectorAll('#product-accordion .accordion-item').forEach(accordionItem => {
-            const collapseElement = accordionItem.querySelector('.accordion-collapse');
-            const matchingCardsInGroup = accordionItem.querySelectorAll('.product-card:not([style*="display: none"])');
-            const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false });
 
-            if (term === '') {
-                bsCollapse.hide(); 
-            } else {
-                if (matchingCardsInGroup.length > 0) {
-                    bsCollapse.show();
-                } else {
-                    bsCollapse.hide();
+        productSearchResultsEl.innerHTML = filtered.length > 0 ? filtered.map(p => {
+            let priceText = 'Нет в наличии';
+            if (p.variants && p.variants.length > 0) {
+                const activeVariants = p.variants.filter(v => v.stock > 0);
+                if (activeVariants.length > 0) {
+                     if (activeVariants.length === 1) {
+                        priceText = `${formatCurrencyJS(activeVariants[0].price)} ₸`;
+                    } else {
+                        const prices = activeVariants.map(v => parseFloat(v.price));
+                        priceText = `от ${formatCurrencyJS(Math.min(...prices))} ₸`;
+                    }
                 }
             }
-        });
+            return `
+                <div class="card text-center product-card" data-barcode="${p.barcode}">
+                    <div class="card-body p-2">
+                        <h6 class="card-title small mb-1">${p.name}</h6>
+                        <p class="card-text fw-bold mb-0">${priceText}</p>
+                    </div>
+                </div>`;
+        }).join('') : '<p class="text-muted text-center col-12">Товары не найдены.</p>';
     });
 
     const completeSale = (paymentMethod) => {
@@ -3424,4 +3472,3 @@ if __name__ == '__main__':
     for key in DATA_FILES.keys():
         load_json_data(key)
     app.run(debug=False, host='0.0.0.0', port=7860, use_reloader=False)
-