- Removed duplicate Next buttons - using validate prop
- Added ALL 48 backend fields
- Auto-generates supplier code from name
- Advanced options section with all optional fields
- Tooltips for complex fields
- Proper field alignment with backend API
- Single streamlined step
- created_by and updated_by fields included
- English labels
Implemented comprehensive validation patterns demonstrating best practices:
CustomerWizard:
- Email validation with isValidEmail() from utils
- Spanish phone validation with isValidSpanishPhone()
- Real-time validation on blur
- Inline error messages with red border styling
- Prevents form submission if validation fails
SupplierWizard:
- Lead time days validation (required, positive integer)
- Email format validation
- Phone format validation
- Number range validation
- Inline error messages with AlertCircle icon
Validation Features:
- Uses existing validation utility functions
- Conditional border styling (red on error)
- Error messages below fields with icon
- Prevents navigation to next step if errors exist
- Spanish error messages for better UX
This demonstrates the validation pattern that can be extended to other
wizards. The validation utility (/utils/validation.ts) provides:
- Email, phone, URL validation
- Number validation (positive, integer, range)
- Date validation (past, future, age)
- VAT/NIF validation for Spain
- And many more validators
Next steps: Apply same pattern to remaining wizards for comprehensive
validation coverage across all form inputs.
- Added bg-[var(--bg-primary)] and text-[var(--text-primary)] CSS variables
- Fixes white background + white text issue in dark mode
- Applied to all input, select, and textarea elements across 8 wizards
Wizards fixed:
- InventoryWizard
- CustomerWizard
- SupplierWizard
- RecipeWizard
- EquipmentWizard
- QualityTemplateWizard
- TeamMemberWizard
- CustomerOrderWizard
(SalesEntryWizard was already fixed in previous commit)
This completes the dark mode UI improvements (High Priority item).
All form inputs now properly support dark mode with correct contrast.
- Imported showToast utility from react-hot-toast wrapper
- Added success toast after successful API calls in all 7 wizards
- Added error toast on API failures for better user feedback
- Replaced silent errors with user-visible toast notifications
Wizards updated:
- CustomerWizard: Toast on customer creation
- EquipmentWizard: Toast on equipment creation
- QualityTemplateWizard: Toast on template creation
- SupplierWizard: Toast on supplier + price list creation
- RecipeWizard: Toast on recipe creation
- SalesEntryWizard: Toast on sales record creation
- CustomerOrderWizard: Toast on customer + order creation
This completes the toast notification implementation (High Priority item).
Users now get immediate visual feedback on success/failure instead of
relying on console.log or error state alone.
Supplier Wizard Improvements:
- Added 'Días de Entrega' (Lead Time Days) field - CRITICAL field
- Field shows as required with asterisk and helper text
- Validates that lead time is provided before allowing continue
- Made 'Términos de Pago' optional (not critical info)
- Added empty option 'Seleccionar...' to payment terms dropdown
- Updated API call to include lead_time_days parameter
- Payment terms now sends undefined if not selected
- Lead time days properly parsed as integer before sending to API
These changes ensure critical logistics information is captured while
making optional business terms more flexible.
Sales Entry Wizard:
- Implemented complete file upload functionality with validation
- Added CSV template download via salesService.downloadImportTemplate()
- File validation before import via salesService.validateImportFile()
- Bulk import via salesService.importSalesData()
- Manual entry saves via salesService.createSalesRecord()
- Removed all mock data and console.log
- Added comprehensive error handling and loading states
Supplier Wizard:
- Replaced mock ingredients with inventoryService.getIngredients()
- Added real-time ingredient fetching with loading states
- Supplier creation via suppliersService.createSupplier()
- Price list creation via suppliersService.createSupplierPriceList()
- Removed all mock data and console.log
- Added comprehensive error handling
Both wizards now fully integrated with backend APIs.
- Customer Order wizard (P0): 3-step flow with customer selection, order items, delivery
- Customer wizard (P1): 2-step flow with details and preferences
- Supplier wizard (P1): 2-step flow with supplier info and products/pricing
Remaining wizards (Recipe, Quality Template, Equipment, Team Member) will be implemented in next commit.
All wizards follow mobile-first design with proper validation and user feedback.
Implemented a comprehensive unified wizard system to consolidate all "add new content"
actions into a single, intuitive, step-by-step guided experience based on Jobs To Be Done
(JTBD) methodology.
## What's New
### Core Components
- **UnifiedAddWizard**: Main orchestrator component that routes to specific wizards
- **ItemTypeSelector**: Beautiful visual card-based selection for 9 content types
- **9 Individual Wizards**: Step-by-step flows for each content type
### Priority Implementations (P0)
1. **SalesEntryWizard** ⭐ (MOST CRITICAL)
- Manual entry with dynamic product lists and auto-calculated totals
- File upload placeholder for CSV/Excel bulk import
- Critical for small bakeries without POS systems
2. **InventoryWizard**
- Type selection (ingredient vs finished product)
- Context-aware forms based on inventory type
- Optional initial lot entry
### Placeholder Wizards (P1/P2)
- Customer Order, Supplier, Recipe, Customer, Quality Template, Equipment, Team Member
- Proper structure in place for incremental enhancement
### Dashboard Integration
- Added prominent "Agregar" button in dashboard header
- Opens wizard modal with visual type selection
- Auto-refreshes dashboard after wizard completion
### Design Highlights
- Mobile-first responsive design (full-screen on mobile, modal on desktop)
- Touch-friendly with 44px+ touch targets
- Follows existing color system and design tokens
- Progressive disclosure to reduce cognitive load
- Accessibility-compliant (WCAG AA)
## Documentation
Created comprehensive documentation:
- `JTBD_UNIFIED_ADD_WIZARD.md` - Full JTBD analysis and research
- `WIZARD_ARCHITECTURE_DESIGN.md` - Technical design and specifications
- `UNIFIED_WIZARD_IMPLEMENTATION_SUMMARY.md` - Implementation guide
## Files Changed
- New: `frontend/src/components/domain/unified-wizard/` (15 new files)
- Modified: `frontend/src/pages/app/DashboardPage.tsx` (added wizard integration)
## Next Steps
- [ ] Connect wizards to real API endpoints (currently mock/placeholder)
- [ ] Implement full CSV upload for sales entry
- [ ] Add comprehensive form validation
- [ ] Enhance P1 priority wizards based on user feedback
## JTBD Alignment
Main Job: "When I need to expand or update my bakery operations, I want to quickly add
new resources to my management system, so I can keep my business running smoothly."
Key insights applied:
- Prioritized sales entry (most bakeries lack POS)
- Mobile-first (bakery owners are on their feet)
- Progressive disclosure (reduce overwhelm)
- Forgiving interactions (can go back, save drafts)
