pantry-management-frontend/README.md

# Webpage Playground

A modern inventory management demo app featuring multiple pages for browsing, searching, and scanning barcodes. Built with vanilla HTML, CSS, and JavaScript.

## Overview

Webpage Playground is a lightweight, responsive web application for managing and tracking inventory across multiple storage locations (Pantry, Fridge, Freezer). The app includes:

- **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
- **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

## Project Structure

### Pages
- `index.html` — Homepage with item component demo and inventory pie chart
- `search.html` — Search and filter inventory by name, location, and quantity
- `barcode.html` — Barcode scanner with console logging for testing
- `pantry.html` — Pantry inventory container
- `fridge.html` — Fridge inventory container  
- `freezer.html` — Freezer inventory container

### Core Modules
- `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
- `barcode-scanner.js` — Barcode capture and console logging module
- `piechart.js` — Inventory distribution pie chart visualization

### Documentation
- `ITEM_COMPONENT.md` — Detailed documentation for the item component factory
- `README.md` — This file

## Features Overview

### 🏠 Homepage (`index.html`)
The landing page showcasing the project with:
- Interactive item component grid (3 sample items)
- Inventory breakdown pie chart showing distribution across storage locations
- Responsive grid layout that adapts to screen size

**Sample Data:**
- Pantry: 104 items
- Fridge: 30 items
- Freezer: 87 items

### 🔍 Search Page (`search.html`)
Advanced inventory search and filtering interface.

**Features:**
- Search by item name (case-insensitive)
- Filter by storage location (All, Pantry, Fridge, Freezer)
- Filter by quantity range (min/max values)
- Real-time result display with item cards
- Reset button to clear all filters
- Keyboard support (press Enter to search)

**Sample Usage:**
```
Search for "milk" in the Fridge with quantity >= 1
Results displayed using item-component for consistency
```

**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

### 📱 Barcode Scanner (`barcode.html`)
Barcode capture interface with console logging for testing.

**Features:**
- Keyboard input simulation (type barcode + press Enter)
- Hardware barcode scanner device support (ready for integration)
- Paste support (Ctrl/Cmd+V)
- Console logging with formatted output including:
  - Timestamp (HH:MM:SS.mmm format)
  - Barcode value
  - Input type detection (keyboard, hardware-scanner, keyboard-paste)
  - Metadata for debugging
- Auto-focus input field after each scan
- Visual status indicator
- Helper instructions and "Open Console" button

**Console Output Format:**
```
[Barcode Scanned] 14:07:32.456 | Barcode: 5901234123457 | Input: keyboard
```

**Testing Instructions:**
1. Navigate to the Barcode Scanner page via navbar
2. Type a barcode value or use a barcode scanner device
3. Press Enter to complete the scan
4. Press F12 to open Developer Tools
5. Switch to the Console tab to view scanned barcodes with metadata

### 📦 Storage Location Pages
- `pantry.html` — Pantry inventory (expandable for displaying specific items)
- `fridge.html` — Fridge inventory
- `freezer.html` — Freezer inventory

These pages are currently placeholder containers ready for future development (e.g., displaying items specific to each location).

## Quick Start

The project is a static site. For best results, serve it over HTTP (ES module imports can be blocked when opened via the `file://` protocol in some browsers).

### Python 3 (Recommended)

```bash
# From the project root
python -m http.server 8000

# Then open http://localhost:8000 in your browser
```

### Alternative Options

- **VS Code Live Server Extension** — Right-click `index.html` → "Open with Live Server"
- **Node.js http-server** — `npx http-server`
- **Any static file server**

## Usage

### 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
- Barcode Scanner — Barcode capture interface (testing via console)
- Pantry, Fridge, Freezer — Individual storage location pages

### Using the Search Page
1. Open the Search page from the navbar
2. Enter search criteria:
   - Item name (optional)
   - Storage location (optional, defaults to "All")
   - Quantity range (optional, defaults to 0-999)
3. Click "Search" or press Enter
4. Results display as item cards using the item component
5. Click "Reset" to clear all filters

### Using the Barcode Scanner
1. Open the Barcode Scanner page from the navbar
2. Click in the input field (auto-focused)
3. Enter a barcode:
   - Type manually and press Enter
   - Scan with a barcode scanner device
   - Paste a value (Ctrl/Cmd+V)
4. Press F12 to open Developer Tools Console
5. View scanned barcodes in the Console tab with timestamp and metadata

### The Item Component
The `item-component` is a reusable UI building block used throughout the app. See `ITEM_COMPONENT.md` for detailed documentation on using it in your own pages.

**Quick Example:**
```html
<script type="module">
  import createItemComponent from './item-component.js';
  
  const item = createItemComponent({
    imgSrc: 'https://picsum.photos/seed/1/200/200',
    imgAlt: 'Milk',
    text1: 'Milk',
    text2: 'Fridge — 1 carton',
    text3: 'Expires in 5 days'
  });
  
  document.getElementById('container').appendChild(item);
</script>
```

## Customizing and Extending

### Adding New Items to Search
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' },
  // ... more items
];
```

### 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

### Creating New Pages
1. Create a new `.html` file following the template:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Page Title</title>
</head>
<body>
  <div id="navbar-placeholder"></div>
  <div id="page-content">
    <h2>Page Title</h2>
    <!-- Your content here -->
  </div>
  <script src="navbar.js"></script>
</body>
</html>
```

2. Update `navbar.js` to add a link to your new page:
```javascript
<li><a href="yourpage.html" data-route="yourpage.html">Your Page</a></li>
```

### Converting to Production
- Replace placeholder images with real inventory photos
- Implement backend storage (currently using static data)
- Add user authentication
- Consider a frontend framework (React, Vue, etc.) for scale
- Add unit/integration tests
- Set up CI/CD pipeline

## Contributing

Contributions are welcome! Suggested improvements:

- [ ] Add unit and visual tests
- [ ] Replace placeholder images with real inventory photos
- [ ] Implement barcode scanner backend integration (save to database)
- [ ] Add user accounts and authentication
- [ ] 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.)

## License

Use as you like; no license file is included by default.