feat(freezer): remove expiration tracking for freezer compatibility and clean stock management

public/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>Fridger - Tablet Fridge Manager</title>
+  <title>Fridger - Inventory & Stock Manager</title>
   
   <!-- Tailwind CSS -->
   <script src="https://cdn.tailwindcss.com"></script>
@@ -46,14 +46,14 @@
           </div>
           <div class="hidden xs:block">
             <h1 class="font-extrabold text-lg sm:text-xl leading-none bg-gradient-to-r from-teal-300 to-cyan-300 bg-clip-text text-transparent">Fridger</h1>
-            <p class="text-[11px] text-slate-400 font-medium">Tablet Manager</p>
+            <p class="text-[11px] text-slate-400 font-medium">Fridge & Freezer</p>
           </div>
         </div>
 
         <!-- 3 MAIN TABS: MAIN -> SCAN -> MANAGE -->
         <nav class="flex items-center bg-slate-950 p-1.5 rounded-2xl border border-slate-800 shadow-inner gap-1">
           
-          <!-- 1. MAIN (What's in the Fridge) -->
+          <!-- 1. MAIN (What's in the Fridge / Freezer) -->
           <button 
             id="nav-main-btn" 
             onclick="switchTab('main')" 
@@ -105,25 +105,25 @@
       <div class="flex items-center justify-between text-xs sm:text-sm text-slate-400 overflow-x-auto gap-4 scrollbar-none">
         <div class="flex items-center gap-2 shrink-0">
           <span class="w-2.5 h-2.5 rounded-full bg-teal-400"></span>
-          <span>In Fridge: <strong id="stat-total" class="text-white font-black text-sm sm:text-base">0</strong></span>
+          <span>In Stock: <strong id="stat-total" class="text-white font-black text-sm sm:text-base">0</strong> items</span>
         </div>
         <div class="flex items-center gap-2 shrink-0">
           <span class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span>
-          <span>Fresh: <strong id="stat-fresh" class="text-emerald-300 font-bold">0</strong></span>
-        </div>
-        <div class="flex items-center gap-2 shrink-0">
-          <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
-          <span>Expiring Soon: <strong id="stat-expiring" class="text-amber-300 font-bold">0</strong></span>
+          <span>Full Packs: <strong id="stat-full" class="text-emerald-300 font-bold">0</strong></span>
         </div>
         <div class="flex items-center gap-2 shrink-0">
           <span class="w-2.5 h-2.5 rounded-full bg-indigo-400"></span>
-          <span>Opened: <strong id="stat-opened" class="text-indigo-300 font-bold">0</strong></span>
+          <span>In Use / Partial: <strong id="stat-opened" class="text-indigo-300 font-bold">0</strong></span>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
+          <span>Low (&le;25%): <strong id="stat-low" class="text-amber-300 font-bold">0</strong></span>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- MAIN TAB CONTENT (FRIDGE VIEW) -->
+  <!-- MAIN TAB CONTENT (FRIDGE / FREEZER VIEW) -->
   <main id="main-tab-view" class="flex-1 max-w-4xl mx-auto px-3 sm:px-6 py-4 w-full space-y-3">
     
     <!-- Search & Filter Ribbon in Main tab -->
@@ -134,7 +134,7 @@
           <input 
             type="text" 
             id="search-input" 
-            placeholder="Search items in fridge..." 
+            placeholder="Search items in fridge or freezer..." 
             oninput="handleSearch(this.value)"
             class="w-full bg-slate-900 border border-slate-800 focus:border-teal-500 rounded-xl pl-9 pr-9 py-2.5 text-sm sm:text-base text-slate-100 placeholder-slate-500 outline-none transition"
           >
@@ -145,10 +145,9 @@
 
         <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('fresh')" data-status-btn="fresh" 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">Fresh</button>
-          <button onclick="setStatusFilter('expiring_soon')" data-status-btn="expiring_soon" 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">Expiring</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-indigo-400 hover:text-indigo-300 min-h-[38px] touch-manipulation">&le;25%</button>
-          <button onclick="setStatusFilter('expired')" data-status-btn="expired" class="status-chip px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-rose-400 hover:text-rose-300 min-h-[38px] touch-manipulation">Expired</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">In Use / Partial</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>
       </div>
 
@@ -167,8 +166,8 @@
       <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-slate-900 text-slate-500 flex items-center justify-center mx-auto mb-3 border border-slate-800 text-3xl">
         🧊
       </div>
-      <h3 class="text-lg font-bold text-white mb-1">Your fridge is empty</h3>
-      <p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">Scan a barcode or add an item to track quantities.</p>
+      <h3 class="text-lg font-bold text-white mb-1">Your inventory is empty</h3>
+      <p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">Scan a barcode or add an item to track what you have in stock.</p>
       <button onclick="switchTab('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 Manage</span>
@@ -219,7 +218,7 @@
 
       <!-- Quick Product Pick List -->
       <div class="space-y-1.5 pt-2">
-        <label class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Or tap an item from your fridge:</label>
+        <label class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Or tap an item from stock:</label>
         <div id="manage-quick-picker" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 max-h-48 overflow-y-auto p-1 scrollbar-none">
           <!-- Rendered dynamically -->
         </div>
@@ -237,7 +236,7 @@
           </div>
           <div class="min-w-0">
             <h3 id="manage-selected-name" class="font-extrabold text-white text-base sm:text-lg truncate">Selected Product</h3>
-            <p id="manage-selected-details" class="text-xs sm:text-sm text-slate-400 mt-0.5">Currently: 250g in fridge &bull; 1 Pack = 250g</p>
+            <p id="manage-selected-details" class="text-xs sm:text-sm text-slate-400 mt-0.5">Currently: 250g in stock &bull; 1 Pack = 250g</p>
           </div>
         </div>
 
@@ -260,7 +259,7 @@
             class="p-4 sm:p-5 rounded-2xl border-2 text-center font-extrabold transition-all active:scale-95 touch-manipulation flex flex-col items-center justify-center gap-2 min-h-[80px] bg-slate-950 border-slate-800 text-slate-300 hover:border-emerald-500/60 hover:text-white"
           >
             <i data-lucide="plus-circle" class="w-7 h-7 text-emerald-400"></i>
-            <span class="text-sm sm:text-base">➕ Add to Fridge</span>
+            <span class="text-sm sm:text-base">➕ Add to Stock</span>
           </button>
 
           <button 
@@ -269,7 +268,7 @@
             class="p-4 sm:p-5 rounded-2xl border-2 text-center font-extrabold transition-all active:scale-95 touch-manipulation flex flex-col items-center justify-center gap-2 min-h-[80px] bg-slate-950 border-slate-800 text-slate-300 hover:border-rose-500/60 hover:text-white"
           >
             <i data-lucide="minus-circle" class="w-7 h-7 text-rose-400"></i>
-            <span class="text-sm sm:text-base">➖ Remove from Fridge</span>
+            <span class="text-sm sm:text-base">➖ Remove from Stock</span>
           </button>
         </div>
       </div>
@@ -315,7 +314,6 @@
             <button onclick="changePacketCount(1)" class="w-12 h-12 rounded-2xl bg-slate-800 hover:bg-slate-700 text-white font-extrabold text-2xl flex items-center justify-center active:scale-95 touch-manipulation border border-slate-700">+</button>
           </div>
 
-          <!-- Quick Chips -->
           <div class="flex items-center justify-center gap-2">
             <button onclick="setPacketCount(1)" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs text-slate-200 border border-slate-700 font-bold">1 Pack</button>
             <button onclick="setPacketCount(2)" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs text-slate-200 border border-slate-700 font-bold">2 Packs</button>
@@ -330,7 +328,7 @@
               <span id="manage-amount-val">150</span>
               <span id="manage-amount-unit" class="text-base font-normal text-teal-400">g</span>
             </div>
-            <div id="manage-amount-subtext" class="text-xs text-slate-400 mt-1 font-medium">New remaining amount in fridge</div>
+            <div id="manage-amount-subtext" class="text-xs text-slate-400 mt-1 font-medium">New remaining amount in stock</div>
           </div>
 
           <input 
@@ -344,7 +342,6 @@
             class="w-full accent-teal-500 cursor-pointer h-3 bg-slate-800 rounded-xl"
           >
 
-          <!-- Tablet Quick Delta Chips -->
           <div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
             <button onclick="applyManageDelta(-10)" class="py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs sm:text-sm text-slate-200 border border-slate-700 font-bold touch-manipulation">-10</button>
             <button onclick="applyManageDelta(-25)" class="py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs sm:text-sm text-slate-200 border border-slate-700 font-bold touch-manipulation">-25</button>
@@ -370,7 +367,7 @@
 
   </main>
 
-  <!-- ADD / EDIT ITEM MODAL -->
+  <!-- ADD / EDIT ITEM MODAL (NO EXPIRY REQUIRED) -->
   <div id="item-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
     <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-5 sm:p-6 shadow-2xl space-y-4 my-8 animate-scale-up">
       
@@ -418,22 +415,22 @@
         <div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
           <div class="sm:col-span-2">
             <label class="block text-slate-300 font-semibold mb-1">Product Name *</label>
-            <input type="text" id="modal-name" required placeholder="e.g. Gouda Cheese" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
+            <input type="text" id="modal-name" required placeholder="e.g. Frozen Peas" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
           </div>
           <div>
             <label class="block text-slate-300 font-semibold mb-1">Brand</label>
-            <input type="text" id="modal-brand" placeholder="e.g. Milbona" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
+            <input type="text" id="modal-brand" placeholder="e.g. Iglo" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
           </div>
         </div>
 
         <div class="grid grid-cols-3 gap-2.5">
           <div>
             <label class="block text-slate-300 font-semibold mb-1">Current Amount *</label>
-            <input type="number" id="modal-quantity" step="any" min="0" required placeholder="250" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
+            <input type="number" id="modal-quantity" step="any" min="0" required placeholder="450" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
           </div>
           <div>
             <label class="block text-slate-300 font-semibold mb-1">1 Full Pack Size *</label>
-            <input type="number" id="modal-initial-quantity" step="any" min="0" required placeholder="250" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
+            <input type="number" id="modal-initial-quantity" step="any" min="0" required placeholder="450" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
           </div>
           <div>
             <label class="block text-slate-300 font-semibold mb-1">Unit</label>
@@ -456,25 +453,9 @@
           </select>
         </div>
 
-        <div>
-          <div class="flex items-center justify-between mb-1">
-            <label class="block text-slate-300 font-semibold">Expiration Date</label>
-            <div class="flex items-center gap-2 text-xs">
-              <button type="button" onclick="setModalExpiryDays(3)" class="text-slate-400 hover:text-teal-400 font-medium">+3d</button>
-              <span>&bull;</span>
-              <button type="button" onclick="setModalExpiryDays(7)" class="text-slate-400 hover:text-teal-400 font-medium">+1w</button>
-              <span>&bull;</span>
-              <button type="button" onclick="setModalExpiryDays(14)" class="text-slate-400 hover:text-teal-400 font-medium">+2w</button>
-              <span>&bull;</span>
-              <button type="button" onclick="setModalExpiryDays(30)" class="text-slate-400 hover:text-teal-400 font-medium">+1m</button>
-            </div>
-          </div>
-          <input type="date" id="modal-expiry" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
-        </div>
-
         <div>
           <label class="block text-slate-300 font-semibold mb-1">Notes (Optional)</label>
-          <input type="text" id="modal-notes" placeholder="e.g. For dinner" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
+          <input type="text" id="modal-notes" placeholder="e.g. In top freezer basket" class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-xl px-3.5 py-2.5 text-white outline-none">
         </div>
 
         <div class="flex items-center justify-end gap-3 pt-3 border-t border-slate-800">