Make expired/expiring items clickable for edit/delete

- Tap on any expired or expiring item opens the detail modal
- From the modal: edit quantity/location/expiry, delete, or use
- Same behavior as regular inventory items
- Added showAlertItemDetail() function (loads inventory then shows modal)
- Visual feedback on tap (scale + highlight)

api/index.php

@@ -515,7 +515,7 @@ function getStats(PDO $db): void {
     
     // Expiring soonest (next 4 items to expire)
     $expiring = $db->query("
-        SELECT i.*, p.name, p.brand 
+        SELECT i.*, p.name, p.brand, p.category 
         FROM inventory i JOIN products p ON i.product_id = p.id 
         WHERE i.expiry_date IS NOT NULL AND i.expiry_date >= date('now') AND i.quantity > 0
         ORDER BY i.expiry_date ASC

assets/css/style.css

@@ -256,6 +256,16 @@ body {
     margin-bottom: 0;
 }
 
+.alert-item-clickable {
+    cursor: pointer;
+    transition: background 0.15s, transform 0.1s;
+}
+
+.alert-item-clickable:active {
+    background: rgba(255,255,255,0.95);
+    transform: scale(0.98);
+}
+
 .alert-item-info {
     display: flex;
     flex-direction: column;

assets/js/app.js

@@ -382,7 +382,7 @@ async function loadDashboard() {
                 else if (days <= 30) { badgeText = `${days}g`; badgeClass = 'expiring-soon'; }
                 else { const m = Math.round(days/30); badgeText = m <= 1 ? `${days}g` : `~${m} mesi`; badgeClass = 'expiring-later'; }
                 return `
-                <div class="alert-item">
+                <div class="alert-item alert-item-clickable" onclick="showAlertItemDetail(${item.id}, ${item.product_id})">
                     <div class="alert-item-info">
                         <span class="alert-item-name">${escapeHtml(item.name)}</span>
                         ${item.brand ? `<span class="alert-item-brand">${escapeHtml(item.brand)}</span>` : ''}
@@ -407,7 +407,7 @@ async function loadDashboard() {
                 else daysText = `Da ${days}g`;
                 const safety = getExpiredSafety(item, days);
                 return `
-                <div class="alert-item expired-item">
+                <div class="alert-item expired-item alert-item-clickable" onclick="showAlertItemDetail(${item.id}, ${item.product_id})">
                     <div class="alert-item-info">
                         <span class="alert-item-name">${escapeHtml(item.name)}</span>
                         ${item.brand ? `<span class="alert-item-brand">${escapeHtml(item.brand)}</span>` : ''}
@@ -513,6 +513,14 @@ function dashItemTap(inventoryId, productId) {
     });
 }
 
+function showAlertItemDetail(inventoryId, productId) {
+    // Load full inventory so modal works (same pattern as dashItemTap)
+    api('inventory_list').then(data => {
+        currentInventory = data.inventory || [];
+        showItemDetail(inventoryId, productId);
+    });
+}
+
 function formatQuantity(qty, unit) {
     if (!qty && qty !== 0) return '';
     const n = parseFloat(qty);