Merge pull request 'feat: add low-stock dashboard alerts (#68)' (#74) from feature/issue-68-lowstock-dashboard into develop

✅ Self-review passed

Complete Coolify deployment documentation ready.

.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.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"]

app/components/inventory/AddItemForm.vue

@@ -57,6 +57,21 @@
         />
       </UFormGroup>
 
+      <!-- Low Stock Threshold -->
+      <UFormGroup 
+        label="Low Stock Alert" 
+        hint="Optional - Alert when quantity falls below this"
+      >
+        <UInput 
+          v-model.number="form.low_stock_threshold"
+          type="number"
+          min="0"
+          step="0.1"
+          placeholder="e.g. 2"
+          size="lg"
+        />
+      </UFormGroup>
+
       <!-- Notes -->
       <UFormGroup label="Notes" hint="Optional">
         <UTextarea
@@ -121,6 +136,7 @@ const form = reactive({
   quantity: 1,
   unit_id: '',
   expiry_date: '',
+  low_stock_threshold: null as number | null,
   notes: ''
 })
 
@@ -210,6 +226,7 @@ const handleSubmit = async () => {
     quantity: form.quantity,
     unit_id: form.unit_id,
     expiry_date: form.expiry_date || null,
+    low_stock_threshold: form.low_stock_threshold,
     notes: form.notes.trim() || null
   })
 

app/components/inventory/EditItemModal.vue

@@ -55,6 +55,21 @@
           />
         </UFormGroup>
 
+        <!-- Low Stock Threshold -->
+        <UFormGroup 
+          label="Low Stock Alert" 
+          hint="Optional - Alert when quantity falls below this"
+        >
+          <UInput 
+            v-model.number="form.low_stock_threshold"
+            type="number"
+            min="0"
+            step="0.1"
+            placeholder="e.g. 2"
+            size="lg"
+          />
+        </UFormGroup>
+
         <!-- Notes -->
         <UFormGroup label="Notes" hint="Optional">
           <UTextarea
@@ -112,6 +127,7 @@ const form = reactive({
   quantity: 1,
   unit_id: '',
   expiry_date: '',
+  low_stock_threshold: null as number | null,
   notes: ''
 })
 
@@ -136,6 +152,7 @@ watch(() => props.item, (newItem) => {
     form.quantity = Number(newItem.quantity)
     form.unit_id = newItem.unit_id
     form.expiry_date = newItem.expiry_date || ''
+    form.low_stock_threshold = newItem.low_stock_threshold || null
     form.notes = newItem.notes || ''
     isOpen.value = true
   }
@@ -168,6 +185,7 @@ const handleSubmit = async () => {
     quantity: form.quantity,
     unit_id: form.unit_id,
     expiry_date: form.expiry_date || null,
+    low_stock_threshold: form.low_stock_threshold,
     notes: form.notes.trim() || null
   })
 

app/components/inventory/ExpiryDashboard.vue

@@ -0,0 +1,130 @@
+<template>
+  <UCard v-if="expiringItems.length > 0">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5 text-orange-500" />
+          <h3 class="text-lg font-semibold">Items Expiring Soon</h3>
+        </div>
+        <UBadge color="orange" variant="soft">
+          {{ expiringItems.length }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in displayedItems"
+        :key="item.id"
+        class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors"
+        :class="getItemBgClass(item)"
+      >
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
+          <div class="flex items-center gap-2 text-sm">
+            <UBadge :color="getExpiryColor(item)" size="xs">
+              {{ getExpiryText(item) }}
+            </UBadge>
+            <span class="text-gray-600">
+              {{ item.quantity }} {{ item.unit?.abbreviation }}
+            </span>
+          </div>
+        </div>
+        
+        <UButton
+          size="xs"
+          color="gray"
+          variant="ghost"
+          icon="i-heroicons-arrow-right"
+          @click="$emit('view-item', item)"
+        />
+      </div>
+
+      <UButton
+        v-if="expiringItems.length > maxDisplay"
+        color="gray"
+        variant="soft"
+        size="sm"
+        class="w-full"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? 'Show Less' : `Show ${expiringItems.length - maxDisplay} More` }}
+      </UButton>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  items: any[]
+  maxDisplay?: number
+}>()
+
+const emit = defineEmits<{
+  'view-item': [item: any]
+}>()
+
+const expanded = ref(false)
+const maxDisplay = props.maxDisplay || 5
+
+// Filter and sort items by expiry
+const expiringItems = computed(() => {
+  const now = new Date()
+  const thirtyDaysFromNow = new Date()
+  thirtyDaysFromNow.setDate(now.getDate() + 30)
+
+  return props.items
+    .filter(item => {
+      if (!item.expiry_date) return false
+      const expiryDate = new Date(item.expiry_date)
+      return expiryDate <= thirtyDaysFromNow
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.expiry_date)
+      const dateB = new Date(b.expiry_date)
+      return dateA.getTime() - dateB.getTime()
+    })
+})
+
+const displayedItems = computed(() => {
+  if (expanded.value) {
+    return expiringItems.value
+  }
+  return expiringItems.value.slice(0, maxDisplay)
+})
+
+// Helper functions
+const getDaysUntilExpiry = (item: any) => {
+  if (!item.expiry_date) return null
+  const today = new Date()
+  const expiry = new Date(item.expiry_date)
+  return Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+}
+
+const getExpiryColor = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return 'gray'
+  if (days < 0) return 'red'
+  if (days <= 3) return 'orange'
+  if (days <= 7) return 'yellow'
+  return 'green'
+}
+
+const getExpiryText = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return 'No expiry'
+  if (days < 0) return `Expired ${Math.abs(days)}d ago`
+  if (days === 0) return 'Expires today'
+  if (days === 1) return 'Expires tomorrow'
+  if (days <= 7) return `${days} days left`
+  return `${days} days left`
+}
+
+const getItemBgClass = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return ''
+  if (days < 0) return 'bg-red-50'
+  if (days <= 3) return 'bg-orange-50'
+  return ''
+}
+</script>

app/components/inventory/InventoryCard.vue

@@ -72,32 +72,122 @@
           {{ expiryText }}
         </UBadge>
       </div>
+
+      <!-- Low Stock Warning -->
+      <div v-if="isLowStock" class="text-xs">
+        <UBadge 
+          color="orange"
+          variant="soft"
+          class="w-full justify-center"
+        >
+          <UIcon name="i-heroicons-exclamation-triangle" class="mr-1" />
+          Low stock ({{ item.quantity }}/{{ item.low_stock_threshold }})
+        </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 class="flex flex-col gap-2">
+        <!-- Quick Actions Row -->
+        <div class="grid grid-cols-2 gap-2">
+          <UButton 
+            icon="i-heroicons-arrow-trending-down"
+            size="sm"
+            color="orange"
+            variant="soft"
+            @click="handleConsume"
+            :disabled="item.quantity <= 0.01"
+          >
+            Consume
+          </UButton>
+          <UButton 
+            icon="i-heroicons-arrow-trending-up"
+            size="sm"
+            color="green"
+            variant="soft"
+            @click="showRestockModal = true"
+          >
+            Restock
+          </UButton>
+        </div>
+
+        <!-- Management Actions Row -->
+        <div class="grid grid-cols-2 gap-2">
+          <UButton 
+            icon="i-heroicons-pencil"
+            size="sm"
+            color="gray"
+            variant="soft"
+            @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>
       </div>
     </template>
+
+    <!-- Restock Modal -->
+    <UModal v-model="showRestockModal">
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Restock {{ item.name }}</h3>
+        </template>
+
+        <div class="space-y-4">
+          <div class="text-sm text-gray-600">
+            Current: <span class="font-semibold">{{ item.quantity }} {{ item.unit?.abbreviation }}</span>
+          </div>
+
+          <UFormGroup label="Amount to add">
+            <UInput
+              v-model.number="restockAmount"
+              type="number"
+              min="0.01"
+              step="0.01"
+              size="lg"
+              autofocus
+              placeholder="e.g. 5"
+            />
+          </UFormGroup>
+
+          <div v-if="restockAmount > 0" class="text-sm text-gray-600">
+            New total: <span class="font-semibold">{{ (Number(item.quantity) + Number(restockAmount)).toFixed(2) }} {{ item.unit?.abbreviation }}</span>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex gap-2">
+            <UButton
+              color="primary"
+              size="lg"
+              class="flex-1"
+              @click="handleRestock"
+              :disabled="!restockAmount || restockAmount <= 0"
+            >
+              Add {{ restockAmount || 0 }} {{ item.unit?.abbreviation }}
+            </UButton>
+            <UButton
+              color="gray"
+              size="lg"
+              variant="soft"
+              @click="showRestockModal = false"
+            >
+              Cancel
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
   </UCard>
 </template>
 
@@ -106,12 +196,17 @@ const props = defineProps<{
   item: any
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   edit: [item: any]
   delete: [id: string]
   'update-quantity': [id: string, change: number]
+  'consume': [id: string]
+  'restock': [id: string, amount: number]
 }>()
 
+const showRestockModal = ref(false)
+const restockAmount = ref<number>(1)
+
 // Calculate days until expiry
 const daysUntilExpiry = computed(() => {
   if (!props.item.expiry_date) return null
@@ -145,4 +240,30 @@ const expiryText = computed(() => {
   if (daysUntilExpiry.value === 1) return 'Expires tomorrow'
   return `Expires in ${daysUntilExpiry.value} days`
 })
+
+// Low stock detection
+const isLowStock = computed(() => {
+  if (!props.item.low_stock_threshold) return false
+  return Number(props.item.quantity) <= Number(props.item.low_stock_threshold)
+})
+
+// Quick actions
+const handleConsume = () => {
+  emit('update-quantity', props.item.id, -1)
+}
+
+const handleRestock = () => {
+  if (restockAmount.value && restockAmount.value > 0) {
+    emit('update-quantity', props.item.id, restockAmount.value)
+    showRestockModal.value = false
+    restockAmount.value = 1 // Reset for next time
+  }
+}
+
+// Reset restock amount when modal closes
+watch(showRestockModal, (isOpen) => {
+  if (!isOpen) {
+    restockAmount.value = 1
+  }
+})
 </script>

app/components/inventory/InventoryList.vue

@@ -60,6 +60,7 @@ const { getInventory, deleteInventoryItem, updateQuantity } = useInventory()
 const props = defineProps<{
   refresh?: boolean
   tagFilters?: string[]
+  searchQuery?: string
 }>()
 
 const emit = defineEmits<{
@@ -89,17 +90,27 @@ const loadInventory = async () => {
 
 // Computed filtered items
 const filteredItems = computed(() => {
-  if (!props.tagFilters || props.tagFilters.length === 0) {
-    return items.value
+  let result = items.value
+
+  // Filter by search query (case-insensitive)
+  if (props.searchQuery && props.searchQuery.trim()) {
+    const query = props.searchQuery.trim().toLowerCase()
+    result = result.filter(item => 
+      item.name.toLowerCase().includes(query)
+    )
   }
 
-  // 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
+  // Filter by tags
+  if (props.tagFilters && props.tagFilters.length > 0) {
+    result = result.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 itemTagIds = item.tags.map((t: any) => t.tag.id)
+      return props.tagFilters!.some(filterId => itemTagIds.includes(filterId))
+    })
+  }
+
+  return result
 })
 
 const handleDelete = async (id: string) => {

app/components/inventory/LowStockDashboard.vue

@@ -0,0 +1,110 @@
+<template>
+  <UCard v-if="lowStockItems.length > 0">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-arrow-trending-down" class="w-5 h-5 text-orange-500" />
+          <h3 class="text-lg font-semibold">Low Stock Items</h3>
+        </div>
+        <UBadge color="orange" variant="soft">
+          {{ lowStockItems.length }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in displayedItems"
+        :key="item.id"
+        class="flex items-center justify-between p-3 rounded-lg bg-orange-50 hover:bg-orange-100 transition-colors"
+      >
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
+          <div class="flex items-center gap-2 text-sm">
+            <UBadge color="orange" size="xs">
+              {{ item.quantity }}/{{ item.low_stock_threshold }} {{ item.unit?.abbreviation }}
+            </UBadge>
+            <span class="text-gray-600">
+              {{ getUrgencyText(item) }}
+            </span>
+          </div>
+        </div>
+        
+        <div class="flex gap-1">
+          <UButton
+            size="xs"
+            color="green"
+            variant="soft"
+            icon="i-heroicons-arrow-trending-up"
+            @click="$emit('restock-item', item)"
+          >
+            Restock
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-pencil"
+            @click="$emit('view-item', item)"
+          />
+        </div>
+      </div>
+
+      <UButton
+        v-if="lowStockItems.length > maxDisplay"
+        color="gray"
+        variant="soft"
+        size="sm"
+        class="w-full"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? 'Show Less' : `Show ${lowStockItems.length - maxDisplay} More` }}
+      </UButton>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  items: any[]
+  maxDisplay?: number
+}>()
+
+const emit = defineEmits<{
+  'view-item': [item: any]
+  'restock-item': [item: any]
+}>()
+
+const expanded = ref(false)
+const maxDisplay = props.maxDisplay || 5
+
+// Filter and sort items by low stock urgency
+const lowStockItems = computed(() => {
+  return props.items
+    .filter(item => {
+      if (!item.low_stock_threshold) return false
+      return Number(item.quantity) <= Number(item.low_stock_threshold)
+    })
+    .sort((a, b) => {
+      // Sort by urgency: items closest to 0 first
+      const urgencyA = Number(a.quantity) / Number(a.low_stock_threshold)
+      const urgencyB = Number(b.quantity) / Number(b.low_stock_threshold)
+      return urgencyA - urgencyB
+    })
+})
+
+const displayedItems = computed(() => {
+  if (expanded.value) {
+    return lowStockItems.value
+  }
+  return lowStockItems.value.slice(0, maxDisplay)
+})
+
+// Helper function
+const getUrgencyText = (item: any) => {
+  const ratio = Number(item.quantity) / Number(item.low_stock_threshold)
+  if (ratio <= 0.25) return 'Critical'
+  if (ratio <= 0.5) return 'Very low'
+  return 'Low'
+}
+</script>

app/package.json

@@ -8,7 +8,8 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "generate:icons": "node scripts/generate-icons.js && node scripts/generate-screenshots.js"
+    "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",

app/pages/index.vue

@@ -33,9 +33,36 @@
       </div>
     </div>
 
-    <!-- Tag Filters -->
-    <UCard v-if="showFilters" class="mb-6">
-      <TagsTagFilter v-model="selectedTagFilters" />
+    <!-- Search & Filters -->
+    <UCard v-if="showFilters" class="mb-6 space-y-4">
+      <!-- Search Bar -->
+      <div>
+        <UFormGroup label="Search Items">
+          <UInput
+            v-model="searchQuery"
+            placeholder="Search by item name..."
+            icon="i-heroicons-magnifying-glass"
+            size="lg"
+            :ui="{ icon: { trailing: { pointer: '' } } }"
+          >
+            <template #trailing>
+              <UButton
+                v-if="searchQuery"
+                color="gray"
+                variant="link"
+                icon="i-heroicons-x-mark"
+                :padded="false"
+                @click="searchQuery = ''"
+              />
+            </template>
+          </UInput>
+        </UFormGroup>
+      </div>
+
+      <!-- Tag Filters -->
+      <div>
+        <TagsTagFilter v-model="selectedTagFilters" />
+      </div>
     </UCard>
 
     <!-- Add Item Form (Overlay) -->
@@ -56,11 +83,28 @@
       @updated="handleItemUpdated"
     />
 
+    <!-- Dashboard Cards -->
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+      <!-- Expiry Dashboard -->
+      <InventoryExpiryDashboard
+        :items="inventoryItems"
+        @view-item="editingItem = $event"
+      />
+
+      <!-- Low Stock Dashboard -->
+      <InventoryLowStockDashboard
+        :items="inventoryItems"
+        @view-item="editingItem = $event"
+        @restock-item="handleRestockFromDashboard"
+      />
+    </div>
+
     <!-- Inventory List -->
     <InventoryList
       ref="inventoryListRef"
       :refresh="refreshKey"
       :tag-filters="selectedTagFilters"
+      :search-query="searchQuery"
       @add-item="showAddForm = true"
       @edit-item="editingItem = $event"
     />
@@ -82,9 +126,22 @@ const refreshKey = ref(0)
 const inventoryListRef = ref()
 const prefilledData = ref<any>(null)
 const selectedTagFilters = ref<string[]>([])
+const searchQuery = ref('')
+const inventoryItems = ref<any[]>([])
+
+// Load inventory for dashboard
+const { getInventory } = useInventory()
+
+const loadInventoryData = async () => {
+  const { data } = await getInventory()
+  inventoryItems.value = data || []
+}
 
 // Handle scan-to-add flow (Issue #25)
-onMounted(() => {
+onMounted(async () => {
+  // Load inventory for dashboard
+  await loadInventoryData()
+
   if (route.query.action === 'add') {
     // Pre-fill data from query params (from scan)
     prefilledData.value = {
@@ -107,15 +164,22 @@ const handleCloseAddForm = () => {
   prefilledData.value = null
 }
 
-const handleItemAdded = (item: any) => {
+const handleItemAdded = async (item: any) => {
   showAddForm.value = false
   prefilledData.value = null
-  // Reload the inventory list
+  // Reload the inventory list and dashboard
   inventoryListRef.value?.reload()
+  await loadInventoryData()
 }
 
-const handleItemUpdated = (item: any) => {
+const handleItemUpdated = async (item: any) => {
   editingItem.value = null
   inventoryListRef.value?.reload()
+  await loadInventoryData()
+}
+
+const handleRestockFromDashboard = (item: any) => {
+  // Open edit modal with the item (user can use Restock button there)
+  editingItem.value = item
 }
 </script>

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()
+  }
+})

app/types/database.types.ts

@@ -26,6 +26,8 @@ export interface Database {
           quantity: number
           unit_id: string
           expiry_date: string | null
+          expires_at: string | null
+          low_stock_threshold: number | null
           notes: string | null
           added_by: string
           created_at: string
@@ -38,6 +40,8 @@ export interface Database {
           quantity: number
           unit_id: string
           expiry_date?: string | null
+          expires_at?: string | null
+          low_stock_threshold?: number | null
           notes?: string | null
           added_by: string
           created_at?: string
@@ -50,6 +54,8 @@ export interface Database {
           quantity?: number
           unit_id?: string
           expiry_date?: string | null
+          expires_at?: string | null
+          low_stock_threshold?: number | null
           notes?: string | null
           added_by?: string
           created_at?: string

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
+```

docs/COOLIFY_DEPLOYMENT.md

@@ -0,0 +1,376 @@
+# Coolify Deployment Guide
+
+## Prerequisites
+
+- Coolify instance running (self-hosted or cloud)
+- Gitea repository accessible to Coolify
+- Supabase project (cloud or self-hosted)
+- Domain name (optional, for production)
+
+## Deployment Steps
+
+### 1. Prepare Supabase
+
+#### Option A: Supabase Cloud
+
+1. Sign in to [supabase.com](https://supabase.com)
+2. Create new project (or use existing)
+3. Run migrations:
+   - Go to SQL Editor
+   - Copy/paste each file from `supabase/migrations/`
+   - Run in order: 001_, 002_, 003_, etc.
+4. Get credentials:
+   - Project Settings → API
+   - Copy Project URL
+   - Copy `anon` / `public` key
+
+#### Option B: Self-Hosted Supabase
+
+```bash
+cd supabase
+docker-compose up -d
+# Wait for services to start
+docker-compose ps
+```
+
+Migrations run automatically from `supabase/migrations/` directory.
+
+### 2. Add Resource in Coolify
+
+1. Log in to Coolify
+2. Click "New Resource"
+3. Select "Docker Compose"
+4. Choose deployment source:
+   - **Git Repository** (recommended)
+   - Public Git Repository
+   - Docker Image
+
+### 3. Configure Git Repository
+
+If using Git source:
+
+1. **Repository URL:** 
+   ```
+   https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
+   ```
+
+2. **Branch:** `main` (or `develop` for staging)
+
+3. **Docker Compose File:** `docker-compose.prod.yml`
+
+4. **Build Path:** Leave empty (uses root)
+
+### 4. Set Environment Variables
+
+In Coolify → Environment Variables, add:
+
+```bash
+# Required
+NUXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+
+# Optional
+NODE_ENV=production
+HOST=0.0.0.0
+PORT=3000
+```
+
+**Security Note:** Never commit `.env` files with real credentials!
+
+### 5. Configure Domain (Optional)
+
+1. In Coolify → Domains
+2. Add your domain: `pantry.yourdomain.com`
+3. Coolify auto-provisions SSL with Let's Encrypt
+4. DNS: Point A record to Coolify server IP
+
+### 6. Deploy
+
+1. Click "Deploy" button
+2. Watch build logs
+3. Wait for "Deployed successfully" message
+
+Expected deploy time: 2-5 minutes
+
+### 7. Verify Deployment
+
+#### Health Check
+
+```bash
+curl https://pantry.yourdomain.com/api/health
+```
+
+Expected response:
+```json
+{
+  "status": "ok",
+  "timestamp": "2026-02-25T00:00:00.000Z",
+  "uptime": 123.456
+}
+```
+
+#### PWA Check
+
+1. Visit app in browser
+2. Open DevTools → Application → Manifest
+3. Verify manifest loads
+4. Check Service Worker is registered
+
+#### Functionality Test
+
+- [ ] Homepage loads
+- [ ] Can sign up / sign in
+- [ ] Can view inventory
+- [ ] Can add item
+- [ ] PWA install prompt appears
+- [ ] Offline mode works
+
+## Troubleshooting
+
+### Build Fails
+
+**Check build logs in Coolify:**
+
+Common issues:
+- Missing dependencies → Check package.json
+- npm/node version mismatch → Use Node 20 Alpine
+- Out of memory → Increase Coolify resource limits
+
+### Container Won't Start
+
+**Check runtime logs in Coolify:**
+
+Common issues:
+- Missing environment variables
+- Port conflict (use 3000)
+- Supabase connection timeout
+
+### Supabase Connection Error
+
+1. Verify Supabase URL is correct (no trailing slash)
+2. Check anon key is valid
+3. Test Supabase API directly:
+   ```bash
+   curl https://your-project.supabase.co/rest/v1/
+   ```
+4. Check Supabase RLS policies allow access
+
+### SSL Certificate Issues
+
+Coolify should auto-provision Let's Encrypt cert:
+- Ensure domain points to correct IP
+- Check DNS propagation (can take 48h)
+- Verify port 80/443 open on firewall
+
+### App Loads but No Data
+
+1. Check browser console for errors
+2. Verify Supabase connection in Network tab
+3. Check RLS policies in Supabase
+4. Verify migrations ran successfully
+
+## Continuous Deployment
+
+### Auto-Deploy on Push
+
+1. In Coolify → Settings → Webhooks
+2. Copy webhook URL
+3. In Gitea → Repo → Settings → Webhooks
+4. Add webhook:
+   - URL: [Coolify webhook URL]
+   - Events: Push events
+   - Branch: main (or develop)
+
+Now every git push triggers auto-deployment!
+
+### Manual Deploy
+
+In Coolify interface:
+1. Click "Deploy Latest" button
+2. Or use Coolify API:
+   ```bash
+   curl -X POST https://coolify.example.com/api/deploy/[resource-id] \
+     -H "Authorization: Bearer [your-token]"
+   ```
+
+## Monitoring
+
+### View Logs
+
+Coolify Dashboard → Logs tab
+
+Real-time logs:
+```bash
+# If SSH access to Coolify host
+docker logs -f [container-name]
+```
+
+### Resource Usage
+
+Coolify shows:
+- CPU usage
+- Memory usage
+- Network traffic
+- Storage
+
+### Uptime Monitoring
+
+Recommended external services:
+- UptimeRobot (free tier)
+- BetterStack
+- Freshping
+
+Monitor: `https://pantry.yourdomain.com/api/health`
+
+## Rollback
+
+### To Previous Version
+
+1. In Coolify → Deployments
+2. Click on previous successful deployment
+3. Click "Redeploy"
+
+### Using Git Tags
+
+```bash
+# Tag current release
+git tag -a v0.1.0 -m "MVP Release"
+git push origin v0.1.0
+
+# Rollback by changing branch in Coolify
+# Or deploy specific tag
+```
+
+## Performance Optimization
+
+### Resource Limits
+
+In docker-compose.prod.yml:
+```yaml
+deploy:
+  resources:
+    limits:
+      memory: 512M
+      cpus: '1.0'
+```
+
+Adjust based on traffic.
+
+### CDN (Recommended)
+
+1. Add domain to Cloudflare
+2. Set DNS proxy (orange cloud)
+3. Enable caching rules
+4. Set SSL to "Full (strict)"
+
+**Result:** ~50% faster load times globally
+
+### Database Connection Pooling
+
+If self-hosting Supabase:
+- Use PgBouncer (included in Supabase)
+- Set max connections: 20-50
+
+## Security Checklist
+
+Before going live:
+
+- [ ] HTTPS enabled (automatic with Coolify)
+- [ ] Environment variables set (not in repo)
+- [ ] Supabase RLS policies enabled
+- [ ] Strong database passwords
+- [ ] Firewall configured (only 80/443 open)
+- [ ] Supabase auth configured
+- [ ] Regular backups enabled
+- [ ] Monitoring alerts set up
+
+## Backup Strategy
+
+### Database Backups
+
+**Supabase Cloud:** Automatic daily backups
+
+**Self-hosted:**
+```bash
+# Manual backup
+docker exec supabase-db pg_dump -U postgres > backup.sql
+
+# Automated (cron)
+0 2 * * * /path/to/backup-script.sh
+```
+
+### Volume Backups
+
+Coolify persistent volumes:
+```bash
+docker run --rm \
+  -v coolify_pantry_data:/data \
+  -v $(pwd):/backup \
+  ubuntu tar czf /backup/pantry-backup.tar.gz /data
+```
+
+## Staging Environment
+
+Recommended setup:
+
+**Production:**
+- Branch: `main`
+- Domain: `pantry.yourdomain.com`
+- Supabase: Production project
+
+**Staging:**
+- Branch: `develop`
+- Domain: `staging.pantry.yourdomain.com`
+- Supabase: Separate test project
+
+In Coolify, create two resources pointing to different branches.
+
+## Cost Estimate
+
+**Coolify (self-hosted):**
+- VPS: $5-10/month (Hetzner, Digital Ocean)
+- Domain: $10-15/year
+- **Total:** ~$8/month
+
+**Supabase Cloud:**
+- Free tier: 500MB database, 1GB file storage
+- Pro tier: $25/month (more resources)
+
+**Total Cost:** $8-33/month for full stack
+
+## Support
+
+**Coolify:**
+- Docs: https://coolify.io/docs
+- Discord: https://discord.gg/coolify
+
+**Pantry:**
+- Issues: https://gitea.jeanlucmakiola.de/pantry-app/pantry/issues
+- Discussions: TBD
+
+## Post-Deployment Checklist
+
+After first deployment:
+
+- [ ] Health check passes
+- [ ] Can access homepage
+- [ ] Can sign up / sign in
+- [ ] Can add inventory item
+- [ ] PWA installs correctly
+- [ ] Offline mode works
+- [ ] SSL certificate valid
+- [ ] Monitoring alerts configured
+- [ ] Backup strategy in place
+- [ ] Team notified of URL
+
+## Next Steps
+
+1. Run E2E tests (see E2E_TESTING.md)
+2. Monitor for 24-48 hours
+3. Announce to users
+4. Set up analytics (optional)
+5. Plan first iteration
+
+---
+
+**Congratulations! Your app is live! 🎉**

docs/DEPLOYMENT_CHECKLIST.md

@@ -0,0 +1,210 @@
+# Deployment Checklist
+
+Use this checklist to ensure a smooth deployment to production or staging.
+
+## Pre-Deployment
+
+### Code Quality
+- [ ] All tests passing (E2E_TESTING.md)
+- [ ] No critical bugs open
+- [ ] Code reviewed and approved
+- [ ] CHANGELOG.md updated
+- [ ] Version tagged in git
+
+### Database
+- [ ] Migrations tested locally
+- [ ] Migrations run on staging
+- [ ] Seed data prepared (if needed)
+- [ ] Backup created
+- [ ] RLS policies verified
+
+### Configuration
+- [ ] Environment variables documented
+- [ ] .env.production.example updated
+- [ ] Secrets not in repository
+- [ ] Docker files tested locally
+- [ ] Health check endpoint working
+
+### Documentation
+- [ ] DEPLOYMENT.md reviewed
+- [ ] README.md up to date
+- [ ] API changes documented
+- [ ] Known issues documented
+
+## Deployment
+
+### Coolify Setup
+- [ ] Resource created in Coolify
+- [ ] Git repository connected
+- [ ] Branch configured (main/develop)
+- [ ] docker-compose.prod.yml path set
+- [ ] Environment variables added
+- [ ] Domain configured (optional)
+- [ ] SSL enabled
+
+### Supabase Setup
+- [ ] Project created
+- [ ] Migrations run
+- [ ] RLS policies enabled
+- [ ] Auth providers configured
+- [ ] Storage buckets created
+- [ ] API keys copied
+
+### Build & Deploy
+- [ ] Triggered deployment
+- [ ] Build logs checked (no errors)
+- [ ] Container started successfully
+- [ ] Health check passes
+
+## Post-Deployment Verification
+
+### Health Checks
+- [ ] `/api/health` returns 200 OK
+- [ ] Homepage loads
+- [ ] Auth works (sign up/in)
+- [ ] Database connection works
+
+### PWA
+- [ ] Manifest loads correctly
+- [ ] Service worker registers
+- [ ] Install prompt appears
+- [ ] Offline mode works
+- [ ] Icons display correctly
+
+### Functionality
+- [ ] Can create account
+- [ ] Can sign in
+- [ ] Can add inventory item
+- [ ] Can edit item
+- [ ] Can delete item
+- [ ] Can add tags
+- [ ] Can scan barcode (if implemented)
+
+### Performance
+- [ ] Page load < 3s
+- [ ] Lighthouse score > 90 (PWA)
+- [ ] No console errors
+- [ ] No network errors
+
+### Cross-Browser
+- [ ] Chrome (desktop)
+- [ ] Firefox (desktop)
+- [ ] Safari (desktop)
+- [ ] Chrome (mobile)
+- [ ] Safari (iOS)
+
+## Monitoring
+
+### Setup
+- [ ] Uptime monitoring configured
+- [ ] Error tracking enabled (optional)
+- [ ] Log aggregation set up
+- [ ] Alerts configured
+- [ ] Metrics dashboard created (optional)
+
+### Checks
+- [ ] CPU usage normal
+- [ ] Memory usage normal
+- [ ] Disk space sufficient
+- [ ] No error spikes
+
+## Security
+
+### Verification
+- [ ] HTTPS enabled
+- [ ] SSL certificate valid
+- [ ] No credentials exposed
+- [ ] Firewall configured
+- [ ] Supabase RLS enabled
+- [ ] Strong admin passwords
+
+### Compliance
+- [ ] Privacy policy added (if required)
+- [ ] Terms of service added (if required)
+- [ ] Cookie notice (if applicable)
+- [ ] GDPR compliance (if EU users)
+
+## Communication
+
+### Team
+- [ ] Deployment announced
+- [ ] Access details shared
+- [ ] Rollback plan communicated
+- [ ] Support plan established
+
+### Users
+- [ ] Announcement prepared
+- [ ] Migration guide ready (if needed)
+- [ ] Support channels available
+- [ ] Feedback mechanism in place
+
+## Backup & Recovery
+
+### Backups
+- [ ] Database backup verified
+- [ ] Volume backup taken
+- [ ] Backup restore tested
+- [ ] Backup schedule configured
+
+### Disaster Recovery
+- [ ] Rollback plan documented
+- [ ] Emergency contacts listed
+- [ ] Recovery time objective (RTO) defined
+- [ ] Recovery point objective (RPO) defined
+
+## Post-Launch (24-48h)
+
+### Monitoring
+- [ ] Check logs for errors
+- [ ] Review uptime metrics
+- [ ] Analyze user behavior
+- [ ] Check resource usage
+
+### Optimization
+- [ ] Identify slow queries
+- [ ] Optimize heavy assets
+- [ ] Review caching strategy
+- [ ] Tune resource limits
+
+### Feedback
+- [ ] Collect user feedback
+- [ ] Log issues found
+- [ ] Prioritize fixes
+- [ ] Plan next iteration
+
+## Sign-Off
+
+**Deployed by:** ___________________  
+**Date:** ___________________  
+**Environment:** Production / Staging  
+**Version:** ___________________  
+**Status:** ✅ Success / ⚠️ Issues / ❌ Failed
+
+**Notes:**
+_____________________________________________
+_____________________________________________
+_____________________________________________
+
+**Next Review:** ___________________
+
+---
+
+## Rollback Criteria
+
+Trigger rollback if:
+- [ ] Critical bug discovered
+- [ ] Data loss occurring
+- [ ] Service unavailable > 15 min
+- [ ] Security vulnerability found
+- [ ] Performance degraded > 50%
+
+**Rollback Procedure:**
+1. In Coolify → Previous deployment → Redeploy
+2. Or: `git revert` and redeploy
+3. Notify team and users
+4. Investigate root cause
+5. Fix and redeploy
+
+---
+
+**Remember:** It's better to delay than to deploy broken code. Take your time with this checklist!

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).

supabase/migrations/006_add_expiry_lowstock.sql

@@ -0,0 +1,26 @@
+-- Migration: Add expiry date and low-stock threshold tracking
+-- Issues: #63 (expiry tracking), #67 (low-stock threshold)
+-- Created: 2026-02-25
+
+-- Note: expiry_date already exists as DATE type. Adding expires_at as TIMESTAMPTZ for consistency
+-- and low_stock_threshold for threshold tracking.
+
+-- Add expires_at column for precise expiry date/time tracking (complementing existing expiry_date)
+-- We'll keep both: expiry_date (DATE) for simple day-based expiry, expires_at (TIMESTAMPTZ) for precise tracking
+ALTER TABLE inventory_items
+ADD COLUMN expires_at TIMESTAMP WITH TIME ZONE DEFAULT NULL;
+
+-- Add low_stock_threshold column for low-stock alerts
+ALTER TABLE inventory_items
+ADD COLUMN low_stock_threshold NUMERIC(10,2) DEFAULT NULL;
+
+-- Add comments for documentation
+COMMENT ON COLUMN inventory_items.expires_at IS 'Optional precise expiration timestamp. Complements expiry_date for items needing time-specific expiry.';
+COMMENT ON COLUMN inventory_items.low_stock_threshold IS 'Minimum quantity threshold. Item is considered low-stock when quantity <= threshold. Null means no threshold set.';
+
+-- Create index for efficient expiry queries (finding items expiring soon)
+CREATE INDEX idx_inventory_items_expires_at ON inventory_items(expires_at) WHERE expires_at IS NOT NULL;
+
+-- Create index for efficient low-stock queries
+CREATE INDEX idx_inventory_items_low_stock ON inventory_items(quantity, low_stock_threshold) 
+WHERE low_stock_threshold IS NOT NULL;