1 files changed, 53 insertions, 90 deletions
diff --git a/kitchen/templates/kitchen/partials/pantry_table.html b/kitchen/templates/kitchen/partials/pantry_table.html
index 4a8db02..c9b5674 100644
--- a/kitchen/templates/kitchen/partials/pantry_table.html
+++ b/kitchen/templates/kitchen/partials/pantry_table.html
@@ -1,97 +1,60 @@
-{% if fridge_items or freezer_items or cupboard_items %}
-
-{% if fridge_items %}
-<h2>🧊 Fridge</h2>
-<table>
-  <thead><tr><th>Item</th><th>Qty</th><th>Expiry</th><th></th></tr></thead>
-  <tbody>
-    {% for item in fridge_items %}
-    <tr id="pantry-row-{{ item.id }}">
-      <td>{{ item.ingredient.name }}</td>
-      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
-      <td>
-        {% if item.is_expired %}
-          <span class="badge badge-expired">Expired {{ item.expiry_date }}</span>
-        {% elif item.expiring_soon %}
-          <span class="badge badge-expiring">{{ item.expiry_date }}</span>
-        {% elif item.expiry_date %}
-          <span class="badge badge-ok">{{ item.expiry_date }}</span>
-        {% else %}
-          <span style="color: var(--sage);">—</span>
-        {% endif %}
-        <button class="btn btn-sm btn-secondary" style="margin-left: 0.25rem; padding: 0.1rem 0.3rem; font-size: 0.7rem;"
-                hx-post="{% url 'app-pantry-edit-expiry' item.id %}"
-                hx-target="#pantry-row-{{ item.id }}"
-                hx-swap="outerHTML"
-                title="Change expiry">📅</button>
-      </td>
-      <td style="text-align: right; white-space: nowrap;">
-        <button class="btn btn-sm btn-secondary" style="padding: 0.1rem 0.3rem; font-size: 0.7rem;"
-                hx-post="{% url 'app-pantry-move' item.id %}"
-                hx-target="#pantry-items"
-                hx-vals='{"to": "freezer"}'
-                title="Move to freezer">❄️</button>
-        <button class="btn btn-danger btn-sm"
-                hx-delete="{% url 'app-pantry-delete' item.id %}"
-                hx-target="#pantry-items"
-                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endif %}
-
-{% if freezer_items %}
-<h2>❄️ Freezer</h2>
-<table>
-  <thead><tr><th>Item</th><th>Qty</th><th></th></tr></thead>
-  <tbody>
-    {% for item in freezer_items %}
-    <tr id="pantry-row-{{ item.id }}">
-      <td>{{ item.ingredient.name }}</td>
-      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
-      <td style="text-align: right; white-space: nowrap;">
-        <button class="btn btn-sm btn-secondary" style="padding: 0.1rem 0.3rem; font-size: 0.7rem;"
-                hx-post="{% url 'app-pantry-move' item.id %}"
-                hx-target="#pantry-items"
-                hx-vals='{"to": "fridge"}'
-                title="Defrost → Fridge">🧊→</button>
-        <button class="btn btn-danger btn-sm"
-                hx-delete="{% url 'app-pantry-delete' item.id %}"
-                hx-target="#pantry-items"
-                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endif %}
+<div class="pantry-summary">
+  <span class="s-in"><b>{{ n_in }}</b> in stock</span>
+  <span class="s-low"><b>{{ n_low }}</b> running low</span>
+  <span class="s-out"><b>{{ n_out }}</b> out</span>
+</div>
 
-{% if cupboard_items %}
-<h2>🗄️ Cupboard</h2>
-<table>
-  <thead><tr><th>Item</th><th>Qty</th><th></th></tr></thead>
-  <tbody>
-    {% for item in cupboard_items %}
-    <tr id="pantry-row-{{ item.id }}">
-      <td>{{ item.ingredient.name }}{% if item.is_staple %} <span style="color: var(--yellow); font-size: 0.7rem;">STAPLE</span>{% endif %}</td>
-      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
-      <td style="text-align: right;">
-        <button class="btn btn-danger btn-sm"
-                hx-delete="{% url 'app-pantry-delete' item.id %}"
-                hx-target="#pantry-items"
-                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
-      </td>
-    </tr>
+{% if has_items %}
+  {% for group in groups %}
+    {% if group.items %}
+    <div class="pgroup-label">{{ group.label }} <span class="count">{{ group.items|length }}</span></div>
+    {% for item in group.items %}
+    <div class="pitem" data-state="{{ item.state }}">
+      <div class="pitem-top">
+        <div class="pitem-name">{{ item.ingredient.name }}{% if item.is_staple %}<span class="staple">staple</span>{% endif %}</div>
+        <details class="menu">
+          <summary class="kebab" aria-label="More actions">⋯</summary>
+          <div class="menu-pop">
+            {% if item.location != "fridge" %}
+            <button class="menu-act" hx-post="{% url 'app-pantry-move' item.id %}" hx-vals='{"to": "fridge"}' hx-target="#pantry-items" hx-swap="innerHTML">Move to fridge</button>
+            {% endif %}
+            {% if item.location != "cupboard" %}
+            <button class="menu-act" hx-post="{% url 'app-pantry-move' item.id %}" hx-vals='{"to": "cupboard"}' hx-target="#pantry-items" hx-swap="innerHTML">Move to cupboard</button>
+            {% endif %}
+            {% if item.location != "freezer" %}
+            <button class="menu-act" hx-post="{% url 'app-pantry-move' item.id %}" hx-vals='{"to": "freezer"}' hx-target="#pantry-items" hx-swap="innerHTML">Move to freezer</button>
+            {% endif %}
+            {% if item.location != "freezer" %}
+            <form class="exp-form" hx-post="{% url 'app-pantry-save-expiry' item.id %}" hx-target="#pantry-items" hx-swap="innerHTML">
+              <input type="date" name="expiry_date" value="{{ item.expiry_date|date:'Y-m-d' }}">
+              <button type="submit" class="menu-act" style="background: var(--teal-dark);">Set</button>
+            </form>
+            {% endif %}
+            <button class="menu-act danger" hx-delete="{% url 'app-pantry-delete' item.id %}" hx-target="#pantry-items" hx-swap="innerHTML" hx-confirm="Remove {{ item.ingredient.name }}?">Delete</button>
+          </div>
+        </details>
+      </div>
+      <div class="pitem-bottom">
+        <div class="meta">
+          {% if item.quantity %}<span>{{ item.quantity }} {{ item.unit }}</span>{% endif %}
+          {% if item.location == "freezer" %}<span class="pill frozen">frozen</span>
+          {% elif item.is_expired %}<span class="pill gone">expired</span>
+          {% elif item.expiring_soon %}<span class="pill soon">use in {{ item.days_left }}d</span>
+          {% elif item.expiry_date %}<span class="pill ok">{{ item.expiry_date|date:'j M' }}</span>{% endif %}
+        </div>
+        <div class="segctl">
+          <button class="seg" data-v="in" hx-post="{% url 'app-pantry-set-state' item.id %}" hx-vals='{"to": "in"}' hx-target="#pantry-items" hx-swap="innerHTML">In</button>
+          <button class="seg" data-v="low" hx-post="{% url 'app-pantry-set-state' item.id %}" hx-vals='{"to": "low"}' hx-target="#pantry-items" hx-swap="innerHTML">Low</button>
+          <button class="seg" data-v="out" hx-post="{% url 'app-pantry-set-state' item.id %}" hx-vals='{"to": "out"}' hx-target="#pantry-items" hx-swap="innerHTML">Out</button>
+        </div>
+      </div>
+    </div>
     {% endfor %}
-  </tbody>
-</table>
-{% endif %}
-
+    {% endif %}
+  {% endfor %}
 {% else %}
 <div class="empty">
   <div class="empty-icon">🥡</div>
-  <p>Pantry's empty. Add some items above.</p>
+  <p>Pantry's empty. Add something below.</p>
 </div>
 {% endif %}