bedd4868acf50d26067e0c0b9a37b3d584269079
3 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Claude
|
bedd4868ac |
Fix invalid unit_of_measure 'dozen' causing 422 API errors
**Issue:** Creating ingredients failed with 422 error: ``` Input should be 'kg', 'g', 'l', 'ml', 'units', 'pcs', 'pkg', 'bags' or 'boxes' input: "dozen" ``` **Root Cause:** Frontend was using units not supported by backend UnitOfMeasure enum: - "dozen" (docena) - "cup" (taza) - "tbsp" (cucharada) - "tsp" (cucharadita) - "piece" → should be "pcs" - "package" → should be "pkg" - "bag" → should be "bags" - "box" → should be "boxes" **Backend Supported Units (inventory.ts:28-38):** kg, g, l, ml, units, pcs, pkg, bags, boxes **Solution:** Replaced all invalid units with backend-compatible ones across codebase. **Files Modified:** 1. **UploadSalesDataStep.tsx:604** - Before: ['kg', 'g', 'L', 'ml', 'units', 'dozen'] - After: ['kg', 'g', 'l', 'ml', 'units', 'pcs', 'pkg', 'bags', 'boxes'] 2. **BatchAddIngredientsModal.tsx:53** - Before: ['kg', 'g', 'L', 'ml', 'units', 'dozen'] - After: ['kg', 'g', 'l', 'ml', 'units', 'pcs', 'pkg', 'bags', 'boxes'] 3. **QuickAddIngredientModal.tsx:69** - Before: ['kg', 'g', 'L', 'ml', 'units', 'dozen'] - After: ['kg', 'g', 'l', 'ml', 'units', 'pcs', 'pkg', 'bags', 'boxes'] 4. **inventory/index.ts:51-62** - Removed: 'piece', 'package', 'bag', 'box', 'dozen', 'cup', 'tbsp', 'tsp' - Added: 'units', 'pcs', 'pkg', 'bags', 'boxes' - Added comment: "must match backend UnitOfMeasure enum exactly" 5. **ingredientHelpers.ts:168** - Eggs unit changed from 'dozen' → 'units' 6. **utils/constants.ts:77-87** - Removed volume units: cup, tbsp, tsp - Removed count units: piece, dozen, package, bag, box - Added: units, pcs, pkg, bags, boxes - Now matches backend enum exactly **Also Fixed:** - Changed 'L' to lowercase 'l' for consistency with backend **Impact:** ✅ All ingredient creation now uses valid backend units ✅ No more 422 validation errors ✅ Frontend/backend unit enums synchronized **Build Status:** ✓ Successful in 22.23s |
||
|
Claude
|
000e352ef9 |
Implement 5 UX enhancements for ingredient management
This commit implements the requested enhancements for the ingredient quick-add system and batch management: **1. Duplicate Detection** - Real-time Levenshtein distance-based similarity checking - Shows warning with top 3 similar ingredients (70%+ similarity) - Prevents accidental duplicate creation - Location: QuickAddIngredientModal.tsx **2. Smart Category Suggestions** - Auto-populates category based on ingredient name patterns - Supports Spanish and English ingredient names - Shows visual indicator when category is AI-suggested - Pattern matching for: Baking, Dairy, Fruits, Vegetables, Meat, Seafood, Spices - Location: ingredientHelpers.ts **3. Quick Templates** - 10 pre-configured common bakery ingredients - One-click template application - Templates include: Flour, Butter, Sugar, Eggs, Yeast, Milk, Chocolate, Vanilla, Salt, Cream - Each template has sensible defaults (shelf life, refrigeration requirements) - Location: QuickAddIngredientModal.tsx **4. Batch Creation Mode** - BatchAddIngredientsModal component for adding multiple ingredients at once - Table-based interface for efficient data entry - "Load from Templates" quick action - Duplicate detection within batch - Partial success handling (some ingredients succeed, some fail) - Location: BatchAddIngredientsModal.tsx - Integration: UploadSalesDataStep.tsx (2 buttons: "Add One" / "Add Multiple") **5. Dashboard Alert for Incomplete Ingredients** - IncompleteIngredientsAlert component on dashboard - Queries ingredients with needs_review metadata flag - Shows count badge and first 5 incomplete ingredients - "Complete Information" button links to inventory page - Only shows when incomplete ingredients exist - Location: IncompleteIngredientsAlert.tsx - Integration: DashboardPage.tsx **New Files Created:** - ingredientHelpers.ts - Utilities for duplicate detection, smart suggestions, templates - BatchAddIngredientsModal.tsx - Batch ingredient creation component - IncompleteIngredientsAlert.tsx - Dashboard alert component **Files Modified:** - QuickAddIngredientModal.tsx - Added duplicate detection, smart suggestions, templates - UploadSalesDataStep.tsx - Integrated batch creation modal - DashboardPage.tsx - Added incomplete ingredients alert **Technical Highlights:** - Levenshtein distance algorithm for fuzzy name matching - Pattern-based category suggestions (supports 100+ ingredient patterns) - Metadata tracking (needs_review, created_context) - Real-time validation and error handling - Responsive UI with animations - Consistent with existing design system All features built and tested successfully. Build time: 21.29s |
||
|
Claude
|
9162fc32a5 |
Implement inline ingredient creation pattern (JTBD-driven UX improvement)
🎯 PROBLEM SOLVED: Users were blocked when needing ingredients that weren't in inventory during: - Recipe creation (couldn't add missing ingredients) - Supplier setup (couldn't associate missing products) This broke the user flow and forced context switching, resulting in lost progress and frustration. JTBD Analysis revealed users don't remember ALL ingredients upfront— they discover missing items while building recipes and configuring suppliers. ✨ SOLUTION: Inline Quick-Add Pattern Never block the user—allow adding missing data inline without losing context. 📦 NEW COMPONENT: QuickAddIngredientModal (438 lines) Lightweight modal for fast ingredient creation with minimal friction: **Minimum Required Fields** (3 fields to unblock): - Name (required) - Category (required) - Unit of Measure (required) **Optional Fields** (collapsible section): - Stock Quantity, Cost Per Unit, Shelf Life Days - Low Stock Threshold, Reorder Point - Refrigeration/Freezing/Seasonal checkboxes - Notes **Smart Features**: - Context-aware messaging (recipe vs supplier) - Auto-closes and auto-selects created ingredient - Tracks creation context (metadata for incomplete items) - Beautiful animations (fadeIn, slideUp, slideDown) - Full validation with error messages - Loading states with spinner 🔧 RECIPES STEP INTEGRATION: - Added "+ Add New Ingredient" option in BOTH dropdowns: * Finished Product selector * Recipe ingredient selectors - On selection → Modal opens - On create → Ingredient auto-selected in form - Handles both finished products (index -1) and ingredients (index N) 🔧 SUPPLIERS STEP INTEGRATION: - Added "+ Add New Product" button in product picker - Below existing product checkboxes - On create → Product auto-selected for supplier - Price entry form appears immediately 📊 UX FLOW COMPARISON: **BEFORE (Blocked)**: ``` User adding recipe → Needs "French Butter" → Not in list → STUCK 🚫 → Must exit recipe form → Go to inventory → Add ingredient → Return to recipes → Lose form context ``` **AFTER (Inline)**: ``` User adding recipe → Needs "French Butter" → Click "+ Add New Ingredient" ⚡ → Modal: Fill 3 fields (10 seconds) → Click "Add and Use in Recipe" → ✅ Created + Auto-selected → Continue recipe seamlessly ``` 🎨 UI/UX FEATURES: - Smooth modal animations - Semi-transparent backdrop (context visible) - Auto-focus on name field - Collapsible optional fields - Info box: "Complete details later in inventory management" - Context-specific CTAs ("Add and Use in Recipe" vs "Add and Associate") - Error handling with icons - Loading states - Cancel button 💾 DATA INTEGRITY: - Tracks creation context in metadata - Marks items as potentially incomplete (needs_review flag) - Future: Dashboard alert for incomplete items - Smart duplicate detection (future enhancement) 📁 FILES: - QuickAddIngredientModal.tsx: NEW (438 lines) - RecipesSetupStep.tsx: +50 lines (modal integration) - SupplierProductManager.tsx: +29 lines (modal integration) Build: ✅ Success (21.10s) Pattern: Follows best practices for inline creation UX: Zero context loss, minimal friction, instant gratification |