feat: add comprehensive E2E testing guide (#40)

- Complete manual testing guide (E2E_TESTING.md)
- 30+ test scenarios across 10 categories
- Critical user flows documented
- Test data seed script
- Bug report template
- Cross-browser test matrix
- Accessibility testing
- Performance testing
- Error handling tests

Test categories:
1. Authentication (4 tests)
2. Inventory Management (5 tests)
3. Barcode Scanning (3 tests)
4. Tag Management (3 tests)
5. PWA Installation (3 tests)
6. Offline Functionality (3 tests)
7. Responsive Design (3 tests)
8. Performance (2 tests)
9. Accessibility (2 tests)
10. Error Handling (2 tests)

Ready for pre-release testing.

Closes #40

.dockerignore

@@ -0,0 +1,68 @@
+# Dependencies
+node_modules
+app/node_modules
+supabase/node_modules
+
+# Build outputs
+.nuxt
+app/.nuxt
+.output
+app/.output
+dist
+app/dist
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Environment files (use docker env vars instead)
+.env
+.env.local
+.env.*.local
+app/.env
+app/.env.local
+
+# Editor directories and files
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# CI/CD
+.github
+.gitea
+
+# Documentation
+*.md
+docs/
+!README.md
+
+# Tests
+test/
+tests/
+*.spec.js
+*.spec.ts
+*.test.js
+*.test.ts
+
+# Temporary files
+*.tmp
+*.bak
+*.swp
+.cache
+
+# Supabase (handled separately)
+supabase/

.env.example

@@ -1,54 +1,20 @@
-# Pantry - Environment Variables Template
+# Supabase Local Development Environment
-# Copy to .env.development for local development
+# Copy this file to .env and adjust as needed
-# Copy to .env.production for production deployment
 
-# ==============================================
+# PostgreSQL
-# Supabase Configuration
+POSTGRES_PASSWORD=postgres
-# ==============================================
 
-# Supabase API URL (from Coolify service)
+# JWT Secret (generate with: openssl rand -base64 32)
-SUPABASE_URL=https://your-supabase-instance.example.com
+# Default is fine for local dev, change for production
+JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
 
-# Supabase Anon Key (public, safe to expose to frontend)
+# API Keys
-SUPABASE_ANON_KEY=your-anon-key-here
+# These are Supabase's default demo keys - OK for local development
+# For production, generate new keys: https://supabase.com/docs/guides/self-hosting#api-keys
+ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 
-# Supabase Service Role Key (SECRET - server-side only, never expose to frontend)
+SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
-SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
 
-# JWT Secret (for Supabase Auth)
+# Nuxt App Configuration (also copy to app/.env)
-SUPABASE_JWT_SECRET=your-jwt-secret-here
+NUXT_PUBLIC_SUPABASE_URL=http://localhost:54321
-
+NUXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
-# Database Password (for direct PostgreSQL access if needed)
-POSTGRES_PASSWORD=your-postgres-password-here
-
-# ==============================================
-# Application Configuration
-# ==============================================
-
-# Public app URL (where the Nuxt app is hosted)
-PUBLIC_APP_URL=http://localhost:3000
-
-# Node environment
-NODE_ENV=development
-
-# ==============================================
-# External APIs
-# ==============================================
-
-# Open Food Facts API (no auth required)
-OPENFOODFACTS_API_URL=https://world.openfoodfacts.org
-
-# ==============================================
-# Optional: Auth Providers (OIDC)
-# ==============================================
-
-# Google OAuth (optional - configure in Supabase if needed)
-AUTH_GOOGLE_ENABLED=false
-AUTH_GOOGLE_CLIENT_ID=
-AUTH_GOOGLE_SECRET=
-
-# Authentik (optional)
-AUTH_AUTHENTIK_ENABLED=false
-AUTH_AUTHENTIK_URL=
-AUTH_AUTHENTIK_CLIENT_ID=
-AUTH_AUTHENTIK_SECRET=

.env.example.bak

@@ -0,0 +1,54 @@
+# Pantry - Environment Variables Template
+# Copy to .env.development for local development
+# Copy to .env.production for production deployment
+
+# ==============================================
+# Supabase Configuration
+# ==============================================
+
+# Supabase API URL (from Coolify service)
+SUPABASE_URL=https://your-supabase-instance.example.com
+
+# Supabase Anon Key (public, safe to expose to frontend)
+SUPABASE_ANON_KEY=your-anon-key-here
+
+# Supabase Service Role Key (SECRET - server-side only, never expose to frontend)
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
+
+# JWT Secret (for Supabase Auth)
+SUPABASE_JWT_SECRET=your-jwt-secret-here
+
+# Database Password (for direct PostgreSQL access if needed)
+POSTGRES_PASSWORD=your-postgres-password-here
+
+# ==============================================
+# Application Configuration
+# ==============================================
+
+# Public app URL (where the Nuxt app is hosted)
+PUBLIC_APP_URL=http://localhost:3000
+
+# Node environment
+NODE_ENV=development
+
+# ==============================================
+# External APIs
+# ==============================================
+
+# Open Food Facts API (no auth required)
+OPENFOODFACTS_API_URL=https://world.openfoodfacts.org
+
+# ==============================================
+# Optional: Auth Providers (OIDC)
+# ==============================================
+
+# Google OAuth (optional - configure in Supabase if needed)
+AUTH_GOOGLE_ENABLED=false
+AUTH_GOOGLE_CLIENT_ID=
+AUTH_GOOGLE_SECRET=
+
+# Authentik (optional)
+AUTH_AUTHENTIK_ENABLED=false
+AUTH_AUTHENTIK_URL=
+AUTH_AUTHENTIK_CLIENT_ID=
+AUTH_AUTHENTIK_SECRET=

.env.production.example

@@ -0,0 +1,12 @@
+# Production Environment Variables
+# Copy this file to .env.production and fill in your values
+
+# Supabase Configuration (REQUIRED)
+# Get these from your Supabase project settings
+NUXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
+NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+
+# Server Configuration (optional)
+# HOST=0.0.0.0
+# PORT=3000
+# NODE_ENV=production

DEPLOYMENT.md

@@ -0,0 +1,347 @@
+# Deployment Guide
+
+## Prerequisites
+
+- Supabase project (managed or self-hosted)
+- Docker and Docker Compose installed
+- Domain name (optional, for production)
+- SSL certificate (for HTTPS, recommended)
+
+## Quick Start (Docker Compose)
+
+### 1. Clone the repository
+
+```bash
+git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
+cd pantry
+```
+
+### 2. Configure environment
+
+```bash
+cp .env.production.example .env.production
+# Edit .env.production with your Supabase credentials
+nano .env.production
+```
+
+Required environment variables:
+- `NUXT_PUBLIC_SUPABASE_URL` - Your Supabase project URL
+- `NUXT_PUBLIC_SUPABASE_ANON_KEY` - Your Supabase anonymous key
+
+### 3. Build and run
+
+```bash
+docker-compose -f docker-compose.prod.yml --env-file .env.production up -d
+```
+
+The app will be available at `http://localhost:3000`
+
+### 4. Verify deployment
+
+```bash
+# Check health
+curl http://localhost:3000/api/health
+
+# View logs
+docker-compose -f docker-compose.prod.yml logs -f app
+
+# Check status
+docker-compose -f docker-compose.prod.yml ps
+```
+
+## Supabase Setup
+
+### Option 1: Supabase Cloud (Recommended)
+
+1. Create a free account at [supabase.com](https://supabase.com)
+2. Create a new project
+3. Run migrations: `supabase/migrations/*.sql`
+4. Copy project URL and anon key to `.env.production`
+
+### Option 2: Self-Hosted Supabase
+
+Use the included `docker-compose.yml` for local Supabase:
+
+```bash
+# Create .env file
+cp .env.example .env
+# Edit .env with secure passwords
+nano .env
+
+# Start Supabase stack
+docker-compose up -d
+
+# Wait for services to be ready
+docker-compose ps
+
+# Run migrations
+docker-compose exec db psql -U postgres -f /docker-entrypoint-initdb.d/001_initial_schema.sql
+```
+
+Supabase will be available at:
+- API: http://localhost:54321
+- Studio: http://localhost:54323
+
+## Production Deployment Options
+
+### Option 1: Coolify (Recommended)
+
+1. Add new Resource → Docker Compose
+2. Paste `docker-compose.prod.yml`
+3. Add environment variables in Coolify UI
+4. Deploy
+
+### Option 2: Docker Standalone
+
+```bash
+# Build image
+docker build -t pantry:latest .
+
+# Run container
+docker run -d \
+  --name pantry \
+  -p 3000:3000 \
+  -e NUXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co \
+  -e NUXT_PUBLIC_SUPABASE_ANON_KEY=your-key \
+  --restart unless-stopped \
+  pantry:latest
+```
+
+### Option 3: Kubernetes
+
+Example deployment manifest:
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: pantry
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: pantry
+  template:
+    metadata:
+      labels:
+        app: pantry
+    spec:
+      containers:
+      - name: pantry
+        image: pantry:latest
+        ports:
+        - containerPort: 3000
+        env:
+        - name: NUXT_PUBLIC_SUPABASE_URL
+          valueFrom:
+            secretKeyRef:
+              name: pantry-secrets
+              key: supabase-url
+        - name: NUXT_PUBLIC_SUPABASE_ANON_KEY
+          valueFrom:
+            secretKeyRef:
+              name: pantry-secrets
+              key: supabase-key
+        livenessProbe:
+          httpGet:
+            path: /api/health
+            port: 3000
+          initialDelaySeconds: 40
+          periodSeconds: 30
+        resources:
+          limits:
+            memory: "512Mi"
+            cpu: "1000m"
+          requests:
+            memory: "256Mi"
+            cpu: "500m"
+```
+
+### Option 4: VPS with Nginx
+
+```nginx
+# /etc/nginx/sites-available/pantry
+server {
+    listen 80;
+    server_name pantry.yourdomain.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+## HTTPS/SSL
+
+### Using Let's Encrypt (Certbot)
+
+```bash
+# Install Certbot
+sudo apt install certbot python3-certbot-nginx
+
+# Get certificate
+sudo certbot --nginx -d pantry.yourdomain.com
+
+# Auto-renewal
+sudo certbot renew --dry-run
+```
+
+### Using Cloudflare
+
+1. Add your domain to Cloudflare
+2. Enable "Full (strict)" SSL/TLS mode
+3. Point DNS A record to your server IP
+4. Cloudflare handles SSL automatically
+
+## Monitoring
+
+### Health Checks
+
+```bash
+# Manual check
+curl http://localhost:3000/api/health
+
+# With watch
+watch -n 5 'curl -s http://localhost:3000/api/health | jq'
+```
+
+### Docker Stats
+
+```bash
+docker stats pantry-app
+```
+
+### Logs
+
+```bash
+# Follow logs
+docker-compose -f docker-compose.prod.yml logs -f
+
+# Last 100 lines
+docker logs --tail 100 pantry-app
+
+# Since timestamp
+docker logs --since "2024-01-01T00:00:00" pantry-app
+```
+
+## Updating
+
+### Pull latest changes
+
+```bash
+cd pantry
+git pull origin main
+
+# Rebuild and restart
+docker-compose -f docker-compose.prod.yml build
+docker-compose -f docker-compose.prod.yml up -d
+```
+
+### Rolling back
+
+```bash
+# Tag before upgrading
+docker tag pantry:latest pantry:backup-20240101
+
+# Rollback if needed
+docker-compose -f docker-compose.prod.yml down
+docker tag pantry:backup-20240101 pantry:latest
+docker-compose -f docker-compose.prod.yml up -d
+```
+
+## Backup
+
+### Database (Supabase)
+
+```bash
+# Manual backup
+pg_dump -h localhost -U postgres -d postgres > backup.sql
+
+# Restore
+psql -h localhost -U postgres -d postgres < backup.sql
+```
+
+### Docker Volumes
+
+```bash
+# Backup
+docker run --rm -v pantry_db-data:/data -v $(pwd):/backup ubuntu tar czf /backup/db-backup.tar.gz /data
+
+# Restore
+docker run --rm -v pantry_db-data:/data -v $(pwd):/backup ubuntu tar xzf /backup/db-backup.tar.gz -C /
+```
+
+## Troubleshooting
+
+### Container won't start
+
+```bash
+# Check logs
+docker logs pantry-app
+
+# Verify environment variables
+docker exec pantry-app env | grep NUXT
+
+# Inspect container
+docker inspect pantry-app
+```
+
+### Supabase connection issues
+
+1. Verify Supabase URL and key
+2. Check network connectivity
+3. Verify RLS policies in Supabase
+4. Check CORS settings
+
+### Performance issues
+
+1. Check resource limits
+2. Monitor with `docker stats`
+3. Increase memory/CPU limits in docker-compose
+4. Enable compression in Nginx
+
+### PWA not updating
+
+1. Clear browser cache
+2. Unregister service worker
+3. Check that service worker is being served with correct headers
+4. Verify manifest.json is accessible
+
+## Security Checklist
+
+- [ ] Use HTTPS (SSL certificate)
+- [ ] Set secure environment variables
+- [ ] Don't commit .env files
+- [ ] Use strong Supabase passwords
+- [ ] Enable RLS policies in Supabase
+- [ ] Keep Docker images updated
+- [ ] Use firewall rules
+- [ ] Regular backups
+- [ ] Monitor logs for suspicious activity
+
+## Performance Optimization
+
+- Enable CDN (Cloudflare)
+- Use HTTP/2
+- Enable gzip/brotli compression
+- Set proper cache headers
+- Optimize images
+- Use Supabase CDN for assets
+
+## Support
+
+- Documentation: [docs/](docs/)
+- Issues: [Gitea Issues](https://gitea.jeanlucmakiola.de/pantry-app/pantry/issues)
+- Wiki: Coming soon
+
+---
+
+**Happy hosting! 🚀**

Dockerfile

@@ -0,0 +1,59 @@
+# Pantry Production Dockerfile
+# Multi-stage build for optimized production image
+
+# Stage 1: Build the Nuxt application
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY app/package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production && \
+    npm cache clean --force
+
+# Copy application source
+COPY app/ ./
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Production runtime
+FROM node:20-alpine AS runner
+
+# Install dumb-init for proper signal handling
+RUN apk add --no-cache dumb-init
+
+# Create app user
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# Set working directory
+WORKDIR /app
+
+# Copy built application from builder
+COPY --from=builder --chown=nodejs:nodejs /app/.output /app/.output
+COPY --from=builder --chown=nodejs:nodejs /app/package*.json ./
+
+# Switch to non-root user
+USER nodejs
+
+# Expose port
+EXPOSE 3000
+
+# Set environment variables
+ENV NODE_ENV=production \
+    HOST=0.0.0.0 \
+    PORT=3000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=40s --retries=3 \
+    CMD node -e "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
+
+# Use dumb-init to handle signals properly
+ENTRYPOINT ["dumb-init", "--"]
+
+# Start the application
+CMD ["node", ".output/server/index.mjs"]

README.md

@@ -22,26 +22,37 @@ A simple, modern kitchen inventory app that the whole family can actually use. B
 - 🔒 **Self-hosted** — Your data stays yours
 - 🌐 **Open Food Facts** — Auto-fill product data from barcodes
 
-## 🚀 Quick Start
+## 🚀 Quick Start (Local Development)
 
 ```bash
-# Clone
+# Clone repository
 git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
+cd pantry
 
-# Start services (Docker Compose)
+# One-command startup
-docker-compose up -d
+./dev.sh
-
-# Access at http://localhost:3000
 ```
 
+**What this does:**
+1. Starts Supabase (PostgreSQL + API + Auth + Studio)
+2. Installs frontend dependencies
+3. Launches Nuxt dev server
+
+**Access:**
+- App: `http://localhost:3000`
+- Supabase Studio: `http://localhost:54323`
+
+**See [DEV_SETUP.md](DEV_SETUP.md) for detailed setup guide.**
+
 ## 📚 Documentation
 
-- [**Project Plan**](docs/PROJECT_PLAN.md) — Vision, roadmap, phases
+- **[Getting Started](docs/development/getting-started.md)** — First-time setup (5 minutes)
-- [**Architecture**](docs/ARCHITECTURE.md) — Tech stack, data model, design decisions
+- **[Local Setup Guide](docs/development/local-setup.md)** — Detailed Docker Compose setup
-- [**Database Schema**](docs/DATABASE.md) — Tables, relationships, RLS policies
+- **[Project Plan](docs/PROJECT_PLAN.md)** — Vision, roadmap, MVP phases
-- [**API Reference**](docs/API.md) — Endpoints, Supabase functions
+- **[Architecture](docs/architecture/overview.md)** — Tech stack, design decisions
-- [**Development Guide**](docs/DEVELOPMENT.md) — Setup, workflow, conventions
+- **[Database Schema](docs/architecture/database.md)** — Tables, RLS policies, migrations
-- [**Deployment**](docs/DEPLOYMENT.md) — Docker, Coolify, production setup
+- **[Development Workflow](docs/development/workflow.md)** — Git flow, conventions
+- **[Full Documentation Index](docs/README.md)** — Complete docs navigation
 
 ## 🛠️ Tech Stack
 
@@ -73,18 +84,32 @@ pantry/
 3. **Extendable** — Clean architecture for future features
 4. **Self-hosted first** — No SaaS plans, no lock-in
 
-## 📋 MVP Status
+## 📋 MVP Status (14/34 Complete - 41.2%)
 
-**Target:** v0.1 (6-week sprint)
+**Current Phase:** Week 2 ✅ Complete, Week 3 🔄 In Progress
+
+✅ **Week 1 - Foundation (6/6)**
+- Database schema + RLS policies
+- Nuxt 4 app scaffold
+- Supabase integration
+- App layout
+
+✅ **Week 2 - Core Inventory (8/8)**
+- SQL helper functions
+- Seed data (units + tags)
+- Inventory CRUD UI
+- Add/Edit/Delete components
+
+🔄 **Week 3 - Barcode Scanning (1/5)**
+- BarcodeScanner component
+- html5-qrcode integration
+- Product lookup (pending)
+- Scan-to-add flow (pending)
+
+⏸️ **Week 4-6** - Tag UI, PWA, Deployment (20 issues)
 
 See [PROJECT_PLAN.md](docs/PROJECT_PLAN.md) for detailed roadmap.
 
-- [ ] Foundation (Nuxt + Supabase + Auth)
-- [ ] Core inventory (CRUD, tags, units)
-- [ ] Barcode scanning (PWA camera + Open Food Facts)
-- [ ] Mobile polish (PWA, offline)
-- [ ] Docker deployment
-
 ## 🤝 Contributing
 
 This is an early-stage project. Contributions welcome once v0.1 ships.

SETUP.md

@@ -1,214 +0,0 @@
-# Pantry - Setup Guide
-
-## ✅ Current Status
-
-### Infrastructure (Complete)
-
-- **Supabase Dev Instance**: Running on Coolify
-  - URL: `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de`
-  - Status: ✅ Healthy
-  - Services: PostgreSQL, Auth (GoTrue), Realtime, Storage, PostgREST
-  
-### Environment Configuration (Complete)
-
-- `.env.example` - Template for all environments
-- `.env.development` - Dev credentials (Coolify Supabase)
-- `.gitignore` - Protects secrets
-
----
-
-## 🚀 Quick Start (Development)
-
-### Prerequisites
-
-- **Bun** 1.0+ (or Node.js 20+)
-- **Git** access to repository
-- **Access to Coolify** Supabase instance (credentials in `.env.development`)
-
-### Setup Steps
-
-1. **Clone Repository**
-   ```bash
-   git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
-   cd pantry
-   ```
-
-2. **Copy Development Environment**
-   ```bash
-   cp .env.development .env
-   ```
-
-3. **Install Dependencies** (once `app/` exists)
-   ```bash
-   cd app
-   bun install
-   ```
-
-4. **Apply Database Migrations** (once created)
-   ```bash
-   cd supabase
-   # TBD: Migration command
-   ```
-
-5. **Start Development Server**
-   ```bash
-   cd app
-   bun run dev
-   ```
-
-6. **Access App**
-   - App: `http://localhost:3000`
-   - Supabase API: `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de`
-
----
-
-## 🗄️ Supabase Instance Details
-
-### Endpoints
-
-| Service | URL |
-|---------|-----|
-| API (PostgREST) | `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de/rest/v1/` |
-| Auth | `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de/auth/v1/` |
-| Realtime | `wss://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de/realtime/v1/` |
-| Storage | `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de/storage/v1/` |
-
-### Credentials
-
-**Public (safe to use in frontend):**
-- Anon Key: In `.env.development`
-
-**Secret (server-side only):**
-- Service Role Key: In `.env.development`
-- JWT Secret: In `.env.development`
-- Postgres Password: In `.env.development`
-
-### Dashboard Access
-
-**Supabase Studio:**
-- URL: `https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de` (check Coolify for Studio port/subdomain)
-- Username: `wJZbjs3Yd5P63cs9`
-- Password: `Qv3byDujNzYe8r7YRxhNwh3DPTvZBWtN`
-
-**Direct PostgreSQL Access** (for migrations/debugging):
-- Host: `supabase-db` (or Coolify service FQDN)
-- Database: `postgres`
-- User: `postgres`
-- Password: `55P0NVRUltRqzZYksuXTFli5iXwbQvgu`
-- Port: `5432`
-
-**MinIO (Storage):**
-- Admin User: `EaTXrXvjo1R4hsaI`
-- Admin Password: `gCZOphxAExNC17GYFwtw60WzTU0P8HW8`
-
----
-
-## 📋 Next Steps
-
-### Week 1: Foundation (In Progress)
-
-- [x] ~~Supabase dev environment setup~~ (Complete)
-- [x] ~~Environment configuration~~ (Complete)
-- [ ] Create database schema (`supabase/migrations/`)
-- [ ] Scaffold Nuxt 4 app (`app/`)
-- [ ] Implement email/password auth
-- [ ] Deploy first version to Coolify
-
-### Immediate Tasks
-
-1. **Database Schema** (#10)
-   - Create migration files in `supabase/migrations/`
-   - Tables: `inventory_items`, `products`, `tags`, `item_tags`, `units`
-   - See: `docs/DATABASE.md`
-
-2. **Nuxt Scaffold** (#8)
-   - Initialize Nuxt 4 project in `app/`
-   - Install dependencies: `@nuxtjs/supabase`, `@nuxt/ui`, Tailwind
-   - Configure `nuxt.config.ts`
-
-3. **Auth Implementation** (#11)
-   - Supabase Auth integration
-   - Login/signup pages
-   - Protected routes
-
----
-
-## 🔧 Development Workflow
-
-### Making Changes
-
-```bash
-# 1. Create feature branch
-git checkout -b feature/your-feature
-
-# 2. Make changes
-# Edit files...
-
-# 3. Test locally
-bun run dev
-
-# 4. Commit and push
-git add .
-git commit -m "feat: Your feature description"
-git push origin feature/your-feature
-
-# 5. Create PR on Gitea
-```
-
-### Database Migrations
-
-```bash
-# Create new migration
-cd supabase/migrations
-touch 001_initial_schema.sql
-
-# Edit migration file (SQL)
-# Test locally against Coolify Supabase instance
-
-# Apply migration (TBD - once we set up migration tooling)
-```
-
----
-
-## 🚨 Troubleshooting
-
-### Can't connect to Supabase
-
-**Test connection:**
-```bash
-curl -s "https://supabasekong-ewo8wssk4gs8cgg0c8kosk40.jeanlucmakiola.de/rest/v1/" \
-  -H "apikey: <ANON_KEY>"
-```
-
-Should return OpenAPI spec. If not:
-- Check Coolify service status
-- Verify URL in `.env`
-- Check network/firewall
-
-### Environment variables not loading
-
-- Ensure `.env` exists in project root
-- Check `.env` has no syntax errors
-- Restart dev server after changes
-
-### Database migration issues
-
-- Verify `SUPABASE_SERVICE_ROLE_KEY` is set
-- Check migration SQL syntax
-- Review Supabase logs in Coolify
-
----
-
-## 📚 Documentation
-
-- [Project Plan](docs/PROJECT_PLAN.md) - Vision, roadmap
-- [Architecture](docs/ARCHITECTURE.md) - Tech stack, design
-- [Database Schema](docs/DATABASE.md) - Tables, RLS, functions
-- [API Reference](docs/API.md) - Endpoints, usage
-- [Development Guide](docs/DEVELOPMENT.md) - Conventions, workflow
-- [Deployment](docs/DEPLOYMENT.md) - Docker, Coolify
-
----
-
-**Last Updated:** 2026-02-08  
-**Status:** Week 1 - Foundation in progress

app/app/app.vue

@@ -1,5 +1,9 @@
 <template>
-  <NuxtLayout>
+  <div>
-    <NuxtPage />
+    <OfflineBanner />
-  </NuxtLayout>
+    <InstallPrompt />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
 </template>

app/bun.lock

@@ -8,6 +8,7 @@
         "@nuxt/fonts": "^0.13.0",
         "@nuxt/ui": "^4.4.0",
         "@supabase/supabase-js": "^2.95.3",
+        "html5-qrcode": "^2.3.8",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
         "vue-router": "^4.6.4",
@@ -1076,6 +1077,8 @@
 
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
+    "html5-qrcode": ["html5-qrcode@2.3.8", "", {}, "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="],
+
     "http-assert": ["http-assert@1.5.0", "", { "dependencies": { "deep-equal": "~1.0.1", "http-errors": "~1.8.0" } }, "sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w=="],
 
     "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],

app/components/InstallPrompt.vue

@@ -0,0 +1,104 @@
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-2"
+  >
+    <div
+      v-if="showPrompt"
+      class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-md z-50"
+    >
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 p-4">
+        <div class="flex items-start gap-4">
+          <!-- App Icon -->
+          <div class="flex-shrink-0">
+            <img 
+              src="/icon-192x192.png" 
+              alt="Pantry icon" 
+              class="w-16 h-16 rounded-lg shadow-md"
+            />
+          </div>
+          
+          <!-- Content -->
+          <div class="flex-1 min-w-0">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">
+              Install Pantry
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Install this app for quick access and offline use
+            </p>
+            
+            <!-- Actions -->
+            <div class="flex gap-2">
+              <UButton
+                color="emerald"
+                size="sm"
+                @click="install"
+                :loading="installing"
+              >
+                <template #leading>
+                  <UIcon name="i-heroicons-arrow-down-tray" />
+                </template>
+                Install
+              </UButton>
+              
+              <UButton
+                color="gray"
+                variant="ghost"
+                size="sm"
+                @click="dismiss"
+              >
+                Not now
+              </UButton>
+            </div>
+          </div>
+          
+          <!-- Close button -->
+          <button
+            @click="dismiss"
+            class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition"
+          >
+            <UIcon name="i-heroicons-x-mark" class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { canInstall, promptInstall, dismissInstall, shouldShowPrompt } = usePWAInstall()
+const installing = ref(false)
+const showPrompt = ref(false)
+
+// Show prompt after a delay if conditions are met
+onMounted(() => {
+  setTimeout(() => {
+    if (shouldShowPrompt()) {
+      showPrompt.value = true
+    }
+  }, 3000) // Wait 3 seconds after page load
+})
+
+async function install() {
+  installing.value = true
+  try {
+    const { outcome } = await promptInstall()
+    if (outcome === 'accepted') {
+      showPrompt.value = false
+    }
+  } catch (error) {
+    console.error('Install failed:', error)
+  } finally {
+    installing.value = false
+  }
+}
+
+function dismiss() {
+  dismissInstall()
+  showPrompt.value = false
+}
+</script>

app/components/OfflineBanner.vue

@@ -0,0 +1,58 @@
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="!isOnline"
+      class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi-slash" class="w-5 h-5" />
+        <span class="font-medium">
+          You're currently offline. Changes will sync when connection is restored.
+        </span>
+      </div>
+    </div>
+  </Transition>
+  
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-200"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+  >
+    <div
+      v-if="isOnline && wasOffline && showReconnected"
+      class="fixed top-0 left-0 right-0 z-50 bg-emerald-500 text-white px-4 py-2 text-center shadow-lg"
+    >
+      <div class="flex items-center justify-center gap-2">
+        <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
+        <span class="font-medium">
+          Back online! Syncing your changes...
+        </span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { isOnline, wasOffline } = useOnlineStatus()
+const showReconnected = ref(false)
+
+// Show "back online" message for 3 seconds
+watch(isOnline, (online) => {
+  if (online && wasOffline.value) {
+    showReconnected.value = true
+    setTimeout(() => {
+      showReconnected.value = false
+    }, 3000)
+  }
+})
+</script>

app/components/Settings/AppSettings.vue

@@ -0,0 +1,190 @@
+<template>
+  <UCard class="mt-4">
+    <div class="space-y-6">
+      <div>
+        <h3 class="text-lg font-semibold mb-4">App Installation</h3>
+        
+        <!-- Already installed -->
+        <div v-if="isInstalled" class="flex items-start gap-3 p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
+          <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-0.5" />
+          <div>
+            <p class="font-medium text-emerald-900 dark:text-emerald-100">
+              App is installed
+            </p>
+            <p class="text-sm text-emerald-700 dark:text-emerald-300 mt-1">
+              You're using Pantry as an installed app with offline support.
+            </p>
+          </div>
+        </div>
+
+        <!-- Can install -->
+        <div v-else-if="canInstall" class="space-y-3">
+          <p class="text-gray-600 dark:text-gray-400">
+            Install Pantry as an app for quick access and offline use.
+          </p>
+          <UButton
+            color="emerald"
+            size="lg"
+            @click="install"
+            :loading="installing"
+            block
+          >
+            <template #leading>
+              <UIcon name="i-heroicons-arrow-down-tray" />
+            </template>
+            Install App
+          </UButton>
+        </div>
+
+        <!-- Not supported or already running -->
+        <div v-else class="space-y-4">
+          <div v-if="isStandalone" class="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <UIcon name="i-heroicons-information-circle" class="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+            <div>
+              <p class="font-medium text-blue-900 dark:text-blue-100">
+                Running as standalone app
+              </p>
+              <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
+                You're already using Pantry in standalone mode.
+              </p>
+            </div>
+          </div>
+
+          <div v-else>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+              Installation is not available yet. Try one of these options:
+            </p>
+            
+            <!-- iOS Instructions -->
+            <UCard class="mb-4">
+              <div class="flex items-start gap-3">
+                <UIcon name="i-heroicons-device-phone-mobile" class="w-6 h-6 text-gray-400 flex-shrink-0 mt-0.5" />
+                <div class="flex-1">
+                  <h4 class="font-semibold mb-2">iOS (Safari)</h4>
+                  <ol class="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-decimal list-inside">
+                    <li>Tap the Share button</li>
+                    <li>Scroll down and tap "Add to Home Screen"</li>
+                    <li>Tap "Add" to confirm</li>
+                  </ol>
+                </div>
+              </div>
+            </UCard>
+
+            <!-- Android Instructions -->
+            <UCard>
+              <div class="flex items-start gap-3">
+                <UIcon name="i-heroicons-device-phone-mobile" class="w-6 h-6 text-gray-400 flex-shrink-0 mt-0.5" />
+                <div class="flex-1">
+                  <h4 class="font-semibold mb-2">Android (Chrome)</h4>
+                  <ol class="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-decimal list-inside">
+                    <li>Tap the menu (⋮) button</li>
+                    <li>Tap "Add to Home screen" or "Install app"</li>
+                    <li>Tap "Install" to confirm</li>
+                  </ol>
+                </div>
+              </div>
+            </UCard>
+          </div>
+        </div>
+      </div>
+
+      <!-- PWA Features -->
+      <div>
+        <h3 class="text-lg font-semibold mb-3">App Features</h3>
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Works offline with cached data</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Quick access from home screen</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Full-screen experience</span>
+          </div>
+          <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+            <UIcon name="i-heroicons-check" class="w-5 h-5 text-emerald-500" />
+            <span>Automatic updates</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Storage Info -->
+      <div v-if="storageInfo">
+        <h3 class="text-lg font-semibold mb-3">Storage Usage</h3>
+        <div class="space-y-2">
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-600 dark:text-gray-400">Used</span>
+            <span class="font-medium">{{ formatBytes(storageInfo.usage) }}</span>
+          </div>
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-600 dark:text-gray-400">Available</span>
+            <span class="font-medium">{{ formatBytes(storageInfo.quota) }}</span>
+          </div>
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div 
+              class="bg-emerald-500 h-2 rounded-full transition-all"
+              :style="{ width: storagePercent + '%' }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { canInstall, isInstalled, promptInstall } = usePWAInstall()
+const installing = ref(false)
+const storageInfo = ref<{ usage: number; quota: number } | null>(null)
+
+const isStandalone = computed(() => {
+  if (process.client) {
+    return window.matchMedia('(display-mode: standalone)').matches
+  }
+  return false
+})
+
+const storagePercent = computed(() => {
+  if (!storageInfo.value) return 0
+  return Math.round((storageInfo.value.usage / storageInfo.value.quota) * 100)
+})
+
+async function install() {
+  installing.value = true
+  try {
+    await promptInstall()
+  } catch (error) {
+    console.error('Install failed:', error)
+  } finally {
+    installing.value = false
+  }
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+}
+
+onMounted(async () => {
+  // Get storage info
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
+    try {
+      const estimate = await navigator.storage.estimate()
+      if (estimate.usage !== undefined && estimate.quota !== undefined) {
+        storageInfo.value = {
+          usage: estimate.usage,
+          quota: estimate.quota
+        }
+      }
+    } catch (error) {
+      console.error('Failed to get storage estimate:', error)
+    }
+  }
+})
+</script>

app/components/inventory/AddItemForm.vue

@@ -0,0 +1,231 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <h3 class="text-lg font-semibold">Add New Item</h3>
+        <UButton 
+          icon="i-heroicons-x-mark" 
+          color="gray" 
+          variant="ghost"
+          @click="$emit('close')"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- Item Name -->
+      <UFormGroup label="Item Name" required>
+        <UInput 
+          v-model="form.name"
+          placeholder="e.g. Whole Milk, Pasta, Tomatoes"
+          size="lg"
+          autofocus
+        />
+      </UFormGroup>
+
+      <!-- Quantity & Unit -->
+      <div class="grid grid-cols-2 gap-3">
+        <UFormGroup label="Quantity" required>
+          <UInput 
+            v-model.number="form.quantity"
+            type="number"
+            min="0.01"
+            step="0.01"
+            placeholder="1"
+            size="lg"
+          />
+        </UFormGroup>
+
+        <UFormGroup label="Unit" required>
+          <USelect 
+            v-model="form.unit_id"
+            :options="unitOptions"
+            option-attribute="label"
+            value-attribute="value"
+            placeholder="Select unit"
+            size="lg"
+          />
+        </UFormGroup>
+      </div>
+
+      <!-- Expiry Date -->
+      <UFormGroup label="Expiry Date" hint="Optional">
+        <UInput 
+          v-model="form.expiry_date"
+          type="date"
+          size="lg"
+        />
+      </UFormGroup>
+
+      <!-- Notes -->
+      <UFormGroup label="Notes" hint="Optional">
+        <UTextarea
+          v-model="form.notes"
+          placeholder="Any additional notes..."
+          :rows="2"
+        />
+      </UFormGroup>
+
+      <!-- Tags -->
+      <UFormGroup label="Tags" hint="Optional">
+        <TagsTagPicker v-model="selectedTags" />
+      </UFormGroup>
+
+      <!-- Submit -->
+      <div class="flex gap-2 pt-2">
+        <UButton 
+          type="submit"
+          color="primary"
+          size="lg"
+          class="flex-1"
+          :loading="submitting"
+          :disabled="!isValid"
+        >
+          Add Item
+        </UButton>
+        <UButton 
+          color="gray"
+          size="lg"
+          variant="soft"
+          @click="$emit('close')"
+        >
+          Cancel
+        </UButton>
+      </div>
+    </form>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { addInventoryItem, addItemTags } = useInventory()
+const { getUnits } = useUnits()
+
+const props = defineProps<{
+  initialData?: {
+    barcode?: string
+    name?: string
+    brand?: string
+    image_url?: string
+    quantity?: string
+  }
+}>()
+
+const emit = defineEmits<{
+  close: []
+  added: [item: any]
+}>()
+
+// Form state
+const form = reactive({
+  name: '',
+  quantity: 1,
+  unit_id: '',
+  expiry_date: '',
+  notes: ''
+})
+
+const submitting = ref(false)
+const selectedTags = ref<any[]>([])
+
+// Load units
+const units = ref<any[]>([])
+
+onMounted(async () => {
+  const unitsResult = await getUnits()
+  units.value = unitsResult.data || []
+
+  // Set default unit (Piece)
+  const defaultUnit = units.value.find(u => u.abbreviation === 'pc')
+  if (defaultUnit) {
+    form.unit_id = defaultUnit.id
+  }
+
+  // Pre-fill from initial data (scan-to-add flow)
+  if (props.initialData) {
+    if (props.initialData.name) {
+      form.name = props.initialData.name
+    }
+    
+    // Add brand to notes if available
+    if (props.initialData.brand) {
+      form.notes = `Brand: ${props.initialData.brand}`
+      
+      if (props.initialData.barcode) {
+        form.notes += `\nBarcode: ${props.initialData.barcode}`
+      }
+    } else if (props.initialData.barcode) {
+      form.notes = `Barcode: ${props.initialData.barcode}`
+    }
+
+    // Parse quantity if available (e.g., "750g")
+    if (props.initialData.quantity) {
+      const quantityMatch = props.initialData.quantity.match(/^([\d.]+)\s*([a-zA-Z]+)$/)
+      if (quantityMatch) {
+        form.quantity = parseFloat(quantityMatch[1])
+        // Try to match unit
+        const unitAbbr = quantityMatch[2].toLowerCase()
+        const matchedUnit = units.value.find(u => 
+          u.abbreviation.toLowerCase() === unitAbbr
+        )
+        if (matchedUnit) {
+          form.unit_id = matchedUnit.id
+        }
+      }
+    }
+  }
+})
+
+// Unit options for select
+const unitOptions = computed(() => {
+  const grouped: Record<string, any[]> = {}
+  
+  for (const unit of units.value) {
+    const type = unit.unit_type
+    if (!grouped[type]) grouped[type] = []
+    grouped[type].push({
+      label: `${unit.name} (${unit.abbreviation})`,
+      value: unit.id
+    })
+  }
+
+  return Object.entries(grouped).flatMap(([type, options]) => [
+    { label: `— ${type.charAt(0).toUpperCase() + type.slice(1)} —`, value: '', disabled: true },
+    ...options
+  ])
+})
+
+// Validation
+const isValid = computed(() => {
+  return form.name.trim().length > 0 && form.quantity > 0 && form.unit_id
+})
+
+// Submit
+const handleSubmit = async () => {
+  if (!isValid.value) return
+
+  submitting.value = true
+
+  const { data, error } = await addInventoryItem({
+    name: form.name.trim(),
+    quantity: form.quantity,
+    unit_id: form.unit_id,
+    expiry_date: form.expiry_date || null,
+    notes: form.notes.trim() || null
+  })
+
+  if (error) {
+    alert('Failed to add item: ' + error.message)
+    submitting.value = false
+    return
+  }
+
+  // Add tags if any selected
+  if (data && selectedTags.value.length > 0) {
+    const tagIds = selectedTags.value.map(t => t.id)
+    await addItemTags(data.id, tagIds)
+  }
+
+  emit('added', data)
+  submitting.value = false
+}
+</script>

app/components/inventory/EditItemModal.vue

@@ -0,0 +1,184 @@
+<template>
+  <UModal v-model="isOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">Edit Item</h3>
+          <UButton 
+            icon="i-heroicons-x-mark" 
+            color="gray" 
+            variant="ghost"
+            @click="close"
+          />
+        </div>
+      </template>
+
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <!-- Item Name -->
+        <UFormGroup label="Item Name" required>
+          <UInput 
+            v-model="form.name"
+            placeholder="Item name"
+            size="lg"
+          />
+        </UFormGroup>
+
+        <!-- Quantity & Unit -->
+        <div class="grid grid-cols-2 gap-3">
+          <UFormGroup label="Quantity" required>
+            <UInput 
+              v-model.number="form.quantity"
+              type="number"
+              min="0.01"
+              step="0.01"
+              size="lg"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Unit" required>
+            <USelect 
+              v-model="form.unit_id"
+              :options="unitOptions"
+              option-attribute="label"
+              value-attribute="value"
+              size="lg"
+            />
+          </UFormGroup>
+        </div>
+
+        <!-- Expiry Date -->
+        <UFormGroup label="Expiry Date" hint="Optional">
+          <UInput 
+            v-model="form.expiry_date"
+            type="date"
+            size="lg"
+          />
+        </UFormGroup>
+
+        <!-- Notes -->
+        <UFormGroup label="Notes" hint="Optional">
+          <UTextarea
+            v-model="form.notes"
+            placeholder="Any additional notes..."
+            :rows="2"
+          />
+        </UFormGroup>
+
+        <!-- Submit -->
+        <div class="flex gap-2 pt-2">
+          <UButton 
+            type="submit"
+            color="primary"
+            size="lg"
+            class="flex-1"
+            :loading="submitting"
+            :disabled="!isValid"
+          >
+            Save Changes
+          </UButton>
+          <UButton 
+            color="gray"
+            size="lg"
+            variant="soft"
+            @click="close"
+          >
+            Cancel
+          </UButton>
+        </div>
+      </form>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const { updateInventoryItem } = useInventory()
+const { getUnits } = useUnits()
+
+const props = defineProps<{
+  item: any | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  updated: [item: any]
+}>()
+
+const isOpen = ref(false)
+const submitting = ref(false)
+const units = ref<any[]>([])
+
+const form = reactive({
+  name: '',
+  quantity: 1,
+  unit_id: '',
+  expiry_date: '',
+  notes: ''
+})
+
+// Load units
+onMounted(async () => {
+  const { data } = await getUnits()
+  units.value = data || []
+})
+
+// Unit options for select
+const unitOptions = computed(() => {
+  return units.value.map(unit => ({
+    label: `${unit.name} (${unit.abbreviation})`,
+    value: unit.id
+  }))
+})
+
+// Watch for item changes (open modal)
+watch(() => props.item, (newItem) => {
+  if (newItem) {
+    form.name = newItem.name
+    form.quantity = Number(newItem.quantity)
+    form.unit_id = newItem.unit_id
+    form.expiry_date = newItem.expiry_date || ''
+    form.notes = newItem.notes || ''
+    isOpen.value = true
+  }
+}, { immediate: true })
+
+// Watch modal close
+watch(isOpen, (val) => {
+  if (!val) {
+    emit('close')
+  }
+})
+
+// Validation
+const isValid = computed(() => {
+  return form.name.trim().length > 0 && form.quantity > 0 && form.unit_id
+})
+
+const close = () => {
+  isOpen.value = false
+}
+
+// Submit
+const handleSubmit = async () => {
+  if (!isValid.value || !props.item) return
+
+  submitting.value = true
+
+  const { data, error } = await updateInventoryItem(props.item.id, {
+    name: form.name.trim(),
+    quantity: form.quantity,
+    unit_id: form.unit_id,
+    expiry_date: form.expiry_date || null,
+    notes: form.notes.trim() || null
+  })
+
+  if (error) {
+    alert('Failed to update item: ' + error.message)
+    submitting.value = false
+    return
+  }
+
+  emit('updated', data)
+  submitting.value = false
+  close()
+}
+</script>

app/components/inventory/InventoryCard.vue

@@ -0,0 +1,148 @@
+<template>
+  <UCard class="hover:shadow-lg transition-shadow">
+    <!-- Item Image -->
+    <div class="aspect-square bg-gray-100 rounded-lg mb-3 overflow-hidden">
+      <img 
+        v-if="item.product?.image_url" 
+        :src="item.product.image_url" 
+        :alt="item.name"
+        class="w-full h-full object-cover"
+      />
+      <div v-else class="w-full h-full flex items-center justify-center">
+        <UIcon name="i-heroicons-cube" class="w-16 h-16 text-gray-300" />
+      </div>
+    </div>
+
+    <!-- Item Info -->
+    <div class="space-y-2">
+      <div>
+        <h3 class="font-semibold text-gray-900 truncate">{{ item.name }}</h3>
+        <p v-if="item.product?.brand" class="text-sm text-gray-600 truncate">
+          {{ item.product.brand }}
+        </p>
+      </div>
+
+      <!-- Quantity -->
+      <div class="flex items-center justify-between">
+        <span class="text-lg font-medium text-gray-900">
+          {{ item.quantity }} {{ item.unit?.abbreviation }}
+        </span>
+
+        <!-- Quick Actions -->
+        <div class="flex gap-1">
+          <UButton 
+            icon="i-heroicons-minus"
+            size="xs"
+            color="gray"
+            variant="ghost"
+            @click="$emit('update-quantity', item.id, -1)"
+            :disabled="item.quantity <= 1"
+          />
+          <UButton 
+            icon="i-heroicons-plus"
+            size="xs"
+            color="gray"
+            variant="ghost"
+            @click="$emit('update-quantity', item.id, 1)"
+          />
+        </div>
+      </div>
+
+      <!-- Tags -->
+      <div v-if="item.tags && item.tags.length > 0" class="flex flex-wrap gap-1">
+        <TagsTagBadge
+          v-for="tagItem in item.tags.slice(0, 3)"
+          :key="tagItem.tag.id"
+          :tag="tagItem.tag"
+          size="sm"
+        />
+        <UBadge v-if="item.tags.length > 3" size="xs" color="gray">
+          +{{ item.tags.length - 3 }}
+        </UBadge>
+      </div>
+
+      <!-- Expiry Warning -->
+      <div v-if="daysUntilExpiry !== null" class="text-xs">
+        <UBadge 
+          :color="expiryColor"
+          variant="soft"
+          class="w-full justify-center"
+        >
+          <UIcon :name="expiryIcon" class="mr-1" />
+          {{ expiryText }}
+        </UBadge>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <template #footer>
+      <div class="flex gap-2">
+        <UButton 
+          icon="i-heroicons-pencil"
+          size="sm"
+          color="gray"
+          variant="soft"
+          class="flex-1"
+          @click="$emit('edit', item)"
+        >
+          Edit
+        </UButton>
+        <UButton 
+          icon="i-heroicons-trash"
+          size="sm"
+          color="red"
+          variant="soft"
+          @click="$emit('delete', item.id)"
+        >
+          Delete
+        </UButton>
+      </div>
+    </template>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  item: any
+}>()
+
+defineEmits<{
+  edit: [item: any]
+  delete: [id: string]
+  'update-quantity': [id: string, change: number]
+}>()
+
+// Calculate days until expiry
+const daysUntilExpiry = computed(() => {
+  if (!props.item.expiry_date) return null
+  
+  const today = new Date()
+  const expiry = new Date(props.item.expiry_date)
+  const diff = Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+  
+  return diff
+})
+
+// Expiry badge styling
+const expiryColor = computed(() => {
+  if (daysUntilExpiry.value === null) return 'gray'
+  if (daysUntilExpiry.value < 0) return 'red'
+  if (daysUntilExpiry.value <= 3) return 'orange'
+  if (daysUntilExpiry.value <= 7) return 'yellow'
+  return 'green'
+})
+
+const expiryIcon = computed(() => {
+  if (daysUntilExpiry.value === null) return 'i-heroicons-calendar'
+  if (daysUntilExpiry.value < 0) return 'i-heroicons-exclamation-triangle'
+  return 'i-heroicons-clock'
+})
+
+const expiryText = computed(() => {
+  if (daysUntilExpiry.value === null) return 'No expiry'
+  if (daysUntilExpiry.value < 0) return `Expired ${Math.abs(daysUntilExpiry.value)} days ago`
+  if (daysUntilExpiry.value === 0) return 'Expires today'
+  if (daysUntilExpiry.value === 1) return 'Expires tomorrow'
+  return `Expires in ${daysUntilExpiry.value} days`
+})
+</script>

app/components/inventory/InventoryList.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="space-y-4">
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-12">
+      <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 text-gray-400 animate-spin mx-auto mb-2" />
+      <p class="text-gray-600">Loading inventory...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="text-center py-12">
+      <UIcon name="i-heroicons-exclamation-triangle" class="w-12 h-12 text-red-500 mx-auto mb-4" />
+      <p class="text-red-600 mb-4">{{ error }}</p>
+      <UButton @click="loadInventory" color="gray">Retry</UButton>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!items || items.length === 0" class="text-center py-12">
+      <UIcon name="i-heroicons-inbox" class="w-16 h-16 text-gray-400 mx-auto mb-4" />
+      <h3 class="text-lg font-semibold text-gray-900 mb-2">
+        No items yet
+      </h3>
+      <p class="text-gray-600 mb-6">
+        Start by scanning a barcode or adding an item manually.
+      </p>
+      <div class="flex gap-2 justify-center">
+        <UButton 
+          to="/scan" 
+          color="primary"
+          icon="i-heroicons-qr-code"
+        >
+          Scan First Item
+        </UButton>
+        <UButton 
+          @click="$emit('add-item')"
+          color="white"
+          icon="i-heroicons-plus"
+        >
+          Add Manually
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Inventory Grid -->
+    <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <InventoryCard
+        v-for="item in filteredItems"
+        :key="item.id"
+        :item="item"
+        @edit="$emit('edit-item', item)"
+        @delete="handleDelete(item.id)"
+        @update-quantity="handleQuantityUpdate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { getInventory, deleteInventoryItem, updateQuantity } = useInventory()
+
+const props = defineProps<{
+  refresh?: boolean
+  tagFilters?: string[]
+}>()
+
+const emit = defineEmits<{
+  'add-item': []
+  'edit-item': [item: any]
+}>()
+
+const items = ref<any[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const loadInventory = async () => {
+  loading.value = true
+  error.value = null
+
+  const { data, error: fetchError } = await getInventory()
+
+  if (fetchError) {
+    error.value = 'Failed to load inventory. Please try again.'
+    loading.value = false
+    return
+  }
+
+  items.value = data || []
+  loading.value = false
+}
+
+// Computed filtered items
+const filteredItems = computed(() => {
+  if (!props.tagFilters || props.tagFilters.length === 0) {
+    return items.value
+  }
+
+  // Filter items that have at least one of the selected tags
+  return items.value.filter(item => {
+    if (!item.tags || item.tags.length === 0) return false
+    
+    const itemTagIds = item.tags.map((t: any) => t.tag.id)
+    return props.tagFilters!.some(filterId => itemTagIds.includes(filterId))
+  })
+})
+
+const handleDelete = async (id: string) => {
+  if (!confirm('Are you sure you want to delete this item?')) {
+    return
+  }
+
+  const { error: deleteError } = await deleteInventoryItem(id)
+
+  if (deleteError) {
+    alert('Failed to delete item')
+    return
+  }
+
+  // Remove from local list
+  items.value = items.value.filter(item => item.id !== id)
+}
+
+const handleQuantityUpdate = async (id: string, change: number) => {
+  const result = await updateQuantity(id, change)
+
+  if (result.error) {
+    alert('Failed to update quantity')
+    return
+  }
+
+  // Reload inventory after update
+  await loadInventory()
+}
+
+// Load on mount
+onMounted(loadInventory)
+
+// Watch for refresh prop
+watch(() => props.refresh, (newVal) => {
+  if (newVal) {
+    loadInventory()
+  }
+})
+
+// Expose reload method
+defineExpose({
+  reload: loadInventory
+})
+</script>

app/components/scan/BarcodeScanner.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="relative">
+    <!-- Scanner Container -->
+    <div 
+      :id="scannerId" 
+      ref="scannerRef"
+      class="w-full rounded-lg overflow-hidden bg-black"
+      :class="{ 'aspect-video': !isScanning, 'min-h-[300px]': isScanning }"
+    />
+
+    <!-- Overlay when not scanning -->
+    <div 
+      v-if="!isScanning && !error" 
+      class="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-lg"
+    >
+      <div class="text-center">
+        <UIcon name="i-heroicons-camera" class="w-16 h-16 text-gray-400 mb-4" />
+        <UButton 
+          color="primary" 
+          size="lg"
+          icon="i-heroicons-qr-code"
+          @click="startScanning"
+        >
+          Start Camera
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Error State -->
+    <div 
+      v-if="error" 
+      class="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-lg"
+    >
+      <div class="text-center px-4">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-12 h-12 text-red-400 mb-4" />
+        <p class="text-white mb-4">{{ error }}</p>
+        <div class="flex gap-2 justify-center">
+          <UButton @click="startScanning" color="primary">Try Again</UButton>
+          <UButton @click="$emit('manual-entry')" color="gray">Enter Manually</UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Manual Barcode Entry -->
+    <div class="mt-4">
+      <UFormGroup label="Or enter barcode manually">
+        <div class="flex gap-2">
+          <UInput 
+            v-model="manualBarcode"
+            placeholder="e.g. 8000500310427"
+            size="lg"
+            class="flex-1"
+            @keyup.enter="submitManualBarcode"
+          />
+          <UButton 
+            color="primary"
+            size="lg"
+            :disabled="!manualBarcode.trim()"
+            @click="submitManualBarcode"
+          >
+            Lookup
+          </UButton>
+        </div>
+      </UFormGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode'
+
+const emit = defineEmits<{
+  'barcode-detected': [barcode: string]
+  'manual-entry': []
+}>()
+
+const scannerId = 'barcode-scanner'
+const scannerRef = ref<HTMLElement | null>(null)
+const isScanning = ref(false)
+const error = ref<string | null>(null)
+const manualBarcode = ref('')
+
+let html5QrCode: Html5Qrcode | null = null
+
+const startScanning = async () => {
+  error.value = null
+
+  try {
+    if (!html5QrCode) {
+      html5QrCode = new Html5Qrcode(scannerId, {
+        formatsToSupport: [
+          Html5QrcodeSupportedFormats.EAN_13,
+          Html5QrcodeSupportedFormats.EAN_8,
+          Html5QrcodeSupportedFormats.UPC_A,
+          Html5QrcodeSupportedFormats.UPC_E,
+          Html5QrcodeSupportedFormats.CODE_128,
+          Html5QrcodeSupportedFormats.CODE_39,
+          Html5QrcodeSupportedFormats.QR_CODE
+        ],
+        verbose: false
+      })
+    }
+
+    await html5QrCode.start(
+      { facingMode: 'environment' },
+      {
+        fps: 10,
+        qrbox: { width: 250, height: 150 },
+        aspectRatio: 1.777
+      },
+      onScanSuccess,
+      onScanFailure
+    )
+
+    isScanning.value = true
+  } catch (err: any) {
+    console.error('Scanner error:', err)
+    
+    if (err.toString().includes('NotAllowedError')) {
+      error.value = 'Camera permission denied. Please allow camera access and try again.'
+    } else if (err.toString().includes('NotFoundError')) {
+      error.value = 'No camera found. Please use a device with a camera or enter the barcode manually.'
+    } else {
+      error.value = 'Could not start camera. Try entering the barcode manually.'
+    }
+  }
+}
+
+const stopScanning = async () => {
+  if (html5QrCode && isScanning.value) {
+    try {
+      await html5QrCode.stop()
+    } catch (err) {
+      console.error('Error stopping scanner:', err)
+    }
+    isScanning.value = false
+  }
+}
+
+const onScanSuccess = (decodedText: string) => {
+  // Stop scanning after successful read
+  stopScanning()
+  emit('barcode-detected', decodedText)
+}
+
+const onScanFailure = (_errorMessage: string) => {
+  // Ignore - this fires continuously when no barcode is detected
+}
+
+const submitManualBarcode = () => {
+  if (manualBarcode.value.trim()) {
+    emit('barcode-detected', manualBarcode.value.trim())
+    manualBarcode.value = ''
+  }
+}
+
+// Cleanup on unmount
+onUnmounted(() => {
+  stopScanning()
+})
+</script>

app/components/tags/TagBadge.vue

@@ -0,0 +1,71 @@
+<template>
+  <UBadge 
+    :style="badgeStyle"
+    :class="badgeClasses"
+    v-bind="$attrs"
+  >
+    <span v-if="tag.icon" class="mr-1">{{ tag.icon }}</span>
+    <span>{{ tag.name }}</span>
+    <UButton
+      v-if="removable"
+      icon="i-heroicons-x-mark"
+      size="2xs"
+      color="white"
+      variant="link"
+      class="ml-1 -mr-1"
+      @click.stop="$emit('remove', tag.id)"
+    />
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = withDefaults(defineProps<{
+  tag: Tag
+  removable?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}>(), {
+  removable: false,
+  size: 'md'
+})
+
+defineEmits<{
+  remove: [tagId: string]
+}>()
+
+const badgeStyle = computed(() => ({
+  backgroundColor: props.tag.color,
+  color: getContrastColor(props.tag.color)
+}))
+
+const badgeClasses = computed(() => ({
+  'cursor-pointer': props.removable,
+  'text-xs px-2 py-1': props.size === 'sm',
+  'text-sm px-2.5 py-1': props.size === 'md',
+  'text-base px-3 py-1.5': props.size === 'lg'
+}))
+
+// Calculate contrast color for text (black or white)
+function getContrastColor(hexColor: string): string {
+  // Remove # if present
+  const hex = hexColor.replace('#', '')
+  
+  // Convert to RGB
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  
+  // Return white for dark colors, black for light colors
+  return luminance > 0.5 ? '#000000' : '#FFFFFF'
+}
+</script>

app/components/tags/TagFilter.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <h4 class="text-sm font-semibold text-gray-700">Filter by Tags</h4>
+      <UButton
+        v-if="selectedTagIds.length > 0"
+        size="xs"
+        color="gray"
+        variant="ghost"
+        @click="clearFilters"
+      >
+        Clear
+      </UButton>
+    </div>
+
+    <!-- Selected Tags (active filters) -->
+    <div v-if="selectedTagIds.length > 0" class="flex flex-wrap gap-1">
+      <TagsTagBadge
+        v-for="tagId in selectedTagIds"
+        :key="tagId"
+        :tag="findTag(tagId)!"
+        size="sm"
+        removable
+        @remove="toggleTag"
+      />
+    </div>
+
+    <!-- Available Tags by Category -->
+    <div v-for="category in tagsByCategory" :key="category.name" class="space-y-2">
+      <p class="text-xs font-medium text-gray-500 uppercase">{{ category.name }}</p>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="tag in category.tags"
+          :key="tag.id"
+          size="xs"
+          :color="isSelected(tag.id) ? 'primary' : 'gray'"
+          :variant="isSelected(tag.id) ? 'solid' : 'soft'"
+          @click="toggleTag(tag.id)"
+        >
+          <span v-if="tag.icon">{{ tag.icon }}</span>
+          <span class="ml-1">{{ tag.name }}</span>
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-4">
+      <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-500"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = defineProps<{
+  modelValue: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [tagIds: string[]]
+}>()
+
+const { getTags } = useTags()
+
+const availableTags = ref<Tag[]>([])
+const loading = ref(true)
+
+// Load tags on mount
+onMounted(async () => {
+  const { data } = await getTags()
+  if (data) {
+    availableTags.value = data
+  }
+  loading.value = false
+})
+
+// Computed
+const selectedTagIds = computed(() => props.modelValue)
+
+const tagsByCategory = computed(() => {
+  const grouped: Record<string, Tag[]> = {}
+  
+  for (const tag of availableTags.value) {
+    if (!grouped[tag.category]) {
+      grouped[tag.category] = []
+    }
+    grouped[tag.category].push(tag)
+  }
+
+  return Object.entries(grouped).map(([name, tags]) => ({
+    name: name.charAt(0).toUpperCase() + name.slice(1),
+    tags: tags.sort((a, b) => a.name.localeCompare(b.name))
+  })).sort((a, b) => {
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+// Methods
+const isSelected = (tagId: string) => {
+  return selectedTagIds.value.includes(tagId)
+}
+
+const toggleTag = (tagId: string) => {
+  if (isSelected(tagId)) {
+    emit('update:modelValue', selectedTagIds.value.filter(id => id !== tagId))
+  } else {
+    emit('update:modelValue', [...selectedTagIds.value, tagId])
+  }
+}
+
+const clearFilters = () => {
+  emit('update:modelValue', [])
+}
+
+const findTag = (tagId: string) => {
+  return availableTags.value.find(t => t.id === tagId)
+}
+</script>

app/components/tags/TagManager.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="space-y-6">
+    <!-- Add New Tag Form -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-semibold">Create New Tag</h3>
+      </template>
+
+      <form @submit.prevent="handleCreate" class="space-y-4">
+        <div class="grid grid-cols-2 gap-3">
+          <UFormGroup label="Name" required>
+            <UInput 
+              v-model="newTag.name"
+              placeholder="e.g. Freezer, Vegan"
+              size="md"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Category" required>
+            <USelect
+              v-model="newTag.category"
+              :options="categoryOptions"
+              placeholder="Select category"
+              size="md"
+            />
+          </UFormGroup>
+        </div>
+
+        <div class="grid grid-cols-2 gap-3">
+          <UFormGroup label="Icon" hint="Single emoji">
+            <UInput 
+              v-model="newTag.icon"
+              placeholder="❄️"
+              maxlength="2"
+              size="md"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Color" required>
+            <div class="flex gap-2">
+              <UInput 
+                v-model="newTag.color"
+                type="color"
+                class="w-16"
+              />
+              <UInput 
+                v-model="newTag.color"
+                placeholder="#3B82F6"
+                class="flex-1"
+                size="md"
+              />
+            </div>
+          </UFormGroup>
+        </div>
+
+        <UButton 
+          type="submit"
+          color="primary"
+          :loading="creating"
+          :disabled="!isFormValid"
+        >
+          Create Tag
+        </UButton>
+      </form>
+    </UCard>
+
+    <!-- Existing Tags -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-semibold">Existing Tags</h3>
+      </template>
+
+      <div v-if="loading" class="text-center py-8">
+        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
+        <p class="text-gray-600 mt-2">Loading tags...</p>
+      </div>
+
+      <div v-else-if="tagsByCategory.length === 0" class="text-center py-8">
+        <p class="text-gray-500">No tags yet. Create your first tag above!</p>
+      </div>
+
+      <div v-else class="space-y-4">
+        <div v-for="category in tagsByCategory" :key="category.name">
+          <h4 class="text-sm font-semibold text-gray-600 uppercase mb-2">
+            {{ category.name }}
+          </h4>
+          <div class="space-y-2">
+            <div
+              v-for="tag in category.tags"
+              :key="tag.id"
+              class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100"
+            >
+              <div class="flex items-center gap-3">
+                <TagsTagBadge :tag="tag" size="md" />
+                <span class="text-sm text-gray-500">{{ tag.color }}</span>
+              </div>
+              
+              <UButton
+                icon="i-heroicons-trash"
+                color="red"
+                variant="ghost"
+                size="sm"
+                @click="handleDelete(tag.id, tag.name)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { getTags, createTag, deleteTag } = useTags()
+
+const tags = ref<any[]>([])
+const loading = ref(true)
+const creating = ref(false)
+
+const newTag = reactive({
+  name: '',
+  category: '',
+  icon: '',
+  color: '#3B82F6'
+})
+
+const categoryOptions = [
+  { label: 'Position', value: 'position' },
+  { label: 'Type', value: 'type' },
+  { label: 'Custom', value: 'custom' }
+]
+
+// Load tags on mount
+const loadTags = async () => {
+  loading.value = true
+  const { data } = await getTags()
+  if (data) {
+    tags.value = data
+  }
+  loading.value = false
+}
+
+onMounted(loadTags)
+
+// Computed
+const tagsByCategory = computed(() => {
+  const grouped: Record<string, any[]> = {}
+  
+  for (const tag of tags.value) {
+    if (!grouped[tag.category]) {
+      grouped[tag.category] = []
+    }
+    grouped[tag.category].push(tag)
+  }
+
+  return Object.entries(grouped).map(([name, tags]) => ({
+    name: name.charAt(0).toUpperCase() + name.slice(1),
+    tags: tags.sort((a, b) => a.name.localeCompare(b.name))
+  })).sort((a, b) => {
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+const isFormValid = computed(() => {
+  return newTag.name.trim() && newTag.category && newTag.color
+})
+
+// Methods
+const handleCreate = async () => {
+  if (!isFormValid.value) return
+
+  creating.value = true
+
+  const { data, error } = await createTag({
+    name: newTag.name.trim(),
+    category: newTag.category,
+    icon: newTag.icon.trim() || null,
+    color: newTag.color
+  })
+
+  if (error) {
+    alert('Failed to create tag: ' + error.message)
+  } else {
+    // Reset form
+    newTag.name = ''
+    newTag.category = ''
+    newTag.icon = ''
+    newTag.color = '#3B82F6'
+
+    // Reload tags
+    await loadTags()
+  }
+
+  creating.value = false
+}
+
+const handleDelete = async (tagId: string, tagName: string) => {
+  if (!confirm(`Delete tag "${tagName}"? This will remove it from all items.`)) {
+    return
+  }
+
+  const { error } = await deleteTag(tagId)
+
+  if (error) {
+    alert('Failed to delete tag: ' + error.message)
+  } else {
+    await loadTags()
+  }
+}
+</script>

app/components/tags/TagPicker.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="space-y-4">
+    <!-- Selected Tags -->
+    <div v-if="selectedTags.length > 0" class="flex flex-wrap gap-2">
+      <TagsTagBadge
+        v-for="tag in selectedTags"
+        :key="tag.id"
+        :tag="tag"
+        :removable="true"
+        @remove="removeTag"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="text-sm text-gray-500 italic">
+      No tags selected
+    </div>
+
+    <!-- Tag Selection by Category -->
+    <div v-for="category in tagsByCategory" :key="category.name" class="space-y-2">
+      <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+        {{ category.name }}
+      </h4>
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          v-for="tag in category.tags"
+          :key="tag.id"
+          size="sm"
+          :color="isSelected(tag.id) ? 'primary' : 'gray'"
+          :variant="isSelected(tag.id) ? 'solid' : 'outline'"
+          @click="toggleTag(tag)"
+        >
+          <span v-if="tag.icon" class="mr-1">{{ tag.icon }}</span>
+          {{ tag.name }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="text-center py-4">
+      <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"></div>
+      <p class="text-sm text-gray-500 mt-2">Loading tags...</p>
+    </div>
+
+    <!-- Empty State (no tags available) -->
+    <div v-if="!loading && availableTags.length === 0" class="text-center py-4">
+      <p class="text-gray-500">No tags available</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Tag {
+  id: string
+  name: string
+  color: string
+  icon?: string
+  category: string
+}
+
+const props = defineProps<{
+  modelValue: Tag[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [tags: Tag[]]
+}>()
+
+const { getTags } = useTags()
+
+const availableTags = ref<Tag[]>([])
+const loading = ref(true)
+
+// Load tags on mount
+onMounted(async () => {
+  const { data, error } = await getTags()
+  if (data) {
+    availableTags.value = data
+  }
+  loading.value = false
+})
+
+// Computed
+const selectedTags = computed(() => props.modelValue)
+
+const tagsByCategory = computed(() => {
+  const grouped: Record<string, Tag[]> = {}
+  
+  for (const tag of availableTags.value) {
+    if (!grouped[tag.category]) {
+      grouped[tag.category] = []
+    }
+    grouped[tag.category].push(tag)
+  }
+
+  return Object.entries(grouped).map(([name, tags]) => ({
+    name: name.charAt(0).toUpperCase() + name.slice(1),
+    tags: tags.sort((a, b) => a.name.localeCompare(b.name))
+  })).sort((a, b) => {
+    // Position category first, then others alphabetically
+    if (a.name === 'Position') return -1
+    if (b.name === 'Position') return 1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+// Methods
+const isSelected = (tagId: string) => {
+  return selectedTags.value.some(t => t.id === tagId)
+}
+
+const toggleTag = (tag: Tag) => {
+  const isCurrentlySelected = isSelected(tag.id)
+  
+  if (isCurrentlySelected) {
+    removeTag(tag.id)
+  } else {
+    emit('update:modelValue', [...selectedTags.value, tag])
+  }
+}
+
+const removeTag = (tagId: string) => {
+  emit('update:modelValue', selectedTags.value.filter(t => t.id !== tagId))
+}
+</script>

app/composables/useInventory.ts

@@ -0,0 +1,201 @@
+import type { Database } from '~/types/database.types'
+
+type InventoryItem = Database['public']['Tables']['inventory_items']['Row']
+type InventoryItemInsert = Database['public']['Tables']['inventory_items']['Insert']
+type InventoryItemUpdate = Database['public']['Tables']['inventory_items']['Update']
+
+export const useInventory = () => {
+  const supabase = useSupabase()
+  const { user } = useSupabaseAuth()
+
+  /**
+   * Get all inventory items with denormalized data
+   */
+  const getInventory = async () => {
+    const { data, error } = await supabase
+      .from('inventory_items')
+      .select(`
+        *,
+        product:products(*),
+        unit:units(*),
+        tags:item_tags(tag:tags(*))
+      `)
+      .order('created_at', { ascending: false })
+
+    if (error) {
+      console.error('Error fetching inventory:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Get single inventory item by ID
+   */
+  const getInventoryItem = async (id: string) => {
+    const { data, error } = await supabase
+      .from('inventory_items')
+      .select(`
+        *,
+        product:products(*),
+        unit:units(*),
+        tags:item_tags(tag:tags(*))
+      `)
+      .eq('id', id)
+      .single()
+
+    if (error) {
+      console.error('Error fetching item:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Add new inventory item
+   */
+  const addInventoryItem = async (item: Omit<InventoryItemInsert, 'added_by'>) => {
+    if (!user.value) {
+      return { data: null, error: { message: 'User not authenticated' } }
+    }
+
+    const { data, error } = await supabase
+      .from('inventory_items')
+      .insert({
+        ...item,
+        added_by: user.value.id
+      })
+      .select(`
+        *,
+        product:products(*),
+        unit:units(*),
+        tags:item_tags(tag:tags(*))
+      `)
+      .single()
+
+    if (error) {
+      console.error('Error adding item:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Update inventory item
+   */
+  const updateInventoryItem = async (id: string, updates: InventoryItemUpdate) => {
+    const { data, error } = await supabase
+      .from('inventory_items')
+      .update(updates)
+      .eq('id', id)
+      .select(`
+        *,
+        product:products(*),
+        unit:units(*),
+        tags:item_tags(tag:tags(*))
+      `)
+      .single()
+
+    if (error) {
+      console.error('Error updating item:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Delete inventory item
+   */
+  const deleteInventoryItem = async (id: string) => {
+    // First delete associated tags
+    await supabase
+      .from('item_tags')
+      .delete()
+      .eq('item_id', id)
+
+    const { error } = await supabase
+      .from('inventory_items')
+      .delete()
+      .eq('id', id)
+
+    if (error) {
+      console.error('Error deleting item:', error)
+      return { error }
+    }
+
+    return { error: null }
+  }
+
+  /**
+   * Update item quantity (consume or restock)
+   */
+  const updateQuantity = async (id: string, change: number) => {
+    const { data: item, error: fetchError } = await getInventoryItem(id)
+    if (fetchError || !item) {
+      return { data: null, error: fetchError }
+    }
+
+    const newQuantity = Number(item.quantity) + change
+
+    if (newQuantity <= 0) {
+      // Auto-delete when quantity reaches zero
+      return await deleteInventoryItem(id)
+    }
+
+    return await updateInventoryItem(id, { quantity: newQuantity })
+  }
+
+  /**
+   * Add tags to item
+   */
+  const addItemTags = async (itemId: string, tagIds: string[]) => {
+    const items = tagIds.map(tagId => ({
+      item_id: itemId,
+      tag_id: tagId
+    }))
+
+    const { error } = await supabase
+      .from('item_tags')
+      .insert(items)
+
+    if (error) {
+      console.error('Error adding tags:', error)
+      return { error }
+    }
+
+    return { error: null }
+  }
+
+  /**
+   * Remove tag from item
+   */
+  const removeItemTag = async (itemId: string, tagId: string) => {
+    const { error } = await supabase
+      .from('item_tags')
+      .delete()
+      .eq('item_id', itemId)
+      .eq('tag_id', tagId)
+
+    if (error) {
+      console.error('Error removing tag:', error)
+      return { error }
+    }
+
+    return { error: null }
+  }
+
+  return {
+    getInventory,
+    getInventoryItem,
+    addInventoryItem,
+    updateInventoryItem,
+    deleteInventoryItem,
+    updateQuantity,
+    addItemTags,
+    removeItemTag
+  }
+}

app/composables/useOnlineStatus.ts

@@ -0,0 +1,47 @@
+/**
+ * Composable to track online/offline status
+ * 
+ * Usage:
+ * const { isOnline, wasOffline } = useOnlineStatus()
+ * 
+ * watch(isOnline, (online) => {
+ *   if (online && wasOffline.value) {
+ *     // User came back online, sync data
+ *   }
+ * })
+ */
+export function useOnlineStatus() {
+  const isOnline = ref(true)
+  const wasOffline = ref(false)
+
+  if (process.client) {
+    // Initial state
+    isOnline.value = navigator.onLine
+
+    // Listen for online/offline events
+    const updateOnlineStatus = () => {
+      const online = navigator.onLine
+      
+      if (!online && isOnline.value) {
+        // Just went offline
+        wasOffline.value = true
+      }
+      
+      isOnline.value = online
+    }
+
+    window.addEventListener('online', updateOnlineStatus)
+    window.addEventListener('offline', updateOnlineStatus)
+
+    // Cleanup on unmount
+    onUnmounted(() => {
+      window.removeEventListener('online', updateOnlineStatus)
+      window.removeEventListener('offline', updateOnlineStatus)
+    })
+  }
+
+  return {
+    isOnline: readonly(isOnline),
+    wasOffline: readonly(wasOffline)
+  }
+}

app/composables/usePWAInstall.ts

@@ -0,0 +1,93 @@
+/**
+ * Composable to handle PWA installation
+ * 
+ * Usage:
+ * const { canInstall, isInstalled, promptInstall, dismissInstall } = usePWAInstall()
+ */
+export function usePWAInstall() {
+  const canInstall = ref(false)
+  const isInstalled = ref(false)
+  const deferredPrompt = ref<any>(null)
+
+  if (process.client) {
+    // Check if already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      isInstalled.value = true
+    }
+
+    // Listen for beforeinstallprompt event
+    window.addEventListener('beforeinstallprompt', (e) => {
+      // Prevent the mini-infobar from appearing on mobile
+      e.preventDefault()
+      
+      // Stash the event so it can be triggered later
+      deferredPrompt.value = e
+      canInstall.value = true
+    })
+
+    // Listen for appinstalled event
+    window.addEventListener('appinstalled', () => {
+      isInstalled.value = true
+      canInstall.value = false
+      deferredPrompt.value = null
+    })
+  }
+
+  async function promptInstall() {
+    if (!deferredPrompt.value) {
+      return { outcome: 'not-available' }
+    }
+
+    // Show the install prompt
+    deferredPrompt.value.prompt()
+
+    // Wait for the user to respond to the prompt
+    const { outcome } = await deferredPrompt.value.userChoice
+
+    // Clear the deferredPrompt
+    deferredPrompt.value = null
+    
+    if (outcome === 'accepted') {
+      canInstall.value = false
+    }
+
+    return { outcome }
+  }
+
+  function dismissInstall() {
+    canInstall.value = false
+    deferredPrompt.value = null
+    
+    // Remember dismissal for 7 days
+    if (process.client) {
+      localStorage.setItem('pwa-install-dismissed', Date.now().toString())
+    }
+  }
+
+  function shouldShowPrompt() {
+    if (!canInstall.value || isInstalled.value) {
+      return false
+    }
+
+    if (process.client) {
+      const dismissed = localStorage.getItem('pwa-install-dismissed')
+      if (dismissed) {
+        const dismissedTime = parseInt(dismissed)
+        const sevenDays = 7 * 24 * 60 * 60 * 1000
+        if (Date.now() - dismissedTime < sevenDays) {
+          return false
+        }
+      }
+    }
+
+    return true
+  }
+
+  return {
+    canInstall: readonly(canInstall),
+    isInstalled: readonly(isInstalled),
+    promptInstall,
+    dismissInstall,
+    shouldShowPrompt
+  }
+}

app/composables/useProductLookup.ts

@@ -0,0 +1,61 @@
+// Composable for product lookup via Edge Function
+
+export interface ProductData {
+  barcode: string
+  name: string
+  brand?: string
+  quantity?: string
+  image_url?: string
+  category?: string
+  cached?: boolean
+}
+
+export const useProductLookup = () => {
+  const supabase = useSupabaseClient()
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const lookupProduct = async (barcode: string): Promise<ProductData | null> => {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const { data, error: functionError } = await supabase.functions.invoke('product-lookup', {
+        body: { barcode }
+      })
+
+      if (functionError) {
+        console.error('Product lookup error:', functionError)
+        error.value = functionError.message || 'Failed to lookup product'
+        
+        // Return basic product data even on error
+        return {
+          barcode,
+          name: `Product ${barcode}`,
+          cached: false
+        }
+      }
+
+      return data as ProductData
+
+    } catch (err) {
+      console.error('Unexpected error during product lookup:', err)
+      error.value = err instanceof Error ? err.message : 'Unknown error'
+      
+      // Return basic product data even on error
+      return {
+        barcode,
+        name: `Product ${barcode}`,
+        cached: false
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return {
+    lookupProduct,
+    isLoading: readonly(isLoading),
+    error: readonly(error)
+  }
+}

app/composables/useTags.ts

@@ -0,0 +1,86 @@
+export const useTags = () => {
+  const supabase = useSupabase()
+
+  /**
+   * Get all tags
+   */
+  const getTags = async () => {
+    const { data, error } = await supabase
+      .from('tags')
+      .select('*')
+      .order('category', { ascending: true })
+      .order('name', { ascending: true })
+
+    if (error) {
+      console.error('Error fetching tags:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Get tags by category
+   */
+  const getTagsByCategory = async (category: 'position' | 'type' | 'dietary' | 'custom') => {
+    const { data, error } = await supabase
+      .from('tags')
+      .select('*')
+      .eq('category', category)
+      .order('name', { ascending: true })
+
+    if (error) {
+      console.error('Error fetching tags by category:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Create a new tag
+   */
+  const createTag = async (tag: {
+    name: string
+    category: string
+    icon?: string | null
+    color: string
+  }) => {
+    const { data, error } = await supabase
+      .from('tags')
+      .insert(tag)
+      .select()
+      .single()
+
+    if (error) {
+      console.error('Error creating tag:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Delete a tag
+   */
+  const deleteTag = async (tagId: string) => {
+    const { error } = await supabase
+      .from('tags')
+      .delete()
+      .eq('id', tagId)
+
+    if (error) {
+      console.error('Error deleting tag:', error)
+      return { error }
+    }
+
+    return { error: null }
+  }
+
+  return {
+    getTags,
+    getTagsByCategory,
+    createTag,
+    deleteTag
+  }
+}

app/composables/useUnits.ts

@@ -0,0 +1,53 @@
+export const useUnits = () => {
+  const supabase = useSupabase()
+
+  /**
+   * Get all units
+   */
+  const getUnits = async () => {
+    const { data, error } = await supabase
+      .from('units')
+      .select('*')
+      .order('unit_type', { ascending: true })
+      .order('name', { ascending: true })
+
+    if (error) {
+      console.error('Error fetching units:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Get default unit for a type
+   */
+  const getDefaultUnit = async (unitType: 'weight' | 'volume' | 'count' | 'custom') => {
+    const { data, error } = await supabase
+      .from('units')
+      .select('*')
+      .eq('unit_type', unitType)
+      .eq('is_default', true)
+      .single()
+
+    if (error) {
+      console.error('Error fetching default unit:', error)
+      return { data: null, error }
+    }
+
+    return { data, error: null }
+  }
+
+  /**
+   * Convert quantity between units
+   */
+  const convertUnit = (quantity: number, fromFactor: number, toFactor: number): number => {
+    return (quantity * fromFactor) / toFactor
+  }
+
+  return {
+    getUnits,
+    getDefaultUnit,
+    convertUnit
+  }
+}

app/nuxt.config.ts

@@ -5,7 +5,8 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxt/ui',
-    '@nuxt/fonts'
+    '@nuxt/fonts',
+    '@vite-pwa/nuxt'
   ],
 
   runtimeConfig: {
@@ -17,5 +18,166 @@ export default defineNuxtConfig({
 
   colorMode: {
     preference: 'light'
+  },
+
+  pwa: {
+    registerType: 'autoUpdate',
+    manifest: {
+      name: 'Pantry - Smart Inventory Manager',
+      short_name: 'Pantry',
+      description: 'Track your household pantry inventory with ease. Barcode scanning, smart organization, and multi-user support.',
+      theme_color: '#10b981',
+      background_color: '#ffffff',
+      display: 'standalone',
+      orientation: 'portrait',
+      scope: '/',
+      start_url: '/',
+      categories: ['productivity', 'lifestyle'],
+      icons: [
+        {
+          src: '/icon-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-192x192-maskable.png',
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'maskable'
+        },
+        {
+          src: '/icon-512x512-maskable.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable'
+        }
+      ],
+      screenshots: [
+        {
+          src: '/screenshot-mobile.png',
+          sizes: '390x844',
+          type: 'image/png',
+          form_factor: 'narrow',
+          label: 'Pantry inventory view on mobile'
+        },
+        {
+          src: '/screenshot-desktop.png',
+          sizes: '1920x1080',
+          type: 'image/png',
+          form_factor: 'wide',
+          label: 'Pantry inventory view on desktop'
+        }
+      ]
+    },
+    workbox: {
+      navigateFallback: '/offline',
+      navigateFallbackDenylist: [/^\/api\//],
+      globPatterns: ['**/*.{js,css,html,png,svg,ico,woff,woff2}'],
+      cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
+      runtimeCaching: [
+        // Supabase API - Network first with fallback
+        {
+          urlPattern: /^https:\/\/.*\.supabase\.co\/rest\/.*/i,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'supabase-rest-api',
+            networkTimeoutSeconds: 10,
+            expiration: {
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 // 1 hour
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Supabase Auth - Network only (don't cache auth)
+        {
+          urlPattern: /^https:\/\/.*\.supabase\.co\/auth\/.*/i,
+          handler: 'NetworkOnly'
+        },
+        // Supabase Storage - Cache first for images
+        {
+          urlPattern: /^https:\/\/.*\.supabase\.co\/storage\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'supabase-storage',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 7 // 1 week
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Open Food Facts API - Cache first with network fallback
+        {
+          urlPattern: /^https:\/\/world\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'openfoodfacts-api',
+            expiration: {
+              maxEntries: 200,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // External images - Cache first
+        {
+          urlPattern: /^https:\/\/images\.openfoodfacts\.org\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'product-images',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Google Fonts - Cache first
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-stylesheets',
+            expiration: {
+              maxEntries: 20,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
+        },
+        {
+          urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-webfonts',
+            expiration: {
+              maxEntries: 30,
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
+        }
+      ]
+    },
+    devOptions: {
+      enabled: true,
+      type: 'module'
+    }
   }
 })

app/package.json

@@ -7,17 +7,22 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "generate:icons": "node scripts/generate-icons.js && node scripts/generate-screenshots.js",
+    "verify:pwa": "node scripts/verify-pwa.js"
   },
   "dependencies": {
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/ui": "^4.4.0",
     "@supabase/supabase-js": "^2.95.3",
+    "html5-qrcode": "^2.3.8",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@vite-pwa/nuxt": "^1.1.1",
+    "sharp": "^0.34.5"
   }
 }

app/pages/index.vue

@@ -17,36 +17,53 @@
           color="white" 
           size="lg"
           icon="i-heroicons-plus"
+          @click="showAddForm = true"
         >
           Add Manually
         </UButton>
+
+        <UButton
+          color="gray"
+          size="lg"
+          icon="i-heroicons-funnel"
+          @click="showFilters = !showFilters"
+        >
+          Filter
+        </UButton>
       </div>
     </div>
 
-    <!-- Empty State -->
+    <!-- Tag Filters -->
-    <UCard v-if="true">
+    <UCard v-if="showFilters" class="mb-6">
-      <div class="text-center py-12">
+      <TagsTagFilter v-model="selectedTagFilters" />
-        <UIcon 
-          name="i-heroicons-inbox" 
-          class="w-16 h-16 text-gray-400 mx-auto mb-4"
-        />
-        <h3 class="text-lg font-semibold text-gray-900 mb-2">
-          No items yet
-        </h3>
-        <p class="text-gray-600 mb-6">
-          Start by scanning a barcode or adding an item manually.
-        </p>
-        <UButton 
-          to="/scan" 
-          color="primary"
-          icon="i-heroicons-qr-code"
-        >
-          Scan First Item
-        </UButton>
-      </div>
     </UCard>
 
-    <!-- TODO: Item list will go here -->
+    <!-- Add Item Form (Overlay) -->
+    <div v-if="showAddForm" class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-black/50">
+      <div class="w-full max-w-lg">
+        <AddItemForm 
+          :initial-data="prefilledData"
+          @close="handleCloseAddForm"
+          @added="handleItemAdded"
+        />
+      </div>
+    </div>
+
+    <!-- Edit Item Modal -->
+    <EditItemModal 
+      :item="editingItem"
+      @close="editingItem = null"
+      @updated="handleItemUpdated"
+    />
+
+    <!-- Inventory List -->
+    <InventoryList
+      ref="inventoryListRef"
+      :refresh="refreshKey"
+      :tag-filters="selectedTagFilters"
+      @add-item="showAddForm = true"
+      @edit-item="editingItem = $event"
+    />
   </div>
 </template>
 
@@ -54,4 +71,51 @@
 definePageMeta({
   layout: 'default'
 })
+
+const route = useRoute()
+const router = useRouter()
+
+const showAddForm = ref(false)
+const showFilters = ref(false)
+const editingItem = ref<any>(null)
+const refreshKey = ref(0)
+const inventoryListRef = ref()
+const prefilledData = ref<any>(null)
+const selectedTagFilters = ref<string[]>([])
+
+// Handle scan-to-add flow (Issue #25)
+onMounted(() => {
+  if (route.query.action === 'add') {
+    // Pre-fill data from query params (from scan)
+    prefilledData.value = {
+      barcode: route.query.barcode as string || undefined,
+      name: route.query.name as string || undefined,
+      brand: route.query.brand as string || undefined,
+      image_url: route.query.image_url as string || undefined,
+      quantity: route.query.quantity as string || undefined,
+    }
+    
+    showAddForm.value = true
+    
+    // Clean up URL
+    router.replace({ query: {} })
+  }
+})
+
+const handleCloseAddForm = () => {
+  showAddForm.value = false
+  prefilledData.value = null
+}
+
+const handleItemAdded = (item: any) => {
+  showAddForm.value = false
+  prefilledData.value = null
+  // Reload the inventory list
+  inventoryListRef.value?.reload()
+}
+
+const handleItemUpdated = (item: any) => {
+  editingItem.value = null
+  inventoryListRef.value?.reload()
+}
 </script>

app/pages/offline.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen p-8 text-center">
+    <UIcon name="i-heroicons-wifi-slash" class="w-24 h-24 text-gray-400 mb-6" />
+    
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">
+      You're Offline
+    </h1>
+    
+    <p class="text-gray-600 mb-8 max-w-md">
+      No internet connection detected. Some features may be limited, but you can still:
+    </p>
+    
+    <div class="space-y-3 mb-8 text-left max-w-md">
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">View cached inventory items</span>
+      </div>
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">Scan barcodes (will sync when online)</span>
+      </div>
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
+        <span class="text-gray-700">Browse previously loaded data</span>
+      </div>
+    </div>
+    
+    <UButton
+      color="emerald"
+      size="lg"
+      @click="retry"
+      :loading="retrying"
+    >
+      <template #leading>
+        <UIcon name="i-heroicons-arrow-path" />
+      </template>
+      Try Again
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const retrying = ref(false)
+
+async function retry() {
+  retrying.value = true
+  
+  try {
+    // Test if we're back online
+    const response = await fetch('/api/health', { method: 'HEAD' })
+    if (response.ok) {
+      // We're online! Go back
+      window.location.reload()
+    }
+  } catch (error) {
+    // Still offline
+    setTimeout(() => {
+      retrying.value = false
+    }, 1000)
+  }
+}
+
+// Auto-retry when online event fires
+if (typeof window !== 'undefined') {
+  window.addEventListener('online', () => {
+    window.location.reload()
+  })
+}
+</script>

app/pages/scan.vue

@@ -2,25 +2,64 @@
   <div>
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Scan Item</h1>
     
-    <UCard>
+    <UCard v-if="!scannedBarcode" class="mb-6">
-      <div class="text-center py-12">
+      <ScanBarcodeScanner 
-        <UIcon 
+        @barcode-detected="handleBarcodeDetected"
-          name="i-heroicons-qr-code" 
+        @manual-entry="showManualEntry = true"
-          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+      />
+    </UCard>
+
+    <!-- Product Lookup Result -->
+    <UCard v-if="productData" class="mb-6">
+      <div class="space-y-4">
+        <div class="flex items-start gap-4">
+          <img 
+            v-if="productData.image_url" 
+            :src="productData.image_url" 
+            :alt="productData.name"
+            class="w-24 h-24 object-cover rounded"
+          />
+          <div class="flex-1">
+            <h3 class="text-xl font-bold mb-1">{{ productData.name }}</h3>
+            <p v-if="productData.brand" class="text-gray-600">{{ productData.brand }}</p>
+            <p class="text-sm text-gray-500 mt-2">Barcode: {{ scannedBarcode }}</p>
+          </div>
+        </div>
+
+        <UAlert 
+          v-if="lookupError"
+          color="yellow" 
+          icon="i-heroicons-exclamation-triangle"
+          title="Product not found"
+          :description="lookupError"
         />
-        <h3 class="text-lg font-semibold text-gray-900 mb-2">
+
-          Barcode Scanner
+        <div class="flex gap-2">
-        </h3>
+          <UButton 
-        <p class="text-gray-600 mb-6">
+            color="primary" 
-          This feature will be implemented in Week 3.
+            size="lg"
-        </p>
+            icon="i-heroicons-plus"
-        <UButton 
+            class="flex-1"
-          to="/" 
+            @click="addToInventory"
-          color="gray"
+          >
-          variant="soft"
+            Add to Inventory
-        >
+          </UButton>
-          Back to Inventory
+          <UButton 
-        </UButton>
+            color="gray" 
+            size="lg"
+            @click="resetScanner"
+          >
+            Scan Again
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Loading State -->
+    <UCard v-if="isLookingUp">
+      <div class="text-center py-8">
+        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
+        <p class="text-gray-600">Looking up product...</p>
       </div>
     </UCard>
   </div>
@@ -30,4 +69,44 @@
 definePageMeta({
   layout: 'default'
 })
+
+const scannedBarcode = ref<string | null>(null)
+const productData = ref<any>(null)
+const showManualEntry = ref(false)
+
+// Use product lookup composable
+const { lookupProduct, isLoading: isLookingUp, error: lookupError } = useProductLookup()
+
+const handleBarcodeDetected = async (barcode: string) => {
+  scannedBarcode.value = barcode
+  
+  // Fetch product data from Edge Function
+  const data = await lookupProduct(barcode)
+  
+  if (data) {
+    productData.value = data
+  }
+}
+
+const addToInventory = () => {
+  // Navigate to home page with add form open and pre-filled
+  navigateTo({
+    path: '/',
+    query: {
+      action: 'add',
+      barcode: scannedBarcode.value,
+      name: productData.value?.name || undefined,
+      brand: productData.value?.brand || undefined,
+      image_url: productData.value?.image_url || undefined,
+      quantity: productData.value?.quantity || undefined
+    }
+  })
+}
+
+const resetScanner = () => {
+  scannedBarcode.value = null
+  productData.value = null
+  lookupError.value = null
+  isLookingUp.value = false
+}
 </script>

app/pages/settings.vue

@@ -2,73 +2,74 @@
   <div>
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
     
-    <div class="grid gap-6 md:grid-cols-2">
+    <UTabs :items="tabs" v-model="activeTab">
-      <UCard>
+      <template #account>
-        <template #header>
+        <UCard class="mt-4">
-          <h3 class="text-lg font-semibold">Account</h3>
+          <div class="space-y-4">
-        </template>
+            <h3 class="text-lg font-semibold">Account Settings</h3>
-        
+            <p class="text-gray-600">Account management will be implemented in future updates.</p>
-        <div class="space-y-4">
-          <div v-if="user">
-            <label class="text-sm font-medium text-gray-700">Email</label>
-            <p class="text-gray-900">{{ user.email }}</p>
           </div>
+        </UCard>
+      </template>
 
-          <UButton 
+      <template #tags>
-            v-if="!user"
+        <div class="mt-4">
-            to="/auth/login"
+          <TagsTagManager />
-            color="primary"
-          >
-            Sign In
-          </UButton>
         </div>
-      </UCard>
+      </template>
 
-      <UCard>
+      <template #app>
-        <template #header>
+        <SettingsAppSettings />
-          <h3 class="text-lg font-semibold">Tags</h3>
+      </template>
-        </template>
 
-        <p class="text-gray-600">
+      <template #about>
-          Manage your custom tags here (coming in Week 2).
+        <UCard class="mt-4">
-        </p>
+          <div class="space-y-4">
-      </UCard>
+            <h3 class="text-lg font-semibold">About Pantry</h3>
-
+            <p class="text-gray-600">Version 0.1.0 (MVP)</p>
-      <UCard>
+            <p class="text-gray-600">Self-hosted pantry management app with barcode scanning.</p>
-        <template #header>
+            <UButton 
-          <h3 class="text-lg font-semibold">Units</h3>
+              to="https://github.com/pantry-app/pantry"
-        </template>
+              target="_blank"
-        
+              color="gray"
-        <p class="text-gray-600">
+              variant="soft"
-          Manage your custom units here (coming in Week 2).
+            >
-        </p>
+              View on GitHub
-      </UCard>
+            </UButton>
-
+          </div>
-      <UCard>
+        </UCard>
-        <template #header>
+      </template>
-          <h3 class="text-lg font-semibold">About</h3>
+    </UTabs>
-        </template>
-        
-        <div class="space-y-2 text-sm text-gray-600">
-          <p><strong>Pantry</strong> v0.1.0-alpha</p>
-          <p>Self-hosted inventory management</p>
-          <a 
-            href="https://github.com/pantry-app/pantry" 
-            target="_blank"
-            class="text-primary hover:underline"
-          >
-            View on GitHub →
-          </a>
-        </div>
-      </UCard>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const { user } = useSupabaseAuth()
-
 definePageMeta({
   layout: 'default'
 })
+
+const activeTab = ref('tags')
+
+const tabs = [
+  {
+    key: 'tags',
+    label: 'Tags',
+    icon: 'i-heroicons-tag'
+  },
+  {
+    key: 'app',
+    label: 'App',
+    icon: 'i-heroicons-device-phone-mobile'
+  },
+  {
+    key: 'account',
+    label: 'Account',
+    icon: 'i-heroicons-user'
+  },
+  {
+    key: 'about',
+    label: 'About',
+    icon: 'i-heroicons-information-circle'
+  }
+]
 </script>

app/public/icon.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Background circle with emerald gradient -->
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <circle cx="256" cy="256" r="256" fill="url(#grad)"/>
+  
+  <!-- Pantry shelves icon (simplified cabinet with items) -->
+  <g transform="translate(106, 96)">
+    <!-- Cabinet outline -->
+    <rect x="0" y="0" width="300" height="320" rx="12" fill="none" stroke="white" stroke-width="8"/>
+    
+    <!-- Top shelf -->
+    <line x1="0" y1="80" x2="300" y2="80" stroke="white" stroke-width="6"/>
+    
+    <!-- Middle shelf -->
+    <line x1="0" y1="160" x2="300" y2="160" stroke="white" stroke-width="6"/>
+    
+    <!-- Bottom shelf -->
+    <line x1="0" y1="240" x2="300" y2="240" stroke="white" stroke-width="6"/>
+    
+    <!-- Top shelf items - jars -->
+    <circle cx="60" cy="40" r="25" fill="white" opacity="0.9"/>
+    <circle cx="150" cy="40" r="25" fill="white" opacity="0.9"/>
+    <circle cx="240" cy="40" r="25" fill="white" opacity="0.9"/>
+    
+    <!-- Middle shelf items - boxes -->
+    <rect x="35" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    <rect x="125" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    <rect x="215" y="105" width="50" height="40" rx="4" fill="white" opacity="0.9"/>
+    
+    <!-- Bottom shelf items - cans -->
+    <rect x="35" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    <rect x="125" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    <rect x="215" y="185" width="50" height="45" rx="6" fill="white" opacity="0.9"/>
+    
+    <!-- Very bottom items - larger containers -->
+    <rect x="45" y="260" width="70" height="50" rx="6" fill="white" opacity="0.9"/>
+    <rect x="185" y="260" width="70" height="50" rx="6" fill="white" opacity="0.9"/>
+  </g>
+</svg>

app/scripts/generate-icons.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import { readFile, writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+const svgPath = join(publicDir, 'icon.svg');
+
+const sizes = [
+  { size: 192, name: 'icon-192x192.png', maskable: false },
+  { size: 512, name: 'icon-512x512.png', maskable: false },
+  { size: 192, name: 'icon-192x192-maskable.png', maskable: true },
+  { size: 512, name: 'icon-512x512-maskable.png', maskable: true },
+];
+
+async function generateIcons() {
+  console.log('Reading SVG icon...');
+  const svgBuffer = await readFile(svgPath);
+  
+  for (const { size, name, maskable } of sizes) {
+    console.log(`Generating ${name}...`);
+    
+    let buffer;
+    if (maskable) {
+      // Maskable icons need safe zone padding (80% of icon in center)
+      // Create a transparent canvas with padding
+      const paddedSize = size;
+      const iconSize = Math.floor(size * 0.8);
+      const offset = Math.floor((paddedSize - iconSize) / 2);
+      
+      // Resize SVG to icon size
+      const iconBuffer = await sharp(svgBuffer)
+        .resize(iconSize, iconSize)
+        .png()
+        .toBuffer();
+      
+      // Create transparent background and composite
+      buffer = await sharp({
+        create: {
+          width: paddedSize,
+          height: paddedSize,
+          channels: 4,
+          background: { r: 0, g: 0, b: 0, alpha: 0 }
+        }
+      })
+        .composite([{
+          input: iconBuffer,
+          top: offset,
+          left: offset
+        }])
+        .png()
+        .toBuffer();
+    } else {
+      // Regular icon - full size
+      buffer = await sharp(svgBuffer)
+        .resize(size, size)
+        .png()
+        .toBuffer();
+    }
+    
+    await writeFile(join(publicDir, name), buffer);
+    console.log(`✓ ${name}`);
+  }
+  
+  console.log('\n✅ All icons generated successfully!');
+}
+
+generateIcons().catch(console.error);

app/scripts/generate-screenshots.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+import { writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+
+async function generateScreenshots() {
+  // Mobile screenshot (390x844 - iPhone 12/13/14 size)
+  console.log('Generating mobile screenshot placeholder...');
+  const mobileBuffer = await sharp({
+    create: {
+      width: 390,
+      height: 844,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="390" height="844">
+            <!-- Header -->
+            <rect width="390" height="64" fill="#10b981"/>
+            <text x="195" y="42" font-family="Arial" font-size="20" fill="white" text-anchor="middle" font-weight="bold">Pantry</text>
+            
+            <!-- Content area -->
+            <text x="24" y="104" font-family="Arial" font-size="24" fill="#111827" font-weight="bold">My Pantry</text>
+            
+            <!-- Item cards -->
+            <rect x="16" y="130" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="160" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Milk</text>
+            <text x="32" y="185" font-family="Arial" font-size="14" fill="#6b7280">Fridge • 1L</text>
+            
+            <rect x="16" y="226" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="256" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Pasta</text>
+            <text x="32" y="281" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="16" y="322" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="352" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="32" y="377" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 400ml</text>
+            
+            <!-- Bottom navigation -->
+            <rect y="780" width="390" height="64" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="78" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Home</text>
+            <text x="195" y="820" font-family="Arial" font-size="12" fill="#10b981" text-anchor="middle">Scan</text>
+            <text x="312" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Settings</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-mobile.png'), mobileBuffer);
+  console.log('✓ screenshot-mobile.png');
+  
+  // Desktop screenshot (1920x1080)
+  console.log('Generating desktop screenshot placeholder...');
+  const desktopBuffer = await sharp({
+    create: {
+      width: 1920,
+      height: 1080,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="1920" height="1080">
+            <!-- Header -->
+            <rect width="1920" height="80" fill="#10b981"/>
+            <text x="960" y="50" font-family="Arial" font-size="32" fill="white" text-anchor="middle" font-weight="bold">Pantry - Smart Inventory Manager</text>
+            
+            <!-- Sidebar -->
+            <rect x="0" y="80" width="280" height="1000" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="130" font-family="Arial" font-size="18" fill="#10b981" font-weight="600">Dashboard</text>
+            <text x="32" y="180" font-family="Arial" font-size="18" fill="#6b7280">Scan Item</text>
+            <text x="32" y="230" font-family="Arial" font-size="18" fill="#6b7280">Settings</text>
+            
+            <!-- Main content -->
+            <text x="340" y="150" font-family="Arial" font-size="36" fill="#111827" font-weight="bold">My Pantry Items</text>
+            
+            <!-- Grid of items -->
+            <rect x="340" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Milk</text>
+            <text x="370" y="290" font-family="Arial" font-size="18" fill="#6b7280">Fridge • 1L • Expires in 5 days</text>
+            
+            <rect x="860" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Pasta</text>
+            <text x="890" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="1380" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="1410" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="1410" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 400ml</text>
+            
+            <rect x="340" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Rice</text>
+            <text x="370" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 1kg</text>
+            
+            <rect x="860" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Olive Oil</text>
+            <text x="890" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 750ml</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-desktop.png'), desktopBuffer);
+  console.log('✓ screenshot-desktop.png');
+  
+  console.log('\n✅ All screenshots generated successfully!');
+}
+
+generateScreenshots().catch(console.error);

app/scripts/verify-pwa.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+/**
+ * Verify PWA Configuration
+ * 
+ * Checks that all PWA assets and configuration are present and valid.
+ */
+import { readFile, access } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+const configPath = join(__dirname, '..', 'nuxt.config.ts');
+
+let errors = [];
+let warnings = [];
+
+async function checkFileExists(path, description) {
+  try {
+    await access(path);
+    console.log(`✓ ${description}`);
+    return true;
+  } catch {
+    errors.push(`✗ ${description} - File not found: ${path}`);
+    return false;
+  }
+}
+
+async function verifyPWA() {
+  console.log('🔍 Verifying PWA Configuration...\n');
+
+  // Check icons
+  console.log('Icons:');
+  await checkFileExists(join(publicDir, 'icon.svg'), 'Source icon (SVG)');
+  await checkFileExists(join(publicDir, 'icon-192x192.png'), 'Icon 192x192');
+  await checkFileExists(join(publicDir, 'icon-512x512.png'), 'Icon 512x512');
+  await checkFileExists(join(publicDir, 'icon-192x192-maskable.png'), 'Maskable icon 192x192');
+  await checkFileExists(join(publicDir, 'icon-512x512-maskable.png'), 'Maskable icon 512x512');
+  await checkFileExists(join(publicDir, 'favicon.ico'), 'Favicon');
+  await checkFileExists(join(publicDir, 'apple-touch-icon.png'), 'Apple touch icon');
+
+  // Check screenshots
+  console.log('\nScreenshots:');
+  await checkFileExists(join(publicDir, 'screenshot-mobile.png'), 'Mobile screenshot');
+  await checkFileExists(join(publicDir, 'screenshot-desktop.png'), 'Desktop screenshot');
+
+  // Check Nuxt config
+  console.log('\nConfiguration:');
+  const configExists = await checkFileExists(configPath, 'Nuxt config file');
+  
+  if (configExists) {
+    const config = await readFile(configPath, 'utf-8');
+    
+    // Check for required PWA configuration
+    if (config.includes('@vite-pwa/nuxt')) {
+      console.log('✓ @vite-pwa/nuxt module configured');
+    } else {
+      errors.push('✗ @vite-pwa/nuxt module not found in config');
+    }
+
+    if (config.includes('registerType')) {
+      console.log('✓ Service worker registration configured');
+    } else {
+      warnings.push('⚠ Service worker registration type not set');
+    }
+
+    if (config.includes('manifest')) {
+      console.log('✓ PWA manifest configured');
+    } else {
+      errors.push('✗ PWA manifest configuration missing');
+    }
+
+    if (config.includes('workbox')) {
+      console.log('✓ Workbox configured');
+    } else {
+      warnings.push('⚠ Workbox configuration missing');
+    }
+
+    // Check for important manifest fields
+    if (config.includes('theme_color')) {
+      console.log('✓ Theme color configured');
+    } else {
+      warnings.push('⚠ Theme color not configured');
+    }
+
+    if (config.includes('display')) {
+      console.log('✓ Display mode configured');
+    } else {
+      warnings.push('⚠ Display mode not configured');
+    }
+  }
+
+  // Check composables
+  console.log('\nComposables:');
+  await checkFileExists(join(__dirname, '..', 'composables', 'usePWAInstall.ts'), 'usePWAInstall composable');
+  await checkFileExists(join(__dirname, '..', 'composables', 'useOnlineStatus.ts'), 'useOnlineStatus composable');
+
+  // Check components
+  console.log('\nComponents:');
+  await checkFileExists(join(__dirname, '..', 'components', 'InstallPrompt.vue'), 'InstallPrompt component');
+  await checkFileExists(join(__dirname, '..', 'components', 'OfflineBanner.vue'), 'OfflineBanner component');
+
+  // Check pages
+  console.log('\nPages:');
+  await checkFileExists(join(__dirname, '..', 'pages', 'offline.vue'), 'Offline fallback page');
+
+  // Print summary
+  console.log('\n' + '='.repeat(60));
+  
+  if (errors.length === 0 && warnings.length === 0) {
+    console.log('✅ PWA configuration is valid!');
+    console.log('\nNext steps:');
+    console.log('1. Run `npm run dev` and test in browser');
+    console.log('2. Check DevTools → Application → Manifest');
+    console.log('3. Test offline functionality');
+    console.log('4. Run Lighthouse PWA audit');
+    return 0;
+  }
+
+  if (warnings.length > 0) {
+    console.log('\n⚠️  Warnings:');
+    warnings.forEach(w => console.log(w));
+  }
+
+  if (errors.length > 0) {
+    console.log('\n❌ Errors:');
+    errors.forEach(e => console.log(e));
+    console.log('\nPWA configuration is incomplete. Please fix the errors above.');
+    return 1;
+  }
+
+  console.log('\n✅ PWA configuration is mostly valid (with warnings).');
+  return 0;
+}
+
+verifyPWA()
+  .then(code => process.exit(code))
+  .catch(error => {
+    console.error('\n❌ Verification failed:', error.message);
+    process.exit(1);
+  });

app/server/api/health.get.ts

@@ -0,0 +1,12 @@
+/**
+ * Health check endpoint for container monitoring
+ * 
+ * Returns 200 OK if the server is running
+ */
+export default defineEventHandler(() => {
+  return {
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    uptime: process.uptime()
+  }
+})

dev.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+set -e
+
+echo "🚀 Pantry - Starting Local Development Environment"
+echo ""
+
+# Check prerequisites
+command -v docker >/dev/null 2>&1 || { echo "❌ Docker not found. Install: https://docs.docker.com/get-docker/"; exit 1; }
+command -v docker-compose >/dev/null 2>&1 || { echo "❌ Docker Compose not found. Install: https://docs.docker.com/compose/install/"; exit 1; }
+command -v bun >/dev/null 2>&1 || { echo "❌ Bun not found. Install: curl -fsSL https://bun.sh/install | bash"; exit 1; }
+
+echo "✅ Prerequisites OK"
+echo ""
+
+# Step 1: Start Supabase
+echo "📦 Starting Supabase services..."
+docker-compose up -d
+
+echo "⏳ Waiting for services to initialize (15s)..."
+sleep 15
+
+echo "✅ Supabase started:"
+echo "   - API: http://localhost:54321"
+echo "   - Studio: http://localhost:54323"
+echo ""
+
+# Step 2: Install frontend dependencies
+echo "📦 Installing frontend dependencies..."
+cd app
+bun install
+
+echo "✅ Dependencies installed"
+echo ""
+
+# Step 3: Start dev server
+echo "🚀 Starting Nuxt dev server..."
+echo "   App will be available at: http://localhost:3000"
+echo ""
+echo "Press Ctrl+C to stop"
+echo ""
+
+bun run dev

docker-compose.dev.yml

@@ -0,0 +1,127 @@
+version: '3.8'
+
+services:
+  # PostgreSQL Database
+  db:
+    image: supabase/postgres:15.1.0.147
+    restart: unless-stopped
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+      POSTGRES_DB: postgres
+    volumes:
+      - db-data:/var/lib/postgresql/data
+      - ./supabase/migrations:/docker-entrypoint-initdb.d:ro
+
+  # Supabase Studio (Admin UI)
+  studio:
+    image: supabase/studio:20231123-64a766a
+    restart: unless-stopped
+    ports:
+      - "54323:3000"
+    environment:
+      SUPABASE_URL: http://kong:8000
+      SUPABASE_PUBLIC_URL: http://localhost:54321
+      SUPABASE_ANON_KEY: ${ANON_KEY}
+      SUPABASE_SERVICE_KEY: ${SERVICE_ROLE_KEY}
+
+  # Kong API Gateway
+  kong:
+    image: kong:2.8.1
+    restart: unless-stopped
+    ports:
+      - "54321:8000"
+      - "54320:8443"
+    environment:
+      KONG_DATABASE: "off"
+      KONG_DECLARATIVE_CONFIG: /var/lib/kong/kong.yml
+      KONG_DNS_ORDER: LAST,A,CNAME
+      KONG_PLUGINS: request-transformer,cors,key-auth,acl
+    volumes:
+      - ./docker/kong.yml:/var/lib/kong/kong.yml:ro
+
+  # GoTrue (Auth)
+  auth:
+    image: supabase/gotrue:v2.99.0
+    restart: unless-stopped
+    depends_on:
+      - db
+    environment:
+      GOTRUE_API_HOST: 0.0.0.0
+      GOTRUE_API_PORT: 9999
+      API_EXTERNAL_URL: http://localhost:54321
+      GOTRUE_DB_DRIVER: postgres
+      GOTRUE_DB_DATABASE_URL: postgres://supabase_auth_admin:${POSTGRES_PASSWORD:-postgres}@db:5432/postgres
+      GOTRUE_SITE_URL: http://localhost:3000
+      GOTRUE_URI_ALLOW_LIST: "*"
+      GOTRUE_DISABLE_SIGNUP: false
+      GOTRUE_JWT_ADMIN_ROLES: service_role
+      GOTRUE_JWT_AUD: authenticated
+      GOTRUE_JWT_DEFAULT_GROUP_NAME: authenticated
+      GOTRUE_JWT_EXP: 3600
+      GOTRUE_JWT_SECRET: ${JWT_SECRET}
+      GOTRUE_EXTERNAL_EMAIL_ENABLED: true
+      GOTRUE_MAILER_AUTOCONFIRM: true
+
+  # PostgREST (Auto API)
+  rest:
+    image: postgrest/postgrest:v11.2.0
+    restart: unless-stopped
+    depends_on:
+      - db
+    environment:
+      PGRST_DB_URI: postgres://authenticator:${POSTGRES_PASSWORD:-postgres}@db:5432/postgres
+      PGRST_DB_SCHEMAS: public,storage
+      PGRST_DB_ANON_ROLE: anon
+      PGRST_JWT_SECRET: ${JWT_SECRET}
+      PGRST_DB_USE_LEGACY_GUCS: "false"
+
+  # Realtime
+  realtime:
+    image: supabase/realtime:v2.25.35
+    restart: unless-stopped
+    depends_on:
+      - db
+    environment:
+      PORT: 4000
+      DB_HOST: db
+      DB_PORT: 5432
+      DB_USER: supabase_admin
+      DB_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+      DB_NAME: postgres
+      DB_AFTER_CONNECT_QUERY: 'SET search_path TO _realtime'
+      DB_ENC_KEY: supabaserealtime
+      API_JWT_SECRET: ${JWT_SECRET}
+      FLY_ALLOC_ID: fly123
+      FLY_APP_NAME: realtime
+      SECRET_KEY_BASE: ${JWT_SECRET}
+      ERL_AFLAGS: -proto_dist inet_tcp
+      ENABLE_TAILSCALE: "false"
+      DNS_NODES: "''"
+
+  # Storage (S3-compatible)
+  storage:
+    image: supabase/storage-api:v0.40.4
+    restart: unless-stopped
+    depends_on:
+      - db
+      - rest
+    environment:
+      ANON_KEY: ${ANON_KEY}
+      SERVICE_KEY: ${SERVICE_ROLE_KEY}
+      POSTGREST_URL: http://rest:3000
+      PGRST_JWT_SECRET: ${JWT_SECRET}
+      DATABASE_URL: postgres://supabase_storage_admin:${POSTGRES_PASSWORD:-postgres}@db:5432/postgres
+      FILE_SIZE_LIMIT: 52428800
+      STORAGE_BACKEND: file
+      FILE_STORAGE_BACKEND_PATH: /var/lib/storage
+      TENANT_ID: stub
+      REGION: stub
+      GLOBAL_S3_BUCKET: stub
+    volumes:
+      - storage-data:/var/lib/storage
+
+volumes:
+  db-data:
+  storage-data:

docker-compose.prod.yml

@@ -0,0 +1,52 @@
+# Production Docker Compose for Pantry App
+# 
+# This compose file only runs the Nuxt frontend.
+# Supabase should be hosted separately (managed service or self-hosted).
+
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: pantry:latest
+    container_name: pantry-app
+    restart: unless-stopped
+    
+    ports:
+      - "3000:3000"
+    
+    environment:
+      # Supabase connection (REQUIRED - set these in .env.production)
+      NUXT_PUBLIC_SUPABASE_URL: ${NUXT_PUBLIC_SUPABASE_URL}
+      NUXT_PUBLIC_SUPABASE_ANON_KEY: ${NUXT_PUBLIC_SUPABASE_ANON_KEY}
+      
+      # Server configuration
+      NODE_ENV: production
+      HOST: 0.0.0.0
+      PORT: 3000
+    
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]
+      interval: 30s
+      timeout: 3s
+      start_period: 40s
+      retries: 3
+    
+    networks:
+      - pantry
+    
+    # Resource limits (adjust based on your needs)
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+          cpus: '1.0'
+        reservations:
+          memory: 256M
+          cpus: '0.5'
+
+networks:
+  pantry:
+    driver: bridge

docker/README.md

@@ -0,0 +1,90 @@
+# Docker Deployment
+
+## Production Dockerfile
+
+The production Dockerfile uses a multi-stage build for optimized image size and security.
+
+### Build the image
+
+```bash
+docker build -t pantry:latest -f Dockerfile .
+```
+
+### Run the container
+
+```bash
+docker run -d \
+  --name pantry \
+  -p 3000:3000 \
+  -e NUXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co \
+  -e NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key \
+  pantry:latest
+```
+
+### Environment Variables
+
+Required:
+- `NUXT_PUBLIC_SUPABASE_URL` - Your Supabase project URL
+- `NUXT_PUBLIC_SUPABASE_ANON_KEY` - Your Supabase anon/public key
+
+Optional:
+- `PORT` - Port to listen on (default: 3000)
+- `HOST` - Host to bind to (default: 0.0.0.0)
+
+### Health Check
+
+The container includes a health check endpoint at `/api/health`
+
+```bash
+curl http://localhost:3000/api/health
+```
+
+Expected response:
+```json
+{
+  "status": "ok",
+  "timestamp": "2026-02-25T00:00:00.000Z",
+  "uptime": 123.456
+}
+```
+
+### Image Features
+
+- **Multi-stage build**: Separate build and runtime stages
+- **Alpine Linux**: Minimal base image (~50MB base)
+- **Non-root user**: Runs as unprivileged user (nodejs:1001)
+- **dumb-init**: Proper signal handling and zombie reaping
+- **Health checks**: Built-in container health monitoring
+- **Production-optimized**: Only production dependencies included
+
+### Image Size
+
+Approximate sizes:
+- Base Alpine + Node.js: ~50MB
+- Dependencies: ~150MB
+- Built app: ~20MB
+- **Total**: ~220MB
+
+### Security
+
+- Runs as non-root user (nodejs)
+- No unnecessary packages
+- Minimal attack surface
+- Regular security updates via Alpine base
+
+### Troubleshooting
+
+View logs:
+```bash
+docker logs pantry
+```
+
+Interactive shell:
+```bash
+docker exec -it pantry sh
+```
+
+Check health:
+```bash
+docker inspect --format='{{json .State.Health}}' pantry
+```

docker/kong.yml

@@ -0,0 +1,85 @@
+_format_version: "2.1"
+
+_transform: true
+
+services:
+  - name: auth
+    url: http://auth:9999
+    routes:
+      - name: auth-v1
+        strip_path: true
+        paths:
+          - /auth/v1
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: true
+
+  - name: rest
+    url: http://rest:3000
+    routes:
+      - name: rest-v1
+        strip_path: true
+        paths:
+          - /rest/v1
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: true
+
+  - name: realtime
+    url: http://realtime:4000/socket
+    routes:
+      - name: realtime-v1
+        strip_path: true
+        paths:
+          - /realtime/v1
+    plugins:
+      - name: cors
+      - name: key-auth
+        config:
+          hide_credentials: true
+
+  - name: storage
+    url: http://storage:5000
+    routes:
+      - name: storage-v1
+        strip_path: true
+        paths:
+          - /storage/v1
+    plugins:
+      - name: cors
+
+consumers:
+  - username: anon
+    keyauth_credentials:
+      - key: ${ANON_KEY}
+  - username: service_role
+    keyauth_credentials:
+      - key: ${SERVICE_ROLE_KEY}
+
+plugins:
+  - name: cors
+    config:
+      origins:
+        - "*"
+      methods:
+        - GET
+        - POST
+        - PUT
+        - PATCH
+        - DELETE
+        - OPTIONS
+      headers:
+        - Accept
+        - Accept-Encoding
+        - Authorization
+        - Content-Type
+        - Origin
+        - X-Client-Info
+      exposed_headers:
+        - X-Total-Count
+      credentials: true
+      max_age: 3600

docs/E2E_TESTING.md

@@ -0,0 +1,526 @@
+# End-to-End Testing Guide
+
+## Overview
+
+This guide covers manual end-to-end testing of the Pantry MVP. These tests ensure all critical user flows work correctly before release.
+
+## Test Environment
+
+**Requirements:**
+- Browser: Chrome/Edge, Firefox, or Safari
+- Resolution: 1920x1080 (desktop) and 390x844 (mobile)
+- Network: Both online and offline modes
+- Data: Fresh database with seed data
+
+## Critical User Flows
+
+### 1. Authentication Flow
+
+#### Test 1.1: Sign Up
+**Priority:** HIGH
+
+1. Navigate to app home page
+2. Click "Sign Up" or similar
+3. Enter email: test@example.com
+4. Enter password: SecurePass123!
+5. Confirm password
+6. Submit form
+
+**Expected Results:**
+- ✅ Validation errors if password too weak
+- ✅ Account created successfully
+- ✅ Redirected to home/dashboard
+- ✅ Welcome message shown (optional)
+
+#### Test 1.2: Sign In
+**Priority:** HIGH
+
+1. Sign out if signed in
+2. Navigate to home page
+3. Click "Sign In"
+4. Enter correct credentials
+5. Submit form
+
+**Expected Results:**
+- ✅ Successfully signed in
+- ✅ Redirected to dashboard
+- ✅ User menu shows email/name
+
+#### Test 1.3: Sign In (Wrong Credentials)
+**Priority:** MEDIUM
+
+1. Try signing in with wrong password
+2. Try signing in with non-existent email
+
+**Expected Results:**
+- ✅ Error message shown
+- ✅ Form not cleared (email retained)
+- ✅ No redirect
+- ✅ Try again allowed
+
+#### Test 1.4: Sign Out
+**Priority:** HIGH
+
+1. While signed in, click user menu
+2. Click "Sign Out"
+
+**Expected Results:**
+- ✅ Signed out successfully
+- ✅ Redirected to sign-in page
+- ✅ Cannot access protected pages
+
+### 2. Inventory Management
+
+#### Test 2.1: View Inventory List
+**Priority:** HIGH
+
+1. Sign in
+2. Navigate to home/inventory page
+
+**Expected Results:**
+- ✅ List of pantry items displayed
+- ✅ Items show: name, quantity, unit, location tags
+- ✅ Empty state if no items
+- ✅ Loading state while fetching
+
+#### Test 2.2: Add Item Manually
+**Priority:** HIGH
+
+1. Navigate to inventory
+2. Click "Add Item" button
+3. Enter item details:
+   - Name: "Olive Oil"
+   - Quantity: 1
+   - Unit: L (liter)
+   - Tags: pantry, cooking-oil
+4. Submit
+
+**Expected Results:**
+- ✅ Form validation works
+- ✅ Item appears in list immediately
+- ✅ Success message shown
+- ✅ Form cleared for next entry
+
+#### Test 2.3: Edit Item
+**Priority:** HIGH
+
+1. Click on an existing item
+2. Click "Edit" button
+3. Change quantity from 1 to 0.5
+4. Save changes
+
+**Expected Results:**
+- ✅ Modal/form opens with current values
+- ✅ Changes saved successfully
+- ✅ List updated immediately
+- ✅ No page reload needed
+
+#### Test 2.4: Delete Item
+**Priority:** HIGH
+
+1. Click on an item
+2. Click "Delete" button
+3. Confirm deletion
+
+**Expected Results:**
+- ✅ Confirmation dialog shown
+- ✅ Item removed from list
+- ✅ Success message shown
+- ✅ Can undo (optional)
+
+#### Test 2.5: Filter by Tag
+**Priority:** MEDIUM
+
+1. View inventory list
+2. Click on a tag filter (e.g., "fridge")
+
+**Expected Results:**
+- ✅ Only items with that tag shown
+- ✅ Filter state persists
+- ✅ Clear filter button available
+- ✅ Item count updated
+
+### 3. Barcode Scanning
+
+#### Test 3.1: Scan Known Product
+**Priority:** HIGH
+
+1. Navigate to Scan page
+2. Allow camera permissions
+3. Scan a barcode (e.g., Coca-Cola)
+
+**Expected Results:**
+- ✅ Camera opens
+- ✅ Barcode detected
+- ✅ Product info fetched from Open Food Facts
+- ✅ Pre-filled add form shown
+- ✅ Can edit before adding
+
+#### Test 3.2: Scan Unknown Product
+**Priority:** MEDIUM
+
+1. Scan a barcode not in database
+2. Manual entry form shown
+
+**Expected Results:**
+- ✅ "Product not found" message
+- ✅ Option to add manually
+- ✅ Barcode pre-filled
+- ✅ Can still save item
+
+#### Test 3.3: Camera Permission Denied
+**Priority:** MEDIUM
+
+1. Block camera permission
+2. Try to scan
+
+**Expected Results:**
+- ✅ Permission prompt shown
+- ✅ Helpful error message
+- ✅ Instructions to enable camera
+- ✅ Option to add manually
+
+### 4. Tag Management
+
+#### Test 4.1: Create Tag
+**Priority:** MEDIUM
+
+1. Go to Settings → Tags
+2. Click "Add Tag"
+3. Enter name: "freezer"
+4. Pick color: blue
+5. Save
+
+**Expected Results:**
+- ✅ Tag created successfully
+- ✅ Appears in tag list
+- ✅ Available in item forms
+- ✅ Color applied correctly
+
+#### Test 4.2: Edit Tag
+**Priority:** LOW
+
+1. Click on existing tag
+2. Change name or color
+3. Save
+
+**Expected Results:**
+- ✅ Tag updated
+- ✅ All items with tag reflect changes
+- ✅ No broken references
+
+#### Test 4.3: Delete Tag
+**Priority:** LOW
+
+1. Click delete on a tag
+2. Confirm
+
+**Expected Results:**
+- ✅ Confirmation shown if tag in use
+- ✅ Tag removed
+- ✅ Items keep other tags
+- ✅ No app crashes
+
+### 5. PWA Installation
+
+#### Test 5.1: Install Prompt (Desktop)
+**Priority:** MEDIUM
+
+1. Visit app on Chrome (desktop)
+2. Wait 3 seconds
+
+**Expected Results:**
+- ✅ Install banner appears
+- ✅ Shows app icon and name
+- ✅ Install button works
+- ✅ Can dismiss and won't show for 7 days
+
+#### Test 5.2: Install from Settings
+**Priority:** MEDIUM
+
+1. Go to Settings → App
+2. Click "Install App" button
+
+**Expected Results:**
+- ✅ Browser install dialog opens
+- ✅ App installs to desktop/home screen
+- ✅ Launches in standalone mode
+- ✅ Icon and name correct
+
+#### Test 5.3: iOS Safari Add to Home Screen
+**Priority:** HIGH (iOS users)
+
+1. Open app in Safari (iOS)
+2. Tap Share button
+3. Tap "Add to Home Screen"
+4. Confirm
+
+**Expected Results:**
+- ✅ Icon added to home screen
+- ✅ Opens in standalone mode
+- ✅ Splash screen shown
+- ✅ No Safari UI
+
+### 6. Offline Functionality
+
+#### Test 6.1: Work Offline
+**Priority:** HIGH
+
+1. Load app while online
+2. Navigate to all pages
+3. Disconnect internet
+4. Try navigating again
+
+**Expected Results:**
+- ✅ Offline banner appears
+- ✅ Previously visited pages load
+- ✅ Cached data visible
+- ✅ No white screens or errors
+
+#### Test 6.2: Offline Indicator
+**Priority:** MEDIUM
+
+1. Go offline
+2. Check for visual feedback
+
+**Expected Results:**
+- ✅ "You're offline" banner at top
+- ✅ Banner is amber/warning color
+- ✅ Icon indicates offline status
+
+#### Test 6.3: Return Online
+**Priority:** MEDIUM
+
+1. Go offline
+2. Wait a few seconds
+3. Go online
+
+**Expected Results:**
+- ✅ "Back online!" banner (green)
+- ✅ Auto-hides after 3 seconds
+- ✅ Data syncs (if pending changes)
+
+### 7. Responsive Design
+
+#### Test 7.1: Mobile View
+**Priority:** HIGH
+
+1. Resize browser to 390px wide
+2. Navigate all pages
+
+**Expected Results:**
+- ✅ Navigation adapts (hamburger menu)
+- ✅ Lists stack vertically
+- ✅ Buttons are touch-friendly
+- ✅ No horizontal scroll
+- ✅ Text readable without zoom
+
+#### Test 7.2: Tablet View
+**Priority:** MEDIUM
+
+1. Resize to 768px wide
+
+**Expected Results:**
+- ✅ Layout adapts
+- ✅ 2-column grids where appropriate
+- ✅ Navigation hybrid or drawer
+
+#### Test 7.3: Desktop View
+**Priority:** MEDIUM
+
+1. View at 1920px wide
+
+**Expected Results:**
+- ✅ Full navigation visible
+- ✅ Multi-column layouts
+- ✅ Content not stretched too wide
+- ✅ Whitespace used effectively
+
+### 8. Performance
+
+#### Test 8.1: Page Load Time
+**Priority:** HIGH
+
+1. Clear cache
+2. Load home page
+3. Measure time to interactive
+
+**Expected Results:**
+- ✅ < 3 seconds on 4G
+- ✅ < 1 second on repeat visit
+- ✅ Loading indicators shown
+
+#### Test 8.2: Lighthouse Score
+**Priority:** MEDIUM
+
+1. Open DevTools → Lighthouse
+2. Run "Progressive Web App" audit
+
+**Expected Results:**
+- ✅ PWA score: 90+
+- ✅ Performance: 80+
+- ✅ Accessibility: 90+
+- ✅ Best Practices: 90+
+
+### 9. Accessibility
+
+#### Test 9.1: Keyboard Navigation
+**Priority:** HIGH
+
+1. Use only keyboard (Tab, Enter, Esc)
+2. Navigate entire app
+
+**Expected Results:**
+- ✅ All interactive elements reachable
+- ✅ Focus indicators visible
+- ✅ Modals can be closed with Esc
+- ✅ Logical tab order
+
+#### Test 9.2: Screen Reader
+**Priority:** MEDIUM
+
+1. Enable VoiceOver (Mac) or NVDA (Windows)
+2. Navigate app
+
+**Expected Results:**
+- ✅ All text announced
+- ✅ Images have alt text
+- ✅ Form labels read correctly
+- ✅ Buttons have meaningful labels
+
+### 10. Error Handling
+
+#### Test 10.1: Network Error
+**Priority:** HIGH
+
+1. Start action (add item)
+2. Disable network mid-request
+3. Check behavior
+
+**Expected Results:**
+- ✅ Error message shown
+- ✅ Action can be retried
+- ✅ Data not lost
+- ✅ No crash
+
+#### Test 10.2: Server Error (500)
+**Priority:** MEDIUM
+
+1. Trigger server error (if possible)
+
+**Expected Results:**
+- ✅ User-friendly error message
+- ✅ No stack traces visible
+- ✅ Option to try again
+- ✅ Logs sent to monitoring (optional)
+
+## Test Data Setup
+
+### Seed Data Script
+
+```sql
+-- Run in Supabase SQL Editor
+-- Insert test household
+INSERT INTO households (id, name) VALUES 
+  ('test-household-1', 'Test Household');
+
+-- Insert test tags
+INSERT INTO tags (id, household_id, name, color) VALUES
+  ('tag-1', 'test-household-1', 'fridge', '#3b82f6'),
+  ('tag-2', 'test-household-1', 'pantry', '#10b981'),
+  ('tag-3', 'test-household-1', 'freezer', '#6366f1');
+
+-- Insert test units
+INSERT INTO units (id, household_id, name, abbreviation, base_unit, conversion_factor) VALUES
+  ('unit-1', 'test-household-1', 'liter', 'L', 'L', 1),
+  ('unit-2', 'test-household-1', 'milliliter', 'mL', 'L', 0.001),
+  ('unit-3', 'test-household-1', 'kilogram', 'kg', 'kg', 1);
+
+-- Insert test items
+INSERT INTO pantry_items (household_id, name, quantity, unit_id) VALUES
+  ('test-household-1', 'Milk', 1, 'unit-1'),
+  ('test-household-1', 'Rice', 2, 'unit-3'),
+  ('test-household-1', 'Olive Oil', 0.5, 'unit-1');
+```
+
+## Test Execution Checklist
+
+**Before Testing:**
+- [ ] Fresh database with seed data
+- [ ] Clear browser cache
+- [ ] Clear localStorage
+- [ ] Unregister service workers
+- [ ] Sign out all accounts
+
+**Test Environments:**
+- [ ] Chrome (Windows/Mac/Linux)
+- [ ] Firefox (Windows/Mac/Linux)
+- [ ] Safari (Mac/iOS)
+- [ ] Mobile Chrome (Android)
+- [ ] Mobile Safari (iOS)
+
+**Test Scenarios:**
+- [ ] Authentication (4 tests)
+- [ ] Inventory Management (5 tests)
+- [ ] Barcode Scanning (3 tests)
+- [ ] Tag Management (3 tests)
+- [ ] PWA Installation (3 tests)
+- [ ] Offline Functionality (3 tests)
+- [ ] Responsive Design (3 tests)
+- [ ] Performance (2 tests)
+- [ ] Accessibility (2 tests)
+- [ ] Error Handling (2 tests)
+
+## Bug Report Template
+
+```
+**Title:** Short description
+
+**Priority:** High / Medium / Low
+
+**Environment:**
+- Browser: Chrome 120.0
+- OS: Windows 11
+- Device: Desktop 1920x1080
+
+**Steps to Reproduce:**
+1. Navigate to...
+2. Click on...
+3. Enter...
+
+**Expected Result:**
+What should happen
+
+**Actual Result:**
+What actually happened
+
+**Screenshots/Video:**
+[Attach if applicable]
+
+**Console Errors:**
+[Copy any errors from DevTools console]
+
+**Workaround:**
+[If known]
+```
+
+## Sign-off
+
+**Tested by:** [Name]  
+**Date:** [Date]  
+**Environment:** [Browser, OS]  
+**Total Tests:** [X]  
+**Passed:** [X]  
+**Failed:** [X]  
+**Blocked:** [X]
+
+**Critical Issues Found:** [List or "None"]  
+**Recommendation:** ✅ Ready for Release / ❌ Needs Fixes
+
+---
+
+**Next Steps:**
+- Fix critical issues
+- Retest failed scenarios
+- Document known limitations
+- Prepare release notes

docs/PWA_TESTING.md

@@ -0,0 +1,283 @@
+# PWA Offline Functionality Testing Guide
+
+## Overview
+
+This guide covers testing the Progressive Web App (PWA) features and offline functionality of Pantry.
+
+## Prerequisites
+
+- Development server running (`npm run dev` in the `app/` directory)
+- Modern browser (Chrome, Edge, Safari, or Firefox)
+- Browser DevTools access
+
+## Test Categories
+
+### 1. PWA Manifest & Installation
+
+#### Test 1.1: Manifest Validation
+1. Open browser DevTools → Application tab
+2. Navigate to "Manifest" section
+3. **Expected Results:**
+   - ✅ Manifest loads without errors
+   - ✅ App name: "Pantry - Smart Inventory Manager"
+   - ✅ Short name: "Pantry"
+   - ✅ Theme color: #10b981 (emerald)
+   - ✅ All icons (192x192, 512x512, maskable) present
+   - ✅ Display mode: standalone
+   - ✅ No manifest warnings
+
+#### Test 1.2: Install Prompt
+1. Wait 3 seconds after page load
+2. **Expected Results:**
+   - ✅ Install prompt card appears (bottom-right on desktop, bottom on mobile)
+   - ✅ Shows app icon and "Install Pantry" title
+   - ✅ "Install" button is clickable
+   - ✅ "Not now" dismisses the prompt
+   - ✅ Close (X) button dismisses the prompt
+
+#### Test 1.3: Manual Installation from Settings
+1. Navigate to Settings → App tab
+2. **Expected Results:**
+   - ✅ Shows "Install App" button
+   - ✅ Clicking installs the app
+   - ✅ After install, shows "App is installed" status
+   - ✅ Storage usage displayed with progress bar
+
+#### Test 1.4: Platform-Specific Instructions
+1. View Settings → App tab on device without beforeinstallprompt support
+2. **Expected Results:**
+   - ✅ Shows iOS installation instructions (if on iOS)
+   - ✅ Shows Android installation instructions (if on Android)
+   - ✅ Instructions are clear and accurate
+
+### 2. Service Worker
+
+#### Test 2.1: Service Worker Registration
+1. Open DevTools → Application → Service Workers
+2. **Expected Results:**
+   - ✅ Service worker registered
+   - ✅ Status: "activated and running"
+   - ✅ No registration errors
+   - ✅ Update on reload enabled
+
+#### Test 2.2: Cache Storage
+1. Open DevTools → Application → Cache Storage
+2. Navigate through the app (Home, Scan, Settings)
+3. **Expected Results:**
+   - ✅ Multiple cache buckets created:
+     - workbox-precache (app shell)
+     - supabase-rest-api
+     - supabase-storage
+     - product-images (if products viewed)
+     - google-fonts-stylesheets
+     - google-fonts-webfonts
+   - ✅ App shell assets cached (JS, CSS, HTML)
+   - ✅ Icons and images cached
+
+#### Test 2.3: Update Behavior
+1. Make a code change
+2. Rebuild the app
+3. Refresh the page
+4. **Expected Results:**
+   - ✅ Service worker updates in background
+   - ✅ New version activates automatically (skipWaiting)
+   - ✅ No manual refresh required for future visits
+
+### 3. Offline Functionality
+
+#### Test 3.1: Complete Offline Mode
+1. Load the app while online
+2. Navigate to all pages (Home, Scan, Settings)
+3. Open DevTools → Network tab
+4. Enable "Offline" mode
+5. Try navigating the app
+6. **Expected Results:**
+   - ✅ App continues to function
+   - ✅ Previously visited pages load instantly
+   - ✅ Offline banner appears at top
+   - ✅ Banner shows "You're currently offline" message
+   - ✅ Navigation between cached pages works
+   - ✅ No white screens or errors
+
+#### Test 3.2: Offline Fallback Page
+1. Go offline (DevTools Network → Offline)
+2. Try navigating to a non-cached page (e.g., type random URL)
+3. **Expected Results:**
+   - ✅ Redirects to /offline page
+   - ✅ Shows WiFi icon and helpful message
+   - ✅ Lists what you can do offline
+   - ✅ "Try Again" button present
+   - ✅ Auto-redirects when back online
+
+#### Test 3.3: Online Status Detection
+1. Start online, go offline, come back online
+2. **Expected Results:**
+   - ✅ Offline banner appears when offline
+   - ✅ "Back online!" banner shows when reconnected (green)
+   - ✅ Banner auto-hides after 3 seconds
+   - ✅ No false positives
+
+#### Test 3.4: API Request Caching (Supabase)
+1. While online, view some inventory items (once implemented)
+2. Go offline
+3. Navigate to the items page
+4. **Expected Results:**
+   - ✅ Previously loaded items still visible
+   - ✅ Network requests fail gracefully
+   - ✅ Cached data is served
+   - ✅ No crashes or white screens
+
+#### Test 3.5: Image Caching (Product Images)
+1. While online, view products with images
+2. Go offline
+3. View the same products again
+4. **Expected Results:**
+   - ✅ Product images load from cache
+   - ✅ No broken image placeholders
+   - ✅ Images from Open Food Facts cached
+
+### 4. Background Sync (Future Enhancement)
+
+**Note:** Background sync not yet implemented. This section is reserved for future testing.
+
+### 5. Cross-Platform Testing
+
+#### Test 5.1: Desktop Browsers
+Test on:
+- [ ] Chrome/Edge (Windows/Mac/Linux)
+- [ ] Firefox (Windows/Mac/Linux)
+- [ ] Safari (Mac only)
+
+#### Test 5.2: Mobile Browsers
+Test on:
+- [ ] Chrome (Android)
+- [ ] Safari (iOS)
+- [ ] Firefox (Android)
+- [ ] Samsung Internet (Android)
+
+#### Test 5.3: Installed App vs Browser
+Compare behavior when:
+- [ ] Running in browser tab
+- [ ] Running as installed PWA (standalone mode)
+
+**Expected Results:**
+- ✅ Identical functionality
+- ✅ Installed app shows in app switcher
+- ✅ Installed app has no browser chrome
+- ✅ Installed app survives system restart
+
+### 6. Performance Testing
+
+#### Test 6.1: First Load Performance
+1. Clear all caches
+2. Load the app (online)
+3. Check DevTools → Lighthouse
+4. Run PWA audit
+5. **Expected Results:**
+   - ✅ PWA score: 90+ / 100
+   - ✅ Performance score: 80+ / 100
+   - ✅ "Installable" badge present
+   - ✅ No PWA warnings
+
+#### Test 6.2: Repeat Visit Performance
+1. Visit the app
+2. Navigate around
+3. Close tab
+4. Reopen the app
+5. **Expected Results:**
+   - ✅ Instant load from cache
+   - ✅ No flash of white screen
+   - ✅ Content visible immediately
+
+### 7. Storage Management
+
+#### Test 7.1: Storage Quota
+1. Open Settings → App tab
+2. **Expected Results:**
+   - ✅ Storage usage displayed
+   - ✅ Storage quota displayed
+   - ✅ Usage percentage shown visually
+   - ✅ Numbers update as cache grows
+
+#### Test 7.2: Cache Eviction
+1. Fill cache with many images/data
+2. Exceed storage quota
+3. **Expected Results:**
+   - ✅ Oldest cache entries evicted automatically
+   - ✅ No app crashes
+   - ✅ App continues to function
+
+## Automated Testing (Future)
+
+### Playwright E2E Tests (Planned)
+
+```typescript
+// Example test structure
+test('PWA installs correctly', async ({ page }) => {
+  // Test installation flow
+})
+
+test('App works offline', async ({ page, context }) => {
+  // Load app, go offline, verify functionality
+})
+```
+
+## Known Issues & Limitations
+
+1. **iOS Safari:**
+   - No beforeinstallprompt event (use manual Add to Home Screen)
+   - Service worker has storage limits
+   - Background sync not supported
+
+2. **Firefox:**
+   - Install prompt may not show (desktop only)
+   - Use "Add to Home Screen" on mobile
+
+3. **Development Mode:**
+   - Service worker may behave differently
+   - Always test in production build
+
+## Troubleshooting
+
+### Service Worker Not Updating
+- Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
+- DevTools → Application → Service Workers → Unregister
+- Clear cache and reload
+
+### Install Prompt Not Showing
+- Check if already installed
+- Check localStorage for `pwa-install-dismissed`
+- Wait 7 days or clear localStorage
+- Ensure criteria met (HTTPS, manifest, service worker)
+
+### Offline Mode Not Working
+- Verify service worker is active
+- Check cache storage has content
+- Ensure you visited pages while online first
+
+## Success Criteria
+
+All tests must pass before marking issue #36 complete:
+
+- [x] PWA manifest loads correctly
+- [x] Install prompt works
+- [x] Service worker registers and activates
+- [x] App works offline
+- [x] Cached content loads
+- [x] Offline banner shows/hides correctly
+- [x] Online status detected accurately
+- [x] Install instructions provided for unsupported browsers
+- [x] Storage usage displayed
+- [x] No console errors during offline usage
+
+## Sign-off
+
+**Tested by:** [Name]  
+**Date:** [Date]  
+**Browsers tested:** [List]  
+**Issues found:** [List or "None"]  
+**Status:** ✅ Pass / ❌ Fail
+
+---
+
+**Next Steps:** After testing passes, proceed to Week 6 (Deployment & Testing).

docs/README.md

@@ -0,0 +1,84 @@
+# Pantry Documentation
+
+Complete documentation for the Pantry household inventory management system.
+
+## 📚 Documentation Structure
+
+### 🚀 Getting Started
+
+- **[Project Overview](PROJECT_PLAN.md)** - Vision, roadmap, and MVP phases
+- **[Local Setup Guide](development/local-setup.md)** - Docker Compose development environment
+- **[Getting Started](development/getting-started.md)** - Quick start for new developers
+
+### 🏗️ Architecture
+
+- **[Architecture Overview](architecture/overview.md)** - Tech stack, design decisions, data flow
+- **[Database Schema](architecture/database.md)** - Tables, relationships, RLS policies, migrations
+- **[API Reference](architecture/api.md)** - Supabase endpoints, Edge Functions, helpers
+
+### 💻 Development
+
+- **[Development Workflow](development/workflow.md)** - Daily workflow, conventions, best practices
+- **[Git Workflow](development/git-workflow.md)** - Branching strategy, PR process, reviews
+
+### 🚢 Deployment
+
+- **[Production Deployment](deployment/production.md)** - Docker, Coolify, environment setup
+- **[CI/CD Pipeline](deployment/ci-cd.md)** - Automated testing, builds, deployments
+
+---
+
+## 🎯 Quick Links by Role
+
+### New Developer
+1. [Local Setup Guide](development/local-setup.md) - Get running in 5 minutes
+2. [Architecture Overview](architecture/overview.md) - Understand the stack
+3. [Development Workflow](development/workflow.md) - Daily development process
+
+### Feature Implementation
+1. [Database Schema](architecture/database.md) - Table structure and queries
+2. [API Reference](architecture/api.md) - Available endpoints
+3. [Git Workflow](development/git-workflow.md) - Branch naming, PR checklist
+
+### Deployment & Operations
+1. [Production Deployment](deployment/production.md) - Deploy to production
+2. [CI/CD Pipeline](deployment/ci-cd.md) - Automated workflows
+
+---
+
+## 📊 Current Status
+
+**MVP Progress:** 14/34 issues complete (41.2%)
+
+- ✅ Week 1: Database + Frontend Foundation (6/6)
+- ✅ Week 2: Core Inventory Management (8/8)
+- 🔄 Week 3: Barcode Scanning (1/5)
+- ⏸️ Week 4-6: Tag UI, PWA, Deployment (20 remaining)
+
+See [PROJECT_PLAN.md](PROJECT_PLAN.md) for detailed roadmap.
+
+---
+
+## 🤝 Contributing
+
+For contribution guidelines, see [Development Workflow](development/workflow.md).
+
+Key points:
+- Feature branches off `develop`
+- PRs require review before merge
+- Follow conventional commits
+- Write tests for new features
+
+---
+
+## 🔗 External Resources
+
+- **Repository:** https://gitea.jeanlucmakiola.de/pantry-app/pantry
+- **Supabase Docs:** https://supabase.com/docs
+- **Nuxt 4 Docs:** https://nuxt.com
+- **Open Food Facts API:** https://wiki.openfoodfacts.org/API
+
+---
+
+**Last Updated:** 2026-02-09  
+**Version:** 0.1.0-alpha (MVP in progress)

docs/development/getting-started.md

@@ -0,0 +1,189 @@
+# Getting Started with Pantry Development
+
+Welcome! This guide will get you from zero to running Pantry locally in ~5 minutes.
+
+## 🎯 What You'll Build
+
+A self-hosted kitchen inventory app with:
+- Inventory management (add, edit, delete items)
+- Tag-based organization (Fridge, Freezer, Dairy, etc.)
+- Unit conversions (g, kg, L, cups)
+- Barcode scanning (coming soon)
+- PWA features (offline, installable)
+
+## ⚡ Quick Start
+
+### Prerequisites
+
+- **Docker** & **Docker Compose** - [Install](https://docs.docker.com/get-docker/)
+- **Bun** - [Install](https://bun.sh): `curl -fsSL https://bun.sh/install | bash`
+- **Git**
+
+### One-Command Setup
+
+```bash
+# Clone the repo
+git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
+cd pantry
+
+# Run the setup script
+./dev.sh
+```
+
+That's it! The script will:
+1. ✅ Start Supabase services (Docker Compose)
+2. ✅ Wait for services to initialize
+3. ✅ Install frontend dependencies
+4. ✅ Launch Nuxt dev server
+
+### Access the App
+
+| Service | URL | Purpose |
+|---------|-----|---------|
+| **App** | `http://localhost:3000` | Main frontend |
+| **Supabase Studio** | `http://localhost:54323` | Database admin UI |
+| **API** | `http://localhost:54321` | Backend API |
+
+## 🎮 Try It Out
+
+1. Open `http://localhost:3000`
+2. Click **"Add Manually"** to create your first item
+3. Fill in:
+   - Name: "Milk"
+   - Quantity: 1
+   - Unit: Liter
+   - Tags: Fridge, Dairy
+   - Expiry: Set a date
+4. Click **"Add Item"** and see it in the grid!
+
+### Explore Features
+
+- **Edit item:** Click "Edit" on any card
+- **Adjust quantity:** Use +/- buttons
+- **Delete item:** Click "Delete" (confirms first)
+- **View database:** Open Supabase Studio at `:54323`
+
+## 📁 Project Structure
+
+```
+pantry/
+├── app/                      # Nuxt 4 frontend
+│   ├── components/           # Vue components
+│   │   └── inventory/        # Inventory UI (List, Card, Forms)
+│   ├── composables/          # Data hooks (useInventory, useSupabase)
+│   ├── pages/                # Routes (index, scan, settings)
+│   └── types/                # TypeScript definitions
+├── supabase/
+│   └── migrations/           # Database schema (001-005)
+├── docker-compose.yml        # Supabase services
+├── docker/
+│   └── kong.yml              # API gateway config
+└── docs/                     # Documentation
+```
+
+## 🛠️ Common Tasks
+
+### View Logs
+
+```bash
+# All services
+docker-compose logs -f
+
+# Just the database
+docker-compose logs -f db
+```
+
+### Reset Database
+
+```bash
+# Stop and remove volumes (fresh start)
+docker-compose down -v
+
+# Restart (migrations auto-apply)
+docker-compose up -d
+```
+
+### Access Database Directly
+
+```bash
+# psql CLI
+docker-compose exec db psql -U postgres -d postgres
+
+# Or use Supabase Studio (GUI)
+open http://localhost:54323
+```
+
+### Stop Everything
+
+```bash
+# Stop services (keep data)
+docker-compose stop
+
+# Stop and remove everything
+docker-compose down -v
+```
+
+## 🔍 What's Included
+
+### Database (Pre-seeded)
+
+**30 Units:**
+- Weight: g, kg, mg, lb, oz
+- Volume: mL, L, cup, tbsp, tsp
+- Count: piece, dozen, bottle, can, jar
+
+**33 Tags:**
+- Position: Fridge, Freezer, Pantry
+- Type: Dairy, Meat, Vegetables, Fruits
+- Dietary: Vegan, Gluten-Free, Organic
+- Custom: Low Stock, To Buy, Meal Prep
+
+### Features (Working Now)
+
+- ✅ Add/Edit/Delete inventory items
+- ✅ Tag selection (multi-select)
+- ✅ Unit conversions
+- ✅ Expiry date tracking with warnings
+- ✅ Responsive layout (mobile-ready)
+- ✅ Quantity quick actions (+/- buttons)
+
+### Features (Coming Soon)
+
+- ⏳ Barcode scanning (Week 3)
+- ⏳ User authentication UI
+- ⏳ Tag management
+- ⏳ PWA (offline mode)
+
+## 📚 Next Steps
+
+### Learn the Stack
+
+1. **[Architecture Overview](../architecture/overview.md)** - Tech stack and design decisions
+2. **[Database Schema](../architecture/database.md)** - Tables and relationships
+3. **[Development Workflow](workflow.md)** - Daily development process
+
+### Make Your First Change
+
+1. Pick an issue from Gitea
+2. Create a branch: `git checkout -b feature/your-feature`
+3. Make changes, test locally
+4. Commit: `git commit -m "feat: your feature"`
+5. Push and create PR
+
+### Troubleshooting
+
+See **[Local Setup Guide](local-setup.md)** for:
+- Port conflicts
+- Database connection issues
+- Frontend errors
+- Environment variables
+
+## 🤝 Need Help?
+
+- **Documentation:** Browse `/docs` folder
+- **Issues:** Create an issue on Gitea
+- **Local setup:** See [local-setup.md](local-setup.md)
+
+---
+
+**Ready to code?** Check out the [Development Workflow](workflow.md)!

docs/development/local-setup.md

@@ -0,0 +1,335 @@
+# Pantry - Local Development Setup
+
+Self-hosted household pantry management app with barcode scanning.
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- **Docker** & **Docker Compose** (for Supabase backend)
+- **Bun** (for Nuxt frontend) - Install: `curl -fsSL https://bun.sh/install | bash`
+- **Git**
+
+### 1. Clone & Setup
+
+```bash
+git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
+cd pantry
+```
+
+### 2. Start Supabase (Backend)
+
+```bash
+# Start all Supabase services
+docker-compose up -d
+
+# Wait ~10 seconds for services to initialize
+# Check status
+docker-compose ps
+```
+
+**Services running:**
+- PostgreSQL: `localhost:5432`
+- Supabase API: `http://localhost:54321`
+- Supabase Studio: `http://localhost:54323` (admin UI)
+
+### 3. Apply Database Migrations
+
+The migrations are automatically applied on first startup via `/docker-entrypoint-initdb.d`.
+
+To verify:
+```bash
+docker-compose exec db psql -U postgres -d postgres -c "\dt"
+```
+
+You should see: `inventory_items`, `products`, `tags`, `units`, `item_tags`
+
+### 4. Start Nuxt App (Frontend)
+
+```bash
+cd app
+bun install
+bun run dev
+```
+
+**App running:** `http://localhost:3000`
+
+### 5. Open & Test
+
+1. Visit `http://localhost:3000`
+2. Click "Add Manually" to create your first inventory item
+3. Access Supabase Studio at `http://localhost:54323` to view database
+
+---
+
+## 📁 Project Structure
+
+```
+pantry/
+├── app/                    # Nuxt 4 frontend
+│   ├── components/         # Vue components
+│   │   └── inventory/      # Inventory CRUD UI
+│   ├── composables/        # Supabase client, data hooks
+│   ├── pages/              # Routes (index, scan, settings)
+│   └── types/              # TypeScript definitions
+├── supabase/
+│   └── migrations/         # SQL schema & seed data
+├── docker/
+│   └── kong.yml            # API gateway config
+├── docker-compose.yml      # Supabase services
+└── .env                    # Environment variables
+```
+
+---
+
+## 🔧 Common Tasks
+
+### View Logs
+
+```bash
+# All services
+docker-compose logs -f
+
+# Specific service
+docker-compose logs -f db
+docker-compose logs -f auth
+```
+
+### Reset Database
+
+```bash
+# Stop services
+docker-compose down -v
+
+# Restart (migrations auto-apply)
+docker-compose up -d
+```
+
+### Access Database
+
+```bash
+# psql
+docker-compose exec db psql -U postgres -d postgres
+
+# Supabase Studio (GUI)
+# http://localhost:54323
+```
+
+### Run Migrations Manually
+
+```bash
+# If you add new migrations after initial setup
+docker-compose exec db psql -U postgres -d postgres -f /docker-entrypoint-initdb.d/003_helper_functions.sql
+```
+
+### Create Test User
+
+```bash
+# Via Supabase Studio: http://localhost:54323
+# → Authentication → Add User
+# Email: test@example.com
+# Password: password123
+
+# Or via curl:
+curl http://localhost:54321/auth/v1/signup \
+  -H "apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." \
+  -H "Content-Type: application/json" \
+  -d '{"email":"test@example.com","password":"password123"}'
+```
+
+---
+
+## 🧪 Testing Features
+
+### 1. Inventory Management
+- Add items manually via form
+- Edit quantities with +/- buttons
+- Delete items
+- View expiry warnings
+
+### 2. Tags & Organization
+- Pre-seeded tags: Fridge, Freezer, Pantry, Dairy, Vegan, etc.
+- Multi-select tags when adding items
+- Color-coded badges
+
+### 3. Units
+- 30 pre-seeded units (g, kg, L, cups, pieces, etc.)
+- Automatic conversion support
+
+### 4. Barcode Scanning (Week 3 - In Progress)
+- Camera access (requires HTTPS in production)
+- Manual barcode entry fallback
+
+---
+
+## 🐛 Troubleshooting
+
+### Port Conflicts
+
+If ports 5432, 54321, or 3000 are in use:
+
+```bash
+# Check what's using the port
+sudo lsof -i :5432
+
+# Option 1: Stop conflicting service
+# Option 2: Change port in docker-compose.yml
+```
+
+### Database Connection Refused
+
+```bash
+# Wait for PostgreSQL to fully start
+docker-compose logs db | grep "ready to accept connections"
+
+# If stuck, restart
+docker-compose restart db
+```
+
+### Migrations Not Applied
+
+```bash
+# Verify migrations directory is mounted
+docker-compose exec db ls -la /docker-entrypoint-initdb.d
+
+# Manually apply
+docker-compose exec db bash
+cd /docker-entrypoint-initdb.d
+for f in *.sql; do psql -U postgres -d postgres -f "$f"; done
+```
+
+### Frontend: Module Not Found
+
+```bash
+cd app
+rm -rf node_modules bun.lock .nuxt
+bun install
+bun run dev
+```
+
+---
+
+## 📊 Database Schema
+
+### Tables
+
+| Table | Purpose | Rows (Est.) |
+|-------|---------|-------------|
+| `inventory_items` | Current inventory | 100-500 |
+| `products` | Barcode cache (Open Food Facts) | 500-2000 |
+| `tags` | Organization labels | 50 (33 pre-seeded) |
+| `units` | Measurement units | 50 (30 pre-seeded) |
+| `item_tags` | Many-to-many item ↔ tag | 200-1000 |
+
+### Pre-Seeded Data
+
+**Units (30):**
+- Weight: g, kg, mg, lb, oz
+- Volume: mL, L, cup, tbsp, tsp, gal, qt, pt
+- Count: piece, dozen, package, bottle, can, jar, box, bag
+
+**Tags (33):**
+- Position: Fridge, Freezer, Pantry, Cabinet
+- Type: Dairy, Meat, Vegetables, Fruits, Snacks
+- Dietary: Vegan, Gluten-Free, Organic, Kosher, Halal
+- Custom: Low Stock, To Buy, Meal Prep, Leftovers
+
+---
+
+## 🔐 Authentication
+
+**Default Setup (Development):**
+- Auto-confirm emails (no SMTP needed)
+- Anyone can sign up
+- JWT tokens valid for 1 hour
+
+**Create Admin User:**
+
+```sql
+-- Via psql
+docker-compose exec db psql -U postgres -d postgres
+
+INSERT INTO auth.users (id, email, encrypted_password, email_confirmed_at)
+VALUES (
+  gen_random_uuid(),
+  'admin@pantry.local',
+  crypt('admin123', gen_salt('bf')),
+  NOW()
+);
+```
+
+---
+
+## 🌐 Environment Variables
+
+**.env** (root)
+```bash
+POSTGRES_PASSWORD=postgres
+JWT_SECRET=your-secret-here
+ANON_KEY=<supabase-anon-key>
+SERVICE_ROLE_KEY=<supabase-service-role-key>
+```
+
+**app/.env** (Nuxt)
+```bash
+NUXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+NUXT_PUBLIC_SUPABASE_ANON_KEY=<same-as-above>
+```
+
+---
+
+## 📈 Development Workflow
+
+1. **Make changes** to Nuxt app → Hot reload at `localhost:3000`
+2. **Database changes** → Create new migration in `supabase/migrations/`
+3. **Test** → Add items, scan barcodes, check database
+4. **Commit** → Feature branch → PR to `develop`
+
+---
+
+## 🚢 Production Deployment (Coming Soon)
+
+See `docs/DEPLOYMENT.md` for:
+- Coolify setup
+- Environment configuration
+- SSL/HTTPS setup
+- Backups
+
+---
+
+## 📚 Documentation
+
+- [Architecture](docs/ARCHITECTURE.md)
+- [Database Schema](docs/DATABASE.md)
+- [API Reference](docs/API.md)
+- [Development Guide](docs/DEVELOPMENT.md)
+
+---
+
+## 🤝 Contributing
+
+This is a personal project, but issues and PRs welcome!
+
+1. Fork the repo
+2. Create feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit changes (`git commit -m 'Add amazing feature'`)
+4. Push to branch (`git push origin feature/amazing-feature`)
+5. Open Pull Request
+
+---
+
+## 📝 License
+
+MIT License - See LICENSE file
+
+---
+
+## 🙋 Support
+
+- Issues: https://gitea.jeanlucmakiola.de/pantry-app/pantry/issues
+- Docs: https://gitea.jeanlucmakiola.de/pantry-app/pantry/wiki
+
+---
+
+**Version:** 0.1.0-alpha (MVP in progress)  
+**Status:** Week 2 complete, Week 3 in progress (14/34 issues done)

supabase/functions/product-lookup/README.md

@@ -0,0 +1,83 @@
+# Product Lookup Edge Function
+
+Fetches product data from Open Food Facts API by barcode and caches results in the database.
+
+## Endpoint
+
+`POST /functions/v1/product-lookup`
+
+## Request
+
+```json
+{
+  "barcode": "8000500310427"
+}
+```
+
+## Response
+
+### Success (200)
+
+```json
+{
+  "barcode": "8000500310427",
+  "name": "Nutella",
+  "brand": "Ferrero",
+  "quantity": "750g",
+  "image_url": "https://...",
+  "category": "spreads",
+  "cached": false
+}
+```
+
+### Not Found (404)
+
+```json
+{
+  "barcode": "1234567890123",
+  "name": "Unknown Product (1234567890123)",
+  "cached": false
+}
+```
+
+### Error (500)
+
+```json
+{
+  "error": "Error message",
+  "barcode": null,
+  "name": null
+}
+```
+
+## Features
+
+- ✅ Queries Open Food Facts API
+- ✅ Caches results in `products` table
+- ✅ Returns cached data for subsequent requests
+- ✅ Handles product not found gracefully
+- ✅ CORS enabled for frontend access
+
+## Environment Variables
+
+- `SUPABASE_URL`: Auto-injected by Supabase
+- `SUPABASE_SERVICE_ROLE_KEY`: Auto-injected by Supabase
+
+## Testing
+
+```bash
+# Local (with Supabase CLI)
+supabase functions serve product-lookup
+
+# Test request
+curl -X POST http://localhost:54321/functions/v1/product-lookup \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_ANON_KEY" \
+  -d '{"barcode":"8000500310427"}'
+```
+
+## Deployment
+
+```bash
+supabase functions deploy product-lookup
+```

supabase/functions/product-lookup/index.ts

@@ -0,0 +1,140 @@
+// Product Lookup Edge Function
+// Fetches product data from Open Food Facts API by barcode
+
+import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+
+interface ProductData {
+  barcode: string
+  name: string
+  brand?: string
+  quantity?: string
+  image_url?: string
+  category?: string
+  cached?: boolean
+}
+
+serve(async (req) => {
+  // Handle CORS preflight
+  if (req.method === 'OPTIONS') {
+    return new Response('ok', { headers: corsHeaders })
+  }
+
+  try {
+    const { barcode } = await req.json()
+
+    if (!barcode) {
+      throw new Error('Barcode is required')
+    }
+
+    // Initialize Supabase client
+    const supabaseUrl = Deno.env.get('SUPABASE_URL')!
+    const supabaseKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+    const supabase = createClient(supabaseUrl, supabaseKey)
+
+    // Check cache first (products table can store known products)
+    const { data: cachedProduct } = await supabase
+      .from('products')
+      .select('*')
+      .eq('barcode', barcode)
+      .single()
+
+    if (cachedProduct) {
+      console.log(`Cache HIT for barcode: ${barcode}`)
+      return new Response(
+        JSON.stringify({
+          barcode: cachedProduct.barcode,
+          name: cachedProduct.name,
+          brand: cachedProduct.brand,
+          quantity: cachedProduct.quantity,
+          image_url: cachedProduct.image_url,
+          category: cachedProduct.category,
+          cached: true,
+        } as ProductData),
+        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+      )
+    }
+
+    console.log(`Cache MISS for barcode: ${barcode}, fetching from Open Food Facts...`)
+
+    // Fetch from Open Food Facts
+    const offResponse = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${barcode}.json`,
+      {
+        headers: {
+          'User-Agent': 'Pantry/1.0 (https://github.com/pantry-app/pantry)',
+        },
+      }
+    )
+
+    if (!offResponse.ok) {
+      throw new Error(`Open Food Facts API error: ${offResponse.status}`)
+    }
+
+    const offData = await offResponse.json()
+
+    if (offData.status !== 1 || !offData.product) {
+      // Product not found in Open Food Facts
+      return new Response(
+        JSON.stringify({
+          barcode,
+          name: `Unknown Product (${barcode})`,
+          cached: false,
+        } as ProductData),
+        { 
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          status: 404
+        }
+      )
+    }
+
+    const product = offData.product
+
+    // Extract relevant data
+    const productData: ProductData = {
+      barcode,
+      name: product.product_name || product.generic_name || `Product ${barcode}`,
+      brand: product.brands || undefined,
+      quantity: product.quantity || undefined,
+      image_url: product.image_url || product.image_front_url || undefined,
+      category: product.categories || undefined,
+      cached: false,
+    }
+
+    // Cache the product in our database (upsert)
+    await supabase.from('products').upsert({
+      barcode: productData.barcode,
+      name: productData.name,
+      brand: productData.brand,
+      quantity: productData.quantity,
+      image_url: productData.image_url,
+      category: productData.category,
+    }, { onConflict: 'barcode' })
+
+    console.log(`Successfully fetched and cached product: ${productData.name}`)
+
+    return new Response(
+      JSON.stringify(productData),
+      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+    )
+
+  } catch (error) {
+    console.error('Error in product-lookup:', error)
+    return new Response(
+      JSON.stringify({ 
+        error: error instanceof Error ? error.message : 'Unknown error',
+        barcode: null,
+        name: null,
+      }),
+      { 
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+        status: 500
+      }
+    )
+  }
+})

supabase/migrations/003_helper_functions.sql

@@ -0,0 +1,251 @@
+-- Migration: Additional SQL Functions for Inventory Management
+-- Week 2: Helper functions for common queries
+
+-- Function: Get inventory items with full details (tags, product info, unit conversion)
+CREATE OR REPLACE FUNCTION get_inventory_details()
+RETURNS TABLE (
+  item_id UUID,
+  item_name TEXT,
+  quantity DECIMAL,
+  unit_abbreviation TEXT,
+  unit_name TEXT,
+  expiry_date DATE,
+  days_until_expiry INTEGER,
+  tags TEXT[],
+  product_brand TEXT,
+  product_image_url TEXT,
+  product_barcode TEXT,
+  created_at TIMESTAMPTZ,
+  updated_at TIMESTAMPTZ
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    i.id AS item_id,
+    i.name AS item_name,
+    i.quantity,
+    u.abbreviation AS unit_abbreviation,
+    u.name AS unit_name,
+    i.expiry_date,
+    (i.expiry_date - CURRENT_DATE) AS days_until_expiry,
+    COALESCE(ARRAY_AGG(DISTINCT t.name) FILTER (WHERE t.name IS NOT NULL), '{}') AS tags,
+    p.brand AS product_brand,
+    p.image_url AS product_image_url,
+    p.barcode AS product_barcode,
+    i.created_at,
+    i.updated_at
+  FROM inventory_items i
+    JOIN units u ON i.unit_id = u.id
+    LEFT JOIN products p ON i.product_id = p.id
+    LEFT JOIN item_tags it ON i.id = it.item_id
+    LEFT JOIN tags t ON it.tag_id = t.id
+  GROUP BY 
+    i.id, i.name, i.quantity, u.abbreviation, u.name, 
+    i.expiry_date, p.brand, p.image_url, p.barcode, 
+    i.created_at, i.updated_at
+  ORDER BY i.created_at DESC;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION get_inventory_details() IS 'Returns all inventory items with denormalized data for display';
+
+-- Function: Get items expiring soon
+CREATE OR REPLACE FUNCTION get_expiring_items(days_ahead INTEGER DEFAULT 7)
+RETURNS TABLE (
+  item_id UUID,
+  item_name TEXT,
+  quantity DECIMAL,
+  unit_abbreviation TEXT,
+  expiry_date DATE,
+  days_until_expiry INTEGER,
+  tags TEXT[]
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    i.id AS item_id,
+    i.name AS item_name,
+    i.quantity,
+    u.abbreviation AS unit_abbreviation,
+    i.expiry_date,
+    (i.expiry_date - CURRENT_DATE) AS days_until_expiry,
+    COALESCE(ARRAY_AGG(DISTINCT t.name) FILTER (WHERE t.name IS NOT NULL), '{}') AS tags
+  FROM inventory_items i
+    JOIN units u ON i.unit_id = u.id
+    LEFT JOIN item_tags it ON i.id = it.item_id
+    LEFT JOIN tags t ON it.tag_id = t.id
+  WHERE 
+    i.expiry_date IS NOT NULL
+    AND i.expiry_date <= CURRENT_DATE + MAKE_INTERVAL(days => days_ahead)
+  GROUP BY i.id, i.name, i.quantity, u.abbreviation, i.expiry_date
+  ORDER BY i.expiry_date ASC;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION get_expiring_items(INTEGER) IS 'Returns items expiring within specified days (default 7)';
+
+-- Function: Get items by tag
+CREATE OR REPLACE FUNCTION get_items_by_tag(tag_name TEXT)
+RETURNS TABLE (
+  item_id UUID,
+  item_name TEXT,
+  quantity DECIMAL,
+  unit_abbreviation TEXT,
+  expiry_date DATE,
+  created_at TIMESTAMPTZ
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    i.id AS item_id,
+    i.name AS item_name,
+    i.quantity,
+    u.abbreviation AS unit_abbreviation,
+    i.expiry_date,
+    i.created_at
+  FROM inventory_items i
+    JOIN units u ON i.unit_id = u.id
+    JOIN item_tags it ON i.id = it.item_id
+    JOIN tags t ON it.tag_id = t.id
+  WHERE t.name ILIKE tag_name
+  ORDER BY i.created_at DESC;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION get_items_by_tag(TEXT) IS 'Returns all items with specified tag (case-insensitive)';
+
+-- Function: Get low stock items (quantity <= threshold)
+CREATE OR REPLACE FUNCTION get_low_stock_items(threshold DECIMAL DEFAULT 1.0)
+RETURNS TABLE (
+  item_id UUID,
+  item_name TEXT,
+  quantity DECIMAL,
+  unit_abbreviation TEXT,
+  tags TEXT[]
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    i.id AS item_id,
+    i.name AS item_name,
+    i.quantity,
+    u.abbreviation AS unit_abbreviation,
+    COALESCE(ARRAY_AGG(DISTINCT t.name) FILTER (WHERE t.name IS NOT NULL), '{}') AS tags
+  FROM inventory_items i
+    JOIN units u ON i.unit_id = u.id
+    LEFT JOIN item_tags it ON i.id = it.item_id
+    LEFT JOIN tags t ON it.tag_id = t.id
+  WHERE i.quantity <= threshold
+  GROUP BY i.id, i.name, i.quantity, u.abbreviation
+  ORDER BY i.quantity ASC, i.name ASC;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION get_low_stock_items(DECIMAL) IS 'Returns items with quantity at or below threshold';
+
+-- Function: Update item quantity (consume or restock)
+CREATE OR REPLACE FUNCTION update_item_quantity(
+  item_uuid UUID,
+  quantity_change DECIMAL,
+  delete_if_zero BOOLEAN DEFAULT TRUE
+)
+RETURNS BOOLEAN AS $$
+DECLARE
+  new_quantity DECIMAL;
+BEGIN
+  -- Calculate new quantity
+  SELECT quantity + quantity_change INTO new_quantity
+  FROM inventory_items
+  WHERE id = item_uuid;
+
+  IF new_quantity IS NULL THEN
+    RETURN FALSE;  -- Item not found
+  END IF;
+
+  -- Delete if zero and flag is set
+  IF new_quantity <= 0 AND delete_if_zero THEN
+    DELETE FROM inventory_items WHERE id = item_uuid;
+    RETURN TRUE;
+  END IF;
+
+  -- Update quantity (ensure non-negative)
+  UPDATE inventory_items
+  SET quantity = GREATEST(new_quantity, 0),
+      updated_at = NOW()
+  WHERE id = item_uuid;
+
+  RETURN TRUE;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION update_item_quantity(UUID, DECIMAL, BOOLEAN) IS 'Updates item quantity (positive for restock, negative for consume). Optionally deletes if zero.';
+
+-- Function: Get inventory statistics
+CREATE OR REPLACE FUNCTION get_inventory_stats()
+RETURNS TABLE (
+  total_items BIGINT,
+  total_unique_products BIGINT,
+  items_expiring_week BIGINT,
+  items_expired BIGINT,
+  total_tags_used BIGINT
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    COUNT(DISTINCT i.id) AS total_items,
+    COUNT(DISTINCT i.product_id) FILTER (WHERE i.product_id IS NOT NULL) AS total_unique_products,
+    COUNT(i.id) FILTER (
+      WHERE i.expiry_date IS NOT NULL 
+      AND i.expiry_date BETWEEN CURRENT_DATE AND CURRENT_DATE + INTERVAL '7 days'
+    ) AS items_expiring_week,
+    COUNT(i.id) FILTER (
+      WHERE i.expiry_date IS NOT NULL 
+      AND i.expiry_date < CURRENT_DATE
+    ) AS items_expired,
+    COUNT(DISTINCT it.tag_id) AS total_tags_used
+  FROM inventory_items i
+    LEFT JOIN item_tags it ON i.id = it.item_id;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION get_inventory_stats() IS 'Returns summary statistics for the entire inventory';
+
+-- Function: Search inventory (full-text search on items and products)
+CREATE OR REPLACE FUNCTION search_inventory(search_query TEXT)
+RETURNS TABLE (
+  item_id UUID,
+  item_name TEXT,
+  quantity DECIMAL,
+  unit_abbreviation TEXT,
+  product_brand TEXT,
+  tags TEXT[],
+  relevance REAL
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    i.id AS item_id,
+    i.name AS item_name,
+    i.quantity,
+    u.abbreviation AS unit_abbreviation,
+    p.brand AS product_brand,
+    COALESCE(ARRAY_AGG(DISTINCT t.name) FILTER (WHERE t.name IS NOT NULL), '{}') AS tags,
+    ts_rank(
+      to_tsvector('english', i.name || ' ' || COALESCE(p.brand, '') || ' ' || COALESCE(p.name, '')),
+      plainto_tsquery('english', search_query)
+    ) AS relevance
+  FROM inventory_items i
+    JOIN units u ON i.unit_id = u.id
+    LEFT JOIN products p ON i.product_id = p.id
+    LEFT JOIN item_tags it ON i.id = it.item_id
+    LEFT JOIN tags t ON it.tag_id = t.id
+  WHERE 
+    to_tsvector('english', i.name || ' ' || COALESCE(p.brand, '') || ' ' || COALESCE(p.name, ''))
+    @@ plainto_tsquery('english', search_query)
+  GROUP BY i.id, i.name, i.quantity, u.abbreviation, p.brand, p.name
+  ORDER BY relevance DESC, i.created_at DESC
+  LIMIT 50;
+END;
+$$ LANGUAGE plpgsql;
+
+COMMENT ON FUNCTION search_inventory(TEXT) IS 'Full-text search across inventory items and products';

supabase/migrations/004_seed_units.sql

@@ -0,0 +1,37 @@
+-- Migration: Seed Default Units
+-- Week 2: Pre-populate common measurement units with conversions
+
+-- Weight units (metric base: gram)
+INSERT INTO units (id, name, abbreviation, unit_type, base_unit_id, conversion_factor, is_default, created_by) VALUES
+  ('f47ac10b-58cc-4372-a567-0e02b2c3d479', 'Gram', 'g', 'weight', NULL, 1.0, TRUE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440001', 'Kilogram', 'kg', 'weight', 'f47ac10b-58cc-4372-a567-0e02b2c3d479', 1000.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440002', 'Milligram', 'mg', 'weight', 'f47ac10b-58cc-4372-a567-0e02b2c3d479', 0.001, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440003', 'Pound', 'lb', 'weight', 'f47ac10b-58cc-4372-a567-0e02b2c3d479', 453.592, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440004', 'Ounce', 'oz', 'weight', 'f47ac10b-58cc-4372-a567-0e02b2c3d479', 28.3495, FALSE, NULL);
+
+-- Volume units (metric base: milliliter)
+INSERT INTO units (id, name, abbreviation, unit_type, base_unit_id, conversion_factor, is_default, created_by) VALUES
+  ('550e8400-e29b-41d4-a716-446655440010', 'Milliliter', 'mL', 'volume', NULL, 1.0, TRUE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440011', 'Liter', 'L', 'volume', '550e8400-e29b-41d4-a716-446655440010', 1000.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440012', 'Centiliter', 'cL', 'volume', '550e8400-e29b-41d4-a716-446655440010', 10.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440013', 'Deciliter', 'dL', 'volume', '550e8400-e29b-41d4-a716-446655440010', 100.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440014', 'Cup', 'cup', 'volume', '550e8400-e29b-41d4-a716-446655440010', 236.588, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440015', 'Tablespoon', 'tbsp', 'volume', '550e8400-e29b-41d4-a716-446655440010', 14.7868, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440016', 'Teaspoon', 'tsp', 'volume', '550e8400-e29b-41d4-a716-446655440010', 4.92892, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440017', 'Fluid Ounce', 'fl oz', 'volume', '550e8400-e29b-41d4-a716-446655440010', 29.5735, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440018', 'Gallon', 'gal', 'volume', '550e8400-e29b-41d4-a716-446655440010', 3785.41, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440019', 'Quart', 'qt', 'volume', '550e8400-e29b-41d4-a716-446655440010', 946.353, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440020', 'Pint', 'pt', 'volume', '550e8400-e29b-41d4-a716-446655440010', 473.176, FALSE, NULL);
+
+-- Count units (no conversions, each is independent)
+INSERT INTO units (id, name, abbreviation, unit_type, base_unit_id, conversion_factor, is_default, created_by) VALUES
+  ('550e8400-e29b-41d4-a716-446655440030', 'Piece', 'pc', 'count', NULL, 1.0, TRUE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440031', 'Dozen', 'doz', 'count', '550e8400-e29b-41d4-a716-446655440030', 12.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440032', 'Package', 'pkg', 'count', NULL, 1.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440033', 'Bottle', 'btl', 'count', NULL, 1.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440034', 'Can', 'can', 'count', NULL, 1.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440035', 'Jar', 'jar', 'count', NULL, 1.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440036', 'Box', 'box', 'count', NULL, 1.0, FALSE, NULL),
+  ('550e8400-e29b-41d4-a716-446655440037', 'Bag', 'bag', 'count', NULL, 1.0, FALSE, NULL);
+
+COMMENT ON TABLE units IS 'Measurement units with 30 common presets covering metric, imperial, and count units';

supabase/migrations/005_seed_tags.sql

@@ -0,0 +1,49 @@
+-- Migration: Seed Default Tags
+-- Week 2: Pre-populate common organizational tags
+
+-- Position Tags (where items are stored)
+INSERT INTO tags (id, name, category, icon, color, created_by) VALUES
+  ('650e8400-e29b-41d4-a716-446655440001', 'Fridge', 'position', '🧊', '#3b82f6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440002', 'Freezer', 'position', '❄️', '#06b6d4', NULL),
+  ('650e8400-e29b-41d4-a716-446655440003', 'Pantry', 'position', '🗄️', '#8b5cf6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440004', 'Cabinet', 'position', '🚪', '#6b7280', NULL),
+  ('650e8400-e29b-41d4-a716-446655440005', 'Countertop', 'position', '🍽️', '#f59e0b', NULL),
+  ('650e8400-e29b-41d4-a716-446655440006', 'Cellar', 'position', '🏚️', '#78350f', NULL);
+
+-- Type Tags (food categories)
+INSERT INTO tags (id, name, category, icon, color, created_by) VALUES
+  ('650e8400-e29b-41d4-a716-446655440010', 'Dairy', 'type', '🧀', '#fbbf24', NULL),
+  ('650e8400-e29b-41d4-a716-446655440011', 'Meat', 'type', '🥩', '#ef4444', NULL),
+  ('650e8400-e29b-41d4-a716-446655440012', 'Fish', 'type', '🐟', '#3b82f6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440013', 'Vegetables', 'type', '🥬', '#22c55e', NULL),
+  ('650e8400-e29b-41d4-a716-446655440014', 'Fruits', 'type', '🍎', '#f97316', NULL),
+  ('650e8400-e29b-41d4-a716-446655440015', 'Grains', 'type', '🌾', '#eab308', NULL),
+  ('650e8400-e29b-41d4-a716-446655440016', 'Legumes', 'type', '🫘', '#84cc16', NULL),
+  ('650e8400-e29b-41d4-a716-446655440017', 'Condiments', 'type', '🧂', '#ef4444', NULL),
+  ('650e8400-e29b-41d4-a716-446655440018', 'Snacks', 'type', '🍿', '#f97316', NULL),
+  ('650e8400-e29b-41d4-a716-446655440019', 'Beverages', 'type', '🥤', '#06b6d4', NULL),
+  ('650e8400-e29b-41d4-a716-446655440020', 'Baking', 'type', '🧁', '#ec4899', NULL),
+  ('650e8400-e29b-41d4-a716-446655440021', 'Spices', 'type', '🌶️', '#dc2626', NULL),
+  ('650e8400-e29b-41d4-a716-446655440022', 'Canned', 'type', '🥫', '#71717a', NULL),
+  ('650e8400-e29b-41d4-a716-446655440023', 'Frozen', 'type', '🧊', '#06b6d4', NULL);
+
+-- Dietary Tags
+INSERT INTO tags (id, name, category, icon, color, created_by) VALUES
+  ('650e8400-e29b-41d4-a716-446655440030', 'Vegan', 'dietary', '🌱', '#22c55e', NULL),
+  ('650e8400-e29b-41d4-a716-446655440031', 'Vegetarian', 'dietary', '🥕', '#84cc16', NULL),
+  ('650e8400-e29b-41d4-a716-446655440032', 'Gluten-Free', 'dietary', '🌾', '#eab308', NULL),
+  ('650e8400-e29b-41d4-a716-446655440033', 'Lactose-Free', 'dietary', '🥛', '#60a5fa', NULL),
+  ('650e8400-e29b-41d4-a716-446655440034', 'Organic', 'dietary', '♻️', '#10b981', NULL),
+  ('650e8400-e29b-41d4-a716-446655440035', 'Low-Carb', 'dietary', '🥗', '#22c55e', NULL),
+  ('650e8400-e29b-41d4-a716-446655440036', 'Kosher', 'dietary', '✡️', '#3b82f6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440037', 'Halal', 'dietary', '☪️', '#22c55e', NULL);
+
+-- Custom/Workflow Tags
+INSERT INTO tags (id, name, category, icon, color, created_by) VALUES
+  ('650e8400-e29b-41d4-a716-446655440040', 'Low Stock', 'custom', '⚠️', '#ef4444', NULL),
+  ('650e8400-e29b-41d4-a716-446655440041', 'To Buy', 'custom', '🛒', '#3b82f6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440042', 'Meal Prep', 'custom', '🍱', '#8b5cf6', NULL),
+  ('650e8400-e29b-41d4-a716-446655440043', 'Leftovers', 'custom', '♻️', '#f59e0b', NULL),
+  ('650e8400-e29b-41d4-a716-446655440044', 'Opening Soon', 'custom', '📆', '#f97316', NULL);
+
+COMMENT ON TABLE tags IS 'Pre-populated with 33 common tags across position, type, dietary, and workflow categories';