**Issue:** When clicking "Edit" on an ingredient in the list, the edit form
appeared at the bottom of the page after all ingredients, forcing users to
scroll down. This was poor UX especially with 10+ ingredients.
**Solution:** Moved edit form to appear inline directly below the ingredient
being edited.
**Changes Made:**
1. **Inline Edit Form Display**
- Edit form now renders inside the ingredient map loop
- Shows conditionally when `editingId === item.id`
- Appears immediately below the specific ingredient being edited
- Location: frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx:834-1029
2. **Hide Ingredient Card While Editing**
- Ingredient card (with stock lots) hidden when that ingredient is being edited
- Condition: `{editingId !== item.id && (...)}`
- Prevents duplication of information
- Location: lines 629-832
3. **Separate Add Manually Form**
- Bottom form now only shows when adding new ingredient (not editing)
- Condition changed from `{isAdding ? (` to `{isAdding && !editingId ? (`
- Title simplified to "Agregar Ingrediente Manualmente"
- Button label simplified to "Agregar a Lista"
- Location: lines 1042-1237
**User Experience:**
Before: Edit button → scroll to bottom → edit form → scroll back up
After: Edit button → form appears right there → edit → save → continues
**Structure:**
```jsx
{inventoryItems.map((item) => (
<div key={item.id}>
{editingId !== item.id && (
<>
{/* Ingredient card */}
{/* Stock lots section */}
</>
)}
{editingId === item.id && (
{/* Inline edit form */}
)}
</div>
))}
{isAdding && !editingId && (
{/* Add manually form at bottom */}
)}
```
**Build Status:** ✓ Successful in 20.61s
## Architectural Changes
**1. Remove Manual Entry Path**
- Deleted data-source-choice step (DataSourceChoiceStep)
- Removed manual inventory-setup step (InventorySetupStep)
- Removed all manual path conditions from wizard flow
- Set dataSource to 'ai-assisted' by default in WizardContext
Files modified:
- frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx:11-28,61-162
- frontend/src/components/domain/onboarding/context/WizardContext.tsx:64
**2. Add Inventory Lots UI to AI Inventory Step**
Added full stock lot management with expiration tracking to UploadSalesDataStep:
**Features Added:**
- Inline stock lot entry form after each AI-suggested ingredient
- Multi-lot support - add multiple lots per ingredient with different expiration dates
- Fields: quantity*, expiration date, supplier, batch/lot number
- Visual list of added lots with expiration dates
- Delete individual lots before completing
- Smart validation with expiration date warnings
- FIFO help text
- Auto-select supplier if only one exists
**Technical Implementation:**
- Added useAddStock and useSuppliers hooks (lines 5,7,102-103)
- Added stock state management (lines 106-114)
- Stock handler functions (lines 336-428):
- handleAddStockClick - Opens stock form
- handleCancelStock - Closes and resets form
- validateStockForm - Validates quantity and expiration
- handleSaveStockLot - Saves to local state, supports "Add Another Lot"
- handleDeleteStockLot - Removes from list
- Modified handleNext to create stock lots after ingredients (lines 490-533)
- Added stock lots UI section in ingredient rendering (lines 679-830)
**UI Flow:**
1. User uploads sales data
2. AI suggests ingredients
3. User reviews/edits ingredients
4. **NEW**: User can optionally add stock lots with expiration dates
5. Click "Next" creates both ingredients AND stock lots
6. FIFO tracking enabled from day one
**Benefits:**
- Addresses JTBD: waste prevention, expiration tracking from onboarding
- Progressive disclosure - optional but encouraged
- Maintains simplicity of AI-assisted path
- Enables inventory best practices from the start
Files modified:
- frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx:1-12,90-114,335-533,679-830
**Build Status:** ✓ Successful in 20.78s
✅ RECIPES STEP FIX:
- Add onComplete prop handling to RecipesSetupStep.tsx
- Add "Next" button when recipes.length >= 1
- Show success message with recipe count
- Button hidden when in adding mode
🎯 AI INVENTORY STEP - COMPLETE REDESIGN:
Following suppliers/recipes pattern with list-based management and deferred creation.
**NEW DATA MODEL**:
- InventoryItemForm interface with isSuggested tracking
- Items stored in list (NOT created in database yet)
- Support both AI suggestions and manual entries
**NEW UI PATTERN**:
- List view with expandable cards showing AI confidence badges
- Edit/Delete buttons per item (like suppliers)
- "Add Ingredient Manually" button with full form
- Next button creates ALL items at once (deferred creation)
**KEY CHANGES**:
1. Items added to list first (not created immediately)
2. Can edit/delete both AI and manual items before creation
3. Manual ingredient addition form with full validation
4. All items created when clicking "Next" button
5. Progress indicator during creation
6. Sales data import happens after inventory creation
**UI IMPROVEMENTS**:
- "Why This Matters" info box explaining workflow
- Ingredient cards show: name, category, stock, cost, shelf life, sales data
- AI confidence badges (e.g., "IA 95%")
- Visual success indicator when minimum met
- Gradient form section matching recipe template pattern
**FILES**:
- UploadSalesDataStep.tsx: Completely rewritten (963 lines)
- RecipesSetupStep.tsx: Added Next button (2 lines)
- REDESIGN_SUMMARY.md: Complete documentation of changes
Build: ✅ Success (21.46s)
Pattern: Now matches suppliers/recipes workflow exactly
Creation: Deferred until "Next" click (user can review/edit first)
🔧 Recipes Step Fix:
- Add onComplete prop handling to RecipesSetupStep
- Add "Next" button when minimum requirement met (recipes.length >= 1)
- Show success indicator with recipe count
- Button only visible when not in adding mode
🚧 AI Inventory Step Redesign (In Progress):
- Updated InventoryItem interface to support both AI suggestions and manual entries
- Added new fields: id, isSuggested, isExpanded, low_stock_threshold, reorder_point
- Modified AI suggestion mapper to calculate inventory management defaults
- Next: Need to redesign UI from checkbox-grid to expandable-card list
- Next: Add manual ingredient addition form
- Next: Move inventory creation from button to onComplete/onNext handler
This is work in progress - UI redesign not yet complete.
✨ Complete UI redesign of UploadSalesDataStep to match beautiful recipe step pattern:
- Add "Why This Matters" info box with icon and explanation
- Replace summary section with clean progress indicator showing count and success state
- Change product list from vertical layout to responsive 2-column grid
- Implement custom checkboxes with visual checkmark instead of native inputs
- Separate edit form into gradient-background section (matching recipe templates)
- Update file format guide colors from hardcoded blue to CSS variables
- Clean up actions sections and remove unnecessary comments
- Add emojis for visual interest (❄️ refrigeration, 🧊 freezing, 🌿 seasonal, 📊 sales)
- Improve spacing, hierarchy, and overall visual consistency throughout
The AI suggestions step now has the same beautiful, modern, and easy-to-use
UI/UX as the recipe step, providing a consistent onboarding experience.
