Redesign products

js/ui/mealPlanEditor.js

@@ -15,7 +15,7 @@ import {
     savePlans,
 } from '../services/planStore.js?v=2';
 import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
-import { loadPantry } from '../services/pantryShopping.js?v=2';
+import { loadPantry, getPantryTotal, getPantryProducts, setPantryQty, setPantryProductQty, addOrMergeShoppingLines } from '../services/pantryShopping.js?v=2';
 import { showAppToast } from './toast.js';
 import {
     bindCalendarDayClicks,
@@ -80,6 +80,8 @@ function getProductCardHTML() {
                         </div>
                     </div>
                 </div>
+                <div id="mpe-pc-stock" class="space-y-1.5"></div>
+                <div id="mpe-pc-shop"></div>
             </div>
         </div>
     </div>`;
@@ -131,10 +133,100 @@ function openProductCard(ingredientId, productId) {
         document.getElementById('mpe-pc-carbs').textContent = nutrition.carbs + 'g';
     }
 
+    // Stock section
+    renderPlannerCardStock(ingredientId, productId);
+
+    // Shop section
+    renderPlannerCardShop(ingredientId, productId);
+
     overlay.classList.remove('hidden');
     overlay.style.pointerEvents = 'auto';
 }
 
+function renderPlannerCardStock(ingredientId, productId) {
+    const wrap = document.getElementById('mpe-pc-stock');
+    if (!wrap) return;
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
+    const pantry = loadPantry();
+    const product = productId ? PRODUCTS[productId] : null;
+
+    let qty, step, pid;
+    if (product) {
+        const items = getPantryProducts(ingredientId, pantry);
+        qty = items.find(i => i.productId === productId)?.qty || 0;
+        step = product.packSize || 1;
+        pid = productId;
+    } else {
+        qty = getPantryTotal(ingredientId, pantry);
+        step = def.purchasePack?.amount || (def.pantryUnit === 'szt' ? 1 : 10);
+        pid = '_generic';
+    }
+
+    wrap.innerHTML = `
+        <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5 text-gray-500">Zapas</p>
+        <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2 bg-[#393937]">
+            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
+            <span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
+            <button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
+        </div>`;
+
+    wrap.querySelectorAll('.mpe-pc-stock-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const bpid = btn.dataset.pid;
+            const bstep = Number(btn.dataset.step) || 1;
+            const dir = Number(btn.dataset.dir);
+            const p = loadPantry();
+            if (bpid === '_generic') {
+                const cur = getPantryTotal(ingredientId, p);
+                setPantryQty(ingredientId, Math.max(0, cur + bstep * dir));
+            } else {
+                const items = getPantryProducts(ingredientId, p);
+                const cur = items.find(i => i.productId === bpid)?.qty || 0;
+                setPantryProductQty(ingredientId, bpid, Math.max(0, cur + bstep * dir));
+            }
+            renderPlannerCardStock(ingredientId, productId);
+        });
+    });
+}
+
+function renderPlannerCardShop(ingredientId, productId) {
+    const wrap = document.getElementById('mpe-pc-shop');
+    if (!wrap) return;
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
+    const product = productId ? PRODUCTS[productId] : null;
+    const packSize = product?.packSize || def.purchasePack?.amount;
+    const packLabel = product?.packLabel || def.purchasePack?.label;
+    const usesPacks = Boolean(packSize && packSize > 0);
+    const btnLabel = usesPacks ? `Dodaj na listę (${packLabel || `${packSize} ${u}`})` : 'Dodaj na listę';
+
+    wrap.innerHTML = `
+        <button type="button" id="mpe-pc-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
+            <i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}
+        </button>`;
+
+    document.getElementById('mpe-pc-add-list')?.addEventListener('click', () => {
+        const amt = usesPacks ? packSize : (def.pantryUnit === 'szt' ? 1 : 10);
+        const line = {
+            ingredientId,
+            amount: amt,
+            unit: u,
+            name: product?.name || def.name,
+            category: def.category,
+            sourceNote: packLabel || 'Z planera',
+        };
+        if (productId) line.productId = productId;
+        addOrMergeShoppingLines([line]);
+        // Quick visual feedback
+        const btn = document.getElementById('mpe-pc-add-list');
+        if (btn) { btn.textContent = '✓ Dodano'; setTimeout(() => { btn.innerHTML = `<i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}`; }, 1200); }
+        window.refreshShopping?.();
+    });
+}
+
 function closeProductCard() {
     const overlay = document.getElementById('mpe-product-card-overlay');
     if (overlay) {