Added expiry date to the search page

README.md

@@ -8,7 +8,7 @@ Webpage Playground is a lightweight, responsive web application for managing and
 
 - **Dynamic Navigation** — Easy page switching with a responsive navbar
 - **Inventory Demo** — Display items using reusable item components
-- **Advanced Search** — Filter inventory by name, location, and quantity range
+- **Advanced Search** — Filter inventory by name, location, quantity range, and expiry date
 - **Barcode Scanner** — Scan barcodes for inventory management (keyboard and hardware scanner support)
 - **Data Visualization** — Pie chart showing inventory distribution
 - **Responsive Design** — Works on desktop, tablet, and mobile devices
@@ -17,7 +17,7 @@ Webpage Playground is a lightweight, responsive web application for managing and
 
 ### Pages
 - `index.html` — Homepage with item component demo and inventory pie chart
-- `search.html` — Search and filter inventory by name, location, and quantity
+- `search.html` — Search and filter inventory by name, location, quantity, and expiry date
 - `barcode.html` — Barcode scanner with console logging for testing
 - `pantry.html` — Pantry inventory container
 - `fridge.html` — Fridge inventory container  
@@ -27,7 +27,7 @@ Webpage Playground is a lightweight, responsive web application for managing and
 - `navbar.js` — Dynamic navigation bar system loaded by all pages
 - `main.css` — Global styles and responsive design
 - `item-component.js` — Reusable ES6 module for displaying inventory items in a grid
-- `search.js` — Search and filtering logic with 20 sample inventory items
+- `search.js` — Search and filtering logic with 20 sample inventory items including expiry dates
 - `barcode-scanner.js` — Barcode capture and console logging module
 - `piechart.js` — Inventory distribution pie chart visualization
 
@@ -55,20 +55,33 @@ Advanced inventory search and filtering interface.
 - Search by item name (case-insensitive)
 - Filter by storage location (All, Pantry, Fridge, Freezer)
 - Filter by quantity range (min/max values)
+- **NEW: Filter by expiry date range (start date and end date)**
 - Real-time result display with item cards
+- Visual expiry status indicators (Fresh, Expiring Soon, Expired)
 - Reset button to clear all filters
 - Keyboard support (press Enter to search)
+- Date range validation (start date ≤ end date)
+
+**Expiry Date Features:**
+- Each inventory item includes an expiry date
+- Visual badges show expiry status:
+  - 🟢 **Fresh** — Items expiring in more than 7 days
+  - 🟠 **Expiring Soon** — Items expiring within 7 days
+  - 🔴 **Expired** — Items past expiry date
+- Formatted expiry dates displayed on item cards
+- Filter by start and end date to find items expiring in a specific timeframe
 
 **Sample Usage:**
 ```
-Search for "milk" in the Fridge with quantity >= 1
-Results displayed using item-component for consistency
+Search for items expiring between March 15 and April 15
+Results show all items with expiry dates in that range
+Items display formatted dates and expiry status badges
 ```
 
 **Available Items (20 total across all locations):**
-- Pantry: Pasta, Rice, Cereal, Flour, Sugar, Salt, Olive Oil, Canned Beans
-- Fridge: Milk, Cheese, Greek Yogurt, Eggs, Butter, Chicken Salad
-- Freezer: Ice Cream, Frozen Vegetables, Chicken Breast, Ground Beef, Pizza, Ice
+- Pantry: Pasta (120 days), Rice (180 days), Cereal (60 days), Flour (150 days), Sugar (200 days), Salt (365 days), Olive Oil (90 days), Canned Beans (EXPIRED -10 days)
+- Fridge: Milk (5 days), Cheese (30 days), Greek Yogurt (7 days), Eggs (21 days), Butter (45 days), Chicken Salad (EXPIRED -2 days)
+- Freezer: Ice Cream (90 days), Frozen Vegetables (180 days), Chicken Breast (120 days), Ground Beef (150 days), Pizza (200 days), Ice (365 days)
 
 ### 📱 Barcode Scanner (`barcode.html`)
 Barcode capture interface with console logging for testing.
@@ -129,7 +142,7 @@ python -m http.server 8000
 ### Navigation
 The navbar appears at the top of every page and provides links to:
 - Homepage — Main demo page with pie chart
-- Search — Advanced inventory search and filtering
+- Search — Advanced inventory search and filtering with expiry date support
 - Barcode Scanner — Barcode capture interface (testing via console)
 - Pantry, Fridge, Freezer — Individual storage location pages
 
@@ -139,10 +152,16 @@ The navbar appears at the top of every page and provides links to:
    - Item name (optional)
    - Storage location (optional, defaults to "All")
    - Quantity range (optional, defaults to 0-999)
+   - **Expiry date range (optional) — Leave blank to ignore**
 3. Click "Search" or press Enter
-4. Results display as item cards using the item component
+4. Results display as item cards using the item component with expiry status badges
 5. Click "Reset" to clear all filters
 
+**Expiry Date Search Examples:**
+- Find items expiring soon: Set start date to today, end date to 7 days from today
+- Find expired items: Set start date to 100 days ago, end date to today
+- Find fresh items: Set start date to tomorrow, end date to 90 days from today
+
 ### Using the Barcode Scanner
 1. Open the Barcode Scanner page from the navbar
 2. Click in the input field (auto-focused)
@@ -166,7 +185,7 @@ The `item-component` is a reusable UI building block used throughout the app. Se
     imgAlt: 'Milk',
     text1: 'Milk',
     text2: 'Fridge — 1 carton',
-    text3: 'Expires in 5 days'
+    text3: 'Expires Mar 15, 2026'
   });
   
   document.getElementById('container').appendChild(item);
@@ -179,15 +198,26 @@ The `item-component` is a reusable UI building block used throughout the app. Se
 Edit `search.js` and add items to the `inventoryData` array:
 ```javascript
 export const inventoryData = [
-  { id: 21, name: 'Coffee', location: 'Pantry', quantity: 2, unit: 'bags', img: 'https://picsum.photos/seed/coffee/200/200' },
+  { 
+    id: 21, 
+    name: 'Coffee', 
+    location: 'Pantry', 
+    quantity: 2, 
+    unit: 'bags', 
+    expiryDate: '2026-06-15',
+    img: 'https://picsum.photos/seed/coffee/200/200' 
+  },
   // ... more items
 ];
 ```
 
+**Date Format:** Use ISO 8601 format (YYYY-MM-DD) for expiry dates.
+
 ### Styling
 - Override styles in `main.css` for global changes
 - Page-specific styles are included in `<style>` tags within each HTML file
 - The item component injects responsive grid CSS automatically
+- Expiry badge styles can be customized via `.expiry-fresh`, `.expiry-soon`, `.expiry-expired` classes
 
 ### Creating New Pages
 1. Create a new `.html` file following the template:
@@ -220,9 +250,11 @@ export const inventoryData = [
 - Replace placeholder images with real inventory photos
 - Implement backend storage (currently using static data)
 - Add user authentication
+- Integrate with real barcode/UPC database
 - Consider a frontend framework (React, Vue, etc.) for scale
 - Add unit/integration tests
 - Set up CI/CD pipeline
+- Implement database for persistent storage and expiry date tracking
 
 ## Contributing
 
@@ -235,7 +267,9 @@ Contributions are welcome! Suggested improvements:
 - [ ] Implement item editing/deletion on storage pages
 - [ ] Add barcode/UPC lookup for real products
 - [ ] Convert item-component to custom element (`<item-component>`)
-- [ ] Add more detailed inventory tracking (expiration dates, locations within rooms, etc.)
+- [ ] Add more detailed inventory tracking (expiration dates calculations, locations within rooms, batch numbers, etc.)
+- [ ] Add email/notification alerts for items expiring soon
+- [ ] Implement CSV import/export for inventory
 
 ## License