Enhance UI: display product designation

- Added product designation (model/type) to the Lager cards in Phase 1.

- Added product designation to the item rows on the Table and in the Backpacks (Phase 1 & 2).

src/manage_packing_list_items.php

@@ -402,6 +402,7 @@ $conn->close();
                         <img src="${imgUrl}" class="article-image-trigger" data-preview-url="${imgUrl}">
                     </div>
                     <div class="lager-title">${article.name}</div>
+                    ${article.product_designation ? `<div class="small text-muted mb-1" style="line-height: 1.1;">${article.product_designation}</div>` : ''}
                     <small class="text-muted d-block mb-1">${article.weight_grams}g</small>
                     <div class="lager-controls">
                         <button class="btn btn-sm btn-outline-secondary" onclick="adjustTable(${aid}, -1)" ${disableMinus ? 'disabled' : ''}><i class="fas fa-minus"></i></button>
@@ -582,7 +583,12 @@ $conn->close();
         let contentClass = 'packed-item-content';
         let iconClass = 'fas fa-grip-vertical handle text-secondary';
         let nameDisplay = item.name;
-        let metaDisplay = item.manufacturer_name ? `<small class="text-muted">(${item.manufacturer_name})</small>` : '';
+        
+        let metaDisplayArr = [];
+        if (item.manufacturer_name) metaDisplayArr.push(item.manufacturer_name);
+        if (item.product_designation) metaDisplayArr.push(item.product_designation);
+        let metaDisplay = metaDisplayArr.length > 0 ? `<small class="text-muted">(${metaDisplayArr.join(' - ')})</small>` : '';
+        
         let controls = `
             <input type="number" class="form-control form-control-sm quantity-input text-center mx-2" value="${item.quantity}" min="1" style="width:60px;">
             <button class="btn btn-sm btn-outline-danger remove-item-btn"><i class="fas fa-trash"></i></button>