feat(ui): add dedicated Filters tab with scrollable categories and pack state cards

public/app.js

@@ -5,7 +5,8 @@
  */
 
 const state = {
-  currentRoute: '/', // '/' or '/manage'
+  currentRoute: '/', // '/', '/filters', or '/manage'
+  allItems: [],
   items: [],
   meta: {
     categories: [],
@@ -58,6 +59,8 @@ function handleInitialRoute() {
   const path = window.location.pathname;
   if (path === '/manage' || path.startsWith('/manage')) {
     setRoute('/manage');
+  } else if (path === '/filters' || path.startsWith('/filters')) {
+    setRoute('/filters');
   } else {
     setRoute('/');
   }
@@ -69,34 +72,54 @@ function navigateTo(path) {
 }
 
 function setRoute(path) {
-  state.currentRoute = path === '/manage' ? '/manage' : '/';
+  if (path === '/manage' || path.startsWith('/manage')) {
+    state.currentRoute = '/manage';
+  } else if (path === '/filters' || path.startsWith('/filters')) {
+    state.currentRoute = '/filters';
+  } else {
+    state.currentRoute = '/';
+  }
   
   const stockBtn = document.getElementById('nav-stock-btn');
+  const filtersBtn = document.getElementById('nav-filters-btn');
   const manageBtn = document.getElementById('nav-manage-btn');
+  
   const stockPage = document.getElementById('stock-view-page');
+  const filtersPage = document.getElementById('filters-view-page');
   const managePage = document.getElementById('manage-view-page');
   const subTitle = document.getElementById('page-subtitle');
 
-  const activeClass = 'flex items-center justify-center gap-2 px-3.5 sm:px-6 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all bg-teal-500 text-white shadow-md active:scale-95 touch-manipulation min-h-[44px]';
-  const inactiveClass = 'flex items-center justify-center gap-2 px-3.5 sm:px-6 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]';
+  const activeClass = 'flex items-center justify-center gap-1.5 sm:gap-2 px-3 sm:px-5 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all bg-teal-500 text-white shadow-md active:scale-95 touch-manipulation min-h-[44px]';
+  const inactiveClass = 'relative flex items-center justify-center gap-1.5 sm:gap-2 px-3 sm:px-5 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]';
+
+  // Hide all pages first
+  stockPage.classList.add('hidden');
+  filtersPage.classList.add('hidden');
+  managePage.classList.add('hidden');
+
+  stockBtn.className = inactiveClass;
+  filtersBtn.className = inactiveClass;
+  manageBtn.className = inactiveClass;
 
   if (state.currentRoute === '/') {
     stockBtn.className = activeClass;
-    manageBtn.className = inactiveClass;
     stockPage.classList.remove('hidden');
-    managePage.classList.add('hidden');
     subTitle.textContent = 'Current Stock';
     renderStockView();
+  } else if (state.currentRoute === '/filters') {
+    filtersBtn.className = activeClass;
+    filtersPage.classList.remove('hidden');
+    subTitle.textContent = 'Filter Stock';
+    renderFilterTabView();
   } else {
     manageBtn.className = activeClass;
-    stockBtn.className = inactiveClass;
     managePage.classList.remove('hidden');
-    stockPage.classList.add('hidden');
     subTitle.textContent = 'Manager';
     resetTabletManageStation();
     renderTabletProductPicker('');
   }
 
+  updateFilterUIState();
   initLucide();
 }
 
@@ -109,7 +132,7 @@ async function loadMetadata() {
     const res = await fetch('/api/meta');
     if (res.ok) {
       state.meta = await res.json();
-      renderCategoryFilters();
+      renderCategoryFilterCards();
       populateModalSelects();
     }
   } catch (err) {
@@ -134,6 +157,12 @@ async function loadStats() {
 
 async function loadItems() {
   try {
+    // Fetch all items to accurately compute category & status counts
+    const resAll = await fetch('/api/items');
+    if (resAll.ok) {
+      state.allItems = await resAll.json();
+    }
+
     const params = new URLSearchParams();
     if (state.filters.search) params.append('search', state.filters.search);
     if (state.filters.category && state.filters.category !== 'All') params.append('category', state.filters.category);
@@ -144,11 +173,14 @@ async function loadItems() {
       state.items = await res.json();
       if (state.currentRoute === '/') {
         renderStockView();
+      } else if (state.currentRoute === '/filters') {
+        renderFilterTabView();
       } else {
         const query = document.getElementById('tablet-search-input')?.value || '';
         renderTabletProductPicker(query);
       }
     }
+    updateFilterUIState();
   } catch (err) {
     console.error('Failed to load inventory:', err);
     showToast('Failed to load inventory', 'error');
@@ -182,52 +214,176 @@ function clearSearch() {
   loadItems();
 }
 
+// ----------------------------------------------------
+// ROUTE 2: /filters (DEDICATED FILTERS TAB)
+// ----------------------------------------------------
+
 function setStatusFilter(status) {
   state.filters.status = status;
-  document.querySelectorAll('[data-status-btn]').forEach(btn => {
-    if (btn.getAttribute('data-status-btn') === status) {
-      btn.className = 'status-chip active px-3.5 py-2 rounded-xl bg-slate-800 border border-slate-700 text-white font-bold min-h-[38px] touch-manipulation';
-    } else {
-      btn.className = 'status-chip px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-slate-200 min-h-[38px] touch-manipulation';
-    }
-  });
+  updateFilterUIState();
   loadItems();
 }
 
 function setCategoryFilter(category) {
   state.filters.category = category;
-  renderCategoryFilters();
+  updateFilterUIState();
   loadItems();
 }
 
-function renderCategoryFilters() {
-  const container = document.getElementById('category-filter-bar');
-  if (!container) return;
+function resetAllFilters() {
+  state.filters.category = 'All';
+  state.filters.status = 'all';
+  state.filters.search = '';
+  const searchInput = document.getElementById('search-input');
+  if (searchInput) searchInput.value = '';
+  const clearBtn = document.getElementById('clear-search');
+  if (clearBtn) clearBtn.classList.add('hidden');
+  
+  updateFilterUIState();
+  loadItems();
+  showToast('Filters reset to All', 'info');
+}
+
+function renderCategoryFilterCards() {
+  const container = document.getElementById('filter-categories-container');
+  if (!container || !state.meta.categories) return;
 
   let html = `
-    <button onclick="setCategoryFilter('All')" class="px-3.5 py-2 rounded-xl border whitespace-nowrap transition text-xs sm:text-sm min-h-[38px] touch-manipulation ${
-      state.filters.category === 'All' 
-        ? 'bg-teal-500/20 text-teal-300 border-teal-500/50 font-bold' 
-        : 'bg-slate-900 text-slate-400 border-slate-800 hover:text-slate-200'
-    }">
-      All Categories
+    <!-- All Categories -->
+    <button 
+      onclick="setCategoryFilter('All')" 
+      data-filter-cat="All"
+      class="filter-cat-card p-3 sm:p-4 rounded-2xl border text-left flex items-center gap-3 transition-all active:scale-95 touch-manipulation min-h-[64px] bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700"
+    >
+      <div class="w-10 h-10 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0">
+        <i data-lucide="layout-grid" class="w-5 h-5"></i>
+      </div>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center justify-between gap-1">
+          <h4 class="text-xs sm:text-sm font-extrabold text-white truncate">All Categories</h4>
+          <span id="cat-count-all" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
+        </div>
+        <p class="text-[10px] text-slate-400 truncate">View everything</p>
+      </div>
     </button>
   `;
 
   state.meta.categories.forEach(cat => {
-    const isSelected = state.filters.category === cat.id;
     html += `
-      <button onclick="setCategoryFilter('${escapeHtml(cat.id)}')" class="px-3.5 py-2 rounded-xl border whitespace-nowrap transition text-xs sm:text-sm min-h-[38px] touch-manipulation ${
-        isSelected 
-          ? 'bg-teal-500/20 text-teal-300 border-teal-500/50 font-bold' 
-          : 'bg-slate-900 text-slate-400 border-slate-800 hover:text-slate-200'
-      }">
-        ${escapeHtml(cat.name)}
+      <button 
+        onclick="setCategoryFilter('${escapeHtml(cat.id)}')" 
+        data-filter-cat="${escapeHtml(cat.id)}"
+        class="filter-cat-card p-3 sm:p-4 rounded-2xl border text-left flex items-center gap-3 transition-all active:scale-95 touch-manipulation min-h-[64px] bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700"
+      >
+        <div class="w-10 h-10 rounded-xl bg-slate-800 text-teal-400 flex items-center justify-center shrink-0">
+          <i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-5 h-5"></i>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center justify-between gap-1">
+            <h4 class="text-xs sm:text-sm font-extrabold text-white truncate">${escapeHtml(cat.name)}</h4>
+            <span id="cat-count-${escapeHtml(cat.id.replace(/[^a-zA-Z0-9]/g, ''))}" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
+          </div>
+          <p class="text-[10px] text-slate-400 truncate">${escapeHtml(cat.id)}</p>
+        </div>
       </button>
     `;
   });
 
   container.innerHTML = html;
+  initLucide();
+}
+
+function renderFilterTabView() {
+  updateFilterUIState();
+}
+
+function updateFilterUIState() {
+  // 1. Update Pack State cards highlight & counts
+  const allItems = state.allItems || [];
+  const fullCount = allItems.filter(i => !i.is_opened && i.quantity >= i.initial_quantity).length;
+  const openedCount = allItems.filter(i => i.is_opened || i.quantity < i.initial_quantity).length;
+  const lowCount = allItems.filter(i => i.quantity <= (i.initial_quantity * 0.25)).length;
+
+  const countAllEl = document.getElementById('filter-count-all');
+  const countFullEl = document.getElementById('filter-count-full');
+  const countOpenedEl = document.getElementById('filter-count-opened');
+  const countLowEl = document.getElementById('filter-count-low');
+  const countTotalEl = document.getElementById('filter-total-count');
+
+  if (countAllEl) countAllEl.textContent = allItems.length;
+  if (countFullEl) countFullEl.textContent = fullCount;
+  if (countOpenedEl) countOpenedEl.textContent = openedCount;
+  if (countLowEl) countLowEl.textContent = lowCount;
+  if (countTotalEl) countTotalEl.textContent = state.items.length;
+
+  // Highlight status cards
+  document.querySelectorAll('[data-filter-status]').forEach(card => {
+    const status = card.getAttribute('data-filter-status');
+    const isSelected = state.filters.status === status;
+    if (isSelected) {
+      card.className = 'filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border-2 text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30';
+    } else {
+      card.className = 'filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700';
+    }
+  });
+
+  // 2. Update Category cards counts & highlight
+  const catAllCountEl = document.getElementById('cat-count-all');
+  if (catAllCountEl) catAllCountEl.textContent = allItems.length;
+
+  if (state.meta.categories) {
+    state.meta.categories.forEach(cat => {
+      const sanitized = cat.id.replace(/[^a-zA-Z0-9]/g, '');
+      const countEl = document.getElementById(`cat-count-${sanitized}`);
+      if (countEl) {
+        const c = allItems.filter(i => i.category === cat.id).length;
+        countEl.textContent = c;
+      }
+    });
+  }
+
+  document.querySelectorAll('[data-filter-cat]').forEach(card => {
+    const cat = card.getAttribute('data-filter-cat');
+    const isSelected = state.filters.category === cat;
+    if (isSelected) {
+      card.className = 'filter-cat-card p-3 sm:p-4 rounded-2xl border-2 text-left flex items-center gap-3 transition-all active:scale-95 touch-manipulation min-h-[64px] bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30';
+    } else {
+      card.className = 'filter-cat-card p-3 sm:p-4 rounded-2xl border text-left flex items-center gap-3 transition-all active:scale-95 touch-manipulation min-h-[64px] bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700';
+    }
+  });
+
+  // 3. Top Navigation Badge
+  const navBadge = document.getElementById('nav-filter-badge');
+  let activeFilterCount = 0;
+  if (state.filters.category !== 'All') activeFilterCount++;
+  if (state.filters.status !== 'all') activeFilterCount++;
+
+  if (navBadge) {
+    if (activeFilterCount > 0) {
+      navBadge.textContent = activeFilterCount;
+      navBadge.classList.remove('hidden');
+    } else {
+      navBadge.classList.add('hidden');
+    }
+  }
+
+  // 4. Stock page active filter banner
+  const banner = document.getElementById('active-filter-indicator');
+  const bannerText = document.getElementById('active-filter-text');
+  if (banner && bannerText) {
+    if (activeFilterCount > 0) {
+      const parts = [];
+      if (state.filters.category !== 'All') parts.push(`Category: ${state.filters.category}`);
+      if (state.filters.status !== 'all') {
+        const labels = { full: 'Full Packs', opened: 'Opened / In-Use', low: 'Low Stock' };
+        parts.push(`Status: ${labels[state.filters.status] || state.filters.status}`);
+      }
+      bannerText.textContent = `Filtered by: ${parts.join(' • ')} (${state.items.length} items)`;
+      banner.classList.remove('hidden');
+    } else {
+      banner.classList.add('hidden');
+    }
+  }
 }
 
 function renderStockView() {

public/index.html

@@ -56,17 +56,28 @@
           <button 
             id="nav-stock-btn" 
             onclick="navigateTo('/')" 
-            class="flex items-center justify-center gap-2 px-3.5 sm:px-6 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all bg-teal-500 text-white shadow-md active:scale-95 touch-manipulation min-h-[44px]"
+            class="flex items-center justify-center gap-2 px-3 sm:px-5 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all bg-teal-500 text-white shadow-md active:scale-95 touch-manipulation min-h-[44px]"
           >
             <i data-lucide="layout-grid" class="w-4 h-4 sm:w-5 sm:h-5"></i>
-            <span>Current Stock</span>
+            <span>Stock</span>
           </button>
 
-          <!-- 2. Manager (/manage) -->
+          <!-- 2. Filters (/filters) -->
+          <button 
+            id="nav-filters-btn" 
+            onclick="navigateTo('/filters')" 
+            class="relative flex items-center justify-center gap-1.5 sm:gap-2 px-3 sm:px-5 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]"
+          >
+            <i data-lucide="filter" class="w-4 h-4 sm:w-5 sm:h-5 text-teal-400"></i>
+            <span>Filters</span>
+            <span id="nav-filter-badge" class="hidden px-1.5 py-0.5 text-[10px] font-black rounded-full bg-teal-500 text-white leading-none">0</span>
+          </button>
+
+          <!-- 3. Manager (/manage) -->
           <button 
             id="nav-manage-btn" 
             onclick="navigateTo('/manage')" 
-            class="flex items-center justify-center gap-2 px-3.5 sm:px-6 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]"
+            class="flex items-center justify-center gap-2 px-3 sm:px-5 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]"
           >
             <i data-lucide="sliders-horizontal" class="w-4 h-4 sm:w-5 sm:h-5 text-teal-400"></i>
             <span>Manager</span>
@@ -106,10 +117,10 @@
       </div>
     </section>
 
-    <!-- Stock Search & Filters -->
+    <!-- Stock Search & Active Filters Bar -->
     <main class="flex-1 max-w-4xl mx-auto px-3 sm:px-6 py-4 w-full space-y-3">
-      <div class="space-y-2.5">
-        <div class="flex flex-col sm:flex-row gap-2.5 items-stretch sm:items-center justify-between">
+      <div class="space-y-2">
+        <div class="flex gap-2 items-center">
           <div class="relative flex-1">
             <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
             <input 
@@ -123,22 +134,26 @@
               <i data-lucide="x" class="w-4 h-4"></i>
             </button>
           </div>
-
-          <div class="flex items-center gap-1.5 overflow-x-auto pb-0.5 text-xs sm:text-sm font-medium scrollbar-none">
-            <button onclick="setStatusFilter('all')" data-status-btn="all" class="status-chip active px-3.5 py-2 rounded-xl bg-slate-800 border border-slate-700 text-white font-bold min-h-[38px] touch-manipulation">All</button>
-            <button onclick="setStatusFilter('full')" data-status-btn="full" class="status-chip px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-slate-200 min-h-[38px] touch-manipulation">Full Packs</button>
-            <button onclick="setStatusFilter('opened')" data-status-btn="opened" class="status-chip px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-indigo-400 hover:text-indigo-300 min-h-[38px] touch-manipulation">Opened</button>
-            <button onclick="setStatusFilter('low')" data-status-btn="low" class="status-chip px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-amber-400 hover:text-amber-300 min-h-[38px] touch-manipulation">&le;25% Low</button>
-          </div>
+          <button onclick="navigateTo('/filters')" class="px-3.5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 text-xs sm:text-sm font-bold flex items-center gap-1.5 shrink-0 min-h-[42px] touch-manipulation">
+            <i data-lucide="sliders" class="w-4 h-4 text-teal-400"></i>
+            <span>Filter</span>
+          </button>
         </div>
 
-        <div id="category-filter-bar" class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none text-xs sm:text-sm font-medium">
-          <!-- Injected by JS -->
+        <!-- Active Filter Indicator Banner -->
+        <div id="active-filter-indicator" class="hidden flex items-center justify-between gap-2 p-2 px-3 bg-teal-950/40 border border-teal-500/30 rounded-xl text-xs">
+          <div class="flex items-center gap-2 min-w-0">
+            <i data-lucide="filter" class="w-3.5 h-3.5 text-teal-400 shrink-0"></i>
+            <span id="active-filter-text" class="text-teal-200 truncate font-medium">Filtering by Category: Dairy & Cheese</span>
+          </div>
+          <button onclick="resetAllFilters()" class="text-teal-300 hover:text-white underline text-xs shrink-0 font-bold">
+            Reset
+          </button>
         </div>
       </div>
 
       <!-- Current Stock Grid (Display only) -->
-      <div id="stock-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5 sm:gap-4 pt-2">
+      <div id="stock-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5 sm:gap-4 pt-1">
         <!-- Rendered items -->
       </div>
 
@@ -148,12 +163,147 @@
           🧊
         </div>
         <h3 class="text-lg font-bold text-white mb-1">No items in stock</h3>
-        <p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">Use Manager to scan or add items.</p>
-        <button onclick="navigateTo('/manage')" class="px-6 py-3 rounded-xl bg-teal-500 hover:bg-teal-400 text-white text-sm font-bold flex items-center gap-2 shadow-lg shadow-teal-500/20 active:scale-95 touch-manipulation mx-auto">
-          <i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
-          <span>Go to Manager (/manage)</span>
+        <p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">No matching items found with the current filters.</p>
+        <div class="flex items-center justify-center gap-3">
+          <button onclick="resetAllFilters()" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs sm:text-sm font-bold active:scale-95 touch-manipulation">
+            Reset Filters
+          </button>
+          <button onclick="navigateTo('/manage')" class="px-5 py-2.5 rounded-xl bg-teal-500 hover:bg-teal-400 text-white text-xs sm:text-sm font-bold flex items-center gap-2 shadow-lg shadow-teal-500/20 active:scale-95 touch-manipulation">
+            <i data-lucide="sliders-horizontal" class="w-4 h-4"></i>
+            <span>Go to Manager</span>
+          </button>
+        </div>
+      </div>
+    </main>
+
+  </div>
+
+  <!-- ======================================================== -->
+  <!-- 2. FILTERS VIEW: /filters                                -->
+  <!-- ======================================================== -->
+  <div id="filters-view-page" class="hidden flex-1 flex flex-col">
+    
+    <main class="flex-1 max-w-3xl mx-auto px-3 sm:px-6 py-4 sm:py-6 w-full space-y-6">
+      
+      <!-- Top Title Bar -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-lg sm:text-xl font-extrabold text-white">Filter Stock</h2>
+          <p class="text-xs sm:text-sm text-slate-400">Scroll and select pack states and categories</p>
+        </div>
+        <button 
+          onclick="resetAllFilters()" 
+          class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-white border border-slate-800 text-xs sm:text-sm font-bold transition active:scale-95 touch-manipulation"
+        >
+          Reset All
         </button>
       </div>
+
+      <!-- Section 1: Pack States (Scrollable cards) -->
+      <div class="space-y-2.5">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-bold text-teal-400 uppercase tracking-wider">Pack States & Condition</label>
+          <span class="text-[11px] text-slate-500">Scroll horizontally &rarr;</span>
+        </div>
+        
+        <div class="flex items-stretch gap-3 overflow-x-auto pb-2 scrollbar-none pt-1">
+          <!-- All Pack States -->
+          <button 
+            onclick="setStatusFilter('all')" 
+            data-filter-status="all"
+            class="filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/10"
+          >
+            <div class="flex items-center justify-between">
+              <span class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center">
+                <i data-lucide="layers" class="w-4 h-4"></i>
+              </span>
+              <span id="filter-count-all" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300">0</span>
+            </div>
+            <div>
+              <h4 class="text-sm sm:text-base font-extrabold text-white">All Stock</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">Everything in fridge</p>
+            </div>
+          </button>
+
+          <!-- Full Packs -->
+          <button 
+            onclick="setStatusFilter('full')" 
+            data-filter-status="full"
+            class="filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700"
+          >
+            <div class="flex items-center justify-between">
+              <span class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
+                <i data-lucide="package-check" class="w-4 h-4"></i>
+              </span>
+              <span id="filter-count-full" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-emerald-300">0</span>
+            </div>
+            <div>
+              <h4 class="text-sm sm:text-base font-extrabold text-white">Full Packs</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">100% unopened items</p>
+            </div>
+          </button>
+
+          <!-- Opened / In Use -->
+          <button 
+            onclick="setStatusFilter('opened')" 
+            data-filter-status="opened"
+            class="filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700"
+          >
+            <div class="flex items-center justify-between">
+              <span class="w-8 h-8 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center">
+                <i data-lucide="package-open" class="w-4 h-4"></i>
+              </span>
+              <span id="filter-count-opened" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-indigo-300">0</span>
+            </div>
+            <div>
+              <h4 class="text-sm sm:text-base font-extrabold text-white">Opened</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">In-use & partial packs</p>
+            </div>
+          </button>
+
+          <!-- Low Stock -->
+          <button 
+            onclick="setStatusFilter('low')" 
+            data-filter-status="low"
+            class="filter-status-card flex-1 min-w-[140px] sm:min-w-[160px] p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all active:scale-95 touch-manipulation bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700"
+          >
+            <div class="flex items-center justify-between">
+              <span class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
+                <i data-lucide="alert-circle" class="w-4 h-4"></i>
+              </span>
+              <span id="filter-count-low" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-amber-300">0</span>
+            </div>
+            <div>
+              <h4 class="text-sm sm:text-base font-extrabold text-white">Low Stock</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">&le;25% remaining</p>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <!-- Section 2: Categories (Scrollable touch grid) -->
+      <div class="space-y-2.5">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-bold text-teal-400 uppercase tracking-wider">Categories</label>
+          <span class="text-[11px] text-slate-500">Tap to filter</span>
+        </div>
+
+        <div id="filter-categories-container" class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-[380px] overflow-y-auto p-1 scrollbar-none">
+          <!-- Populated dynamically with Category Cards -->
+        </div>
+      </div>
+
+      <!-- Floating Bottom Action Bar -->
+      <div class="pt-2 sticky bottom-4 z-20">
+        <button 
+          onclick="navigateTo('/')" 
+          class="w-full py-4 rounded-2xl bg-teal-500 hover:bg-teal-400 text-white font-extrabold text-base sm:text-lg shadow-2xl shadow-teal-500/30 active:scale-95 transition-all touch-manipulation flex items-center justify-center gap-2"
+        >
+          <i data-lucide="check" class="w-5 h-5"></i>
+          <span>View Filtered Stock (<span id="filter-total-count">0</span> items)</span>
+        </button>
+      </div>
+
     </main>
 
   </div>