Implement Phase 2: Core data entry steps for setup wizard
This commit implements the three core data entry steps for the bakery
setup wizard, enabling users to configure their essential operational data
immediately after onboarding.
## Implemented Steps
### 1. Suppliers Setup Step (SuppliersSetupStep.tsx)
- Inline form for adding/editing suppliers
- Required fields: name, supplier_type
- Optional fields: contact_person, phone, email
- List view with edit/delete actions
- Minimum requirement: 1 supplier
- Real-time validation and error handling
- Integration with existing suppliers API hooks
### 2. Inventory Setup Step (InventorySetupStep.tsx)
- Inline form for adding/editing ingredients
- Required fields: name, category, unit_of_measure
- Optional fields: brand, standard_cost
- List view with edit/delete actions (scrollable)
- Minimum requirement: 3 ingredients
- Progress indicator showing remaining items needed
- Category and unit dropdowns with i18n support
### 3. Recipes Setup Step (RecipesSetupStep.tsx)
- Recipe creation form with ingredient management
- Required fields: name, finished_product, yield_quantity, yield_unit
- Dynamic ingredient list (add/remove ingredients)
- Prerequisite check (requires ≥2 inventory items)
- Per-ingredient validation (ingredient_id, quantity)
- Minimum requirement: 1 recipe
- Integration with recipes and inventory APIs
## Key Features
### Shared Functionality Across All Steps:
- Parent notification via onUpdate callback (itemsCount, canContinue)
- Inline forms (not modals) for better UX flow
- Real-time validation with error messages
- Loading states and empty states
- Responsive design (mobile-first)
- i18n support with translation keys
- Delete confirmation dialogs
- "Why This Matters" sections explaining value
### Progress Tracking:
- Progress indicators showing count and requirement status
- Visual feedback when minimum requirements met
- "Need X more" messages for incomplete steps
### Error Handling:
- Field-level validation errors
- Type-safe number inputs
- Required field indicators
- User-friendly error messages
## Technical Implementation
### API Integration:
- Uses existing React Query hooks pattern
- Proper cache invalidation on mutations
- Tenant-scoped queries
- Optimistic updates where applicable
### State Management:
- Local form state for each step
- useEffect for parent updates
- Reset functionality on cancel/success
### Type Safety:
- TypeScript interfaces for all data
- Enum types for categories and units
- Proper typing for mutation callbacks
## Files Modified:
- frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
- frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
- frontend/src/components/domain/setup-wizard/steps/RecipesSetupStep.tsx
## Related:
- Builds on Phase 1 wizard foundation
- Integrates with existing suppliers, inventory, and recipes services
- Follows design specification in docs/wizard-flow-specification.md
- Addresses JTBD analysis findings in docs/jtbd-analysis-inventory-setup.md
## Next Steps (Phase 3):
- Quality Setup Step
- Team Setup Step
- Template systems
- Bulk import functionality
ec4a440cb1