Inventory Implementation Quick Reference

Inventory Implementation Quick Reference

Quick reference guide for implementing inventory improvements in the Shaker mobile app.

Priority Matrix

HIGH Priority (Implement First)

#	Feature	User Story	Effort	Impact
1	ProductLevel Value Object	Product Level Tracking	Medium	High
2	ProductBarcode Value Object	Barcode Scanning	Low	Medium
3	Ingredient Entity	Ingredient Mapping	High	High
4	Enhanced Product Level Display	Product Level Tracking	Medium	High
5	Quick Barcode Update Flow	Barcode Scanning	Medium	High
6	Shopping List → Inventory Integration	Shopping List Management	High	High
7	Ingredient Detail Screen	Ingredient Mapping	Medium	Medium
8	Quick Update Modal Component	Product Level Tracking	Low	High

MEDIUM Priority (Implement Second)

#	Feature	User Story	Effort	Impact
9	IngredientProfile for Flavor	Flavor Profiles	Medium	Medium
10	Product-Ingredient Mapping Interface	Ingredient Mapping	Medium	High
11	Enhanced Shopping List Editing	Shopping List Management	Medium	Medium
12	Inventory Search & Filter	General UX	Medium	High
13	Product Level Indicator Component	Product Level Tracking	Low	Medium
14	Ingredient Selector Component	Ingredient Mapping	Medium	Medium
15	Shopping List Item Editor	Shopping List Management	Low	Medium

LOW Priority (Nice to Have)

#	Feature	User Story	Effort	Impact
16	Product Tags Interface	Tagging System	Medium	Low
17	Batch Barcode Scanning	Barcode Scanning	High	Medium
18	Cost History Tracking	Shopping List Management	Medium	Low
19	Flavor Profile System	Flavor Profiles	High	Low
20	Product Substitution	Ingredient Mapping	High	Low
21	Export/Import	Data Portability	Medium	Low

File Locations

Screens to Modify

shaker/app/(tabs)/inventory/
├── index.tsx                    # Dashboard - Add quick actions
├── view-all.tsx                 # Add search/filter
├── inventory-items.tsx          # Add ProductLevelIndicator
├── [id].tsx                     # Enhanced product detail
├── add-product.tsx              # Add ingredient mapping
└── ingredients/
    ├── index.tsx                # NEW - Ingredient list
    └── [id].tsx                 # NEW - Ingredient detail

shaker/app/(tabs)/events/
├── shopping-list.tsx            # Enhance with editing
└── shopping-list-items.tsx      # Add inventory integration

Components to Create

shaker/components/
├── ProductLevelIndicator.tsx    # Visual level display
├── QuickUpdateModal.tsx         # Quick level update
├── IngredientSelector.tsx       # Ingredient autocomplete
└── ShoppingListItemEditor.tsx   # Edit shopping items

Data Models to Update

shaker/types/
├── product.ts                   # Add ProductLevel, ProductBarcode
├── ingredient.ts                # NEW - Ingredient types
└── shopping-list.ts             # Enhance ShoppingListItem

Code Snippets

ProductLevel Type

shaker/types/product.ts

export interface ProductLevel {
  currentAmount: number;      // ml or oz
  totalCapacity: number;      // ml or oz
  percentage: number;         // 0-100
  status: 'full' | 'high' | 'medium' | 'low' | 'empty';
  lastUpdated: string;        // ISO date
}

export interface ProductBarcode {
  code: string;
  type: 'UPC' | 'EAN' | 'QR' | 'CODE128';
  scannedDate?: string;
}

export interface Product {
  id: string;
  name: string;
  brand?: string;
  type: ProductType;
  volume: number;
  volumeUnit: string;
  currentLevel: ProductLevel;  // Changed from string
  barcode?: ProductBarcode;    // Changed from string
  ingredients: string[];       // NEW - Ingredient IDs
  // ... other fields
}

Ingredient Type

shaker/types/ingredient.ts

export type IngredientType =
  | 'spirit'
  | 'mixer'
  | 'modifier'
  | 'sweetener'
  | 'garnish'
  | 'bitters'
  | 'other';

export interface IngredientProfile {
  sweet: number;        // 0-10
  sour: number;
  bitter: number;
  umami: number;
  spicy: number;
  herbal: number;
  floral: number;
  fruity: number;
}

export interface Ingredient {
  id: string;
  name: string;
  type: IngredientType;
  category?: string;
  flavorProfile?: IngredientProfile;
  substitutes?: string[];      // Ingredient IDs
  products?: string[];         // Product IDs
  createdAt: string;
  updatedAt: string;
}

ProductLevelIndicator Component

shaker/components/ProductLevelIndicator.tsx

import { View, Text } from 'react-native';
import { ProductLevel } from '@/types/product';

interface Props {
  level: ProductLevel;
  variant?: 'bar' | 'bottle' | 'circle' | 'compact';
  size?: 'small' | 'medium' | 'large';
}

export function ProductLevelIndicator({ level, variant = 'bar', size = 'medium' }: Props) {
  const getColor = () => {
    if (level.percentage >= 75) return '#4CAF50';  // green
    if (level.percentage >= 50) return '#FFC107';  // yellow
    if (level.percentage >= 25) return '#FF9800';  // orange
    return '#F44336';  // red
  };

  if (variant === 'bar') {
    return (
      <View style={{ width: '100%', height: 8, backgroundColor: '#E0E0E0', borderRadius: 4 }}>
        <View
          style={{
            width: `${level.percentage}%`,
            height: '100%',
            backgroundColor: getColor(),
            borderRadius: 4
          }}
        />
      </View>
    );
  }

  // Other variants...
}

GraphQL Queries

Get Products with Ingredients

query GetProductsWithIngredients {
  products {
    id
    name
    brand
    type
    currentLevel {
      currentAmount
      totalCapacity
      percentage
      status
      lastUpdated
    }
    barcode {
      code
      type
    }
    ingredients {
      id
      name
      type
    }
  }
}

Update Product Level

mutation UpdateProductLevel($productId: ID!, $level: ProductLevelInput!) {
  updateProductLevel(productId: $productId, level: $level) {
    id
    currentLevel {
      percentage
      status
    }
  }
}

Map Product to Ingredient

mutation MapProductToIngredient($productId: ID!, $ingredientId: ID!) {
  mapProductToIngredient(productId: $productId, ingredientId: $ingredientId) {
    id
    ingredients {
      id
      name
    }
  }
}

Testing Checklist

Phase 1: Foundation

• Product can be created with ProductLevel object
• Product can be created with ProductBarcode object
• Ingredient can be created
• Product can be mapped to ingredient
• Product can be unmapped from ingredient
• Migration from old currentLevel string works

Phase 2: Product Level

• ProductLevelIndicator displays correctly
• Quick update modal works
• Barcode scan updates level
• Level colors match status
• Percentage calculation is accurate

Phase 3: Shopping List

• Can check off shopping list item
• Checking off prompts for product selection
• Selecting product updates inventory
• Can add custom items to shopping list
• Can edit quantities
• Can edit costs

Common Patterns

Calculating Product Level

function calculateProductLevel(currentAmount: number, totalCapacity: number): ProductLevel {
  const percentage = Math.round((currentAmount / totalCapacity) * 100);

  let status: ProductLevel['status'];
  if (percentage >= 90) status = 'full';
  else if (percentage >= 60) status = 'high';
  else if (percentage >= 30) status = 'medium';
  else if (percentage > 0) status = 'low';
  else status = 'empty';

  return {
    currentAmount,
    totalCapacity,
    percentage,
    status,
    lastUpdated: new Date().toISOString()
  };
}

Converting Legacy Data

function migrateLegacyLevel(oldLevel: string, volume: number): ProductLevel {
  const percentageMap: Record<string, number> = {
    'full': 100,
    '75': 75,
    '50': 50,
    '25': 25,
    'empty': 0
  };

  const percentage = percentageMap[oldLevel] || 100;
  const currentAmount = (volume * percentage) / 100;

  return calculateProductLevel(currentAmount, volume);
}

---

Last Updated: 2025-12-30
Related: Full Analysis