- 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.
Sales Entry Wizard - Manual Entry Improvements:
- Replaced text input 'Nombre del producto' with dropdown selector
- Fetches finished products from inventory via inventoryService.getIngredients()
- Filters for finished_product category only
- Shows product name and price in dropdown options
- Auto-fills price when product is selected
- Loading state while fetching products
- Error handling if products fail to load
- Empty state if no finished products exist
- Disabled 'Agregar Producto' button while loading or if no products
- Fixed dark mode inputs with bg-[var(--bg-primary)] and text-[var(--text-primary)]
This is a CRITICAL improvement - products sold must come from inventory.
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.
Main Entry Point (ItemTypeSelector):
- Moved Registro de Ventas to first position (most common)
- Changed icon from DollarSign to Euro icon
- Fixed alignment between icons and text (items-center instead of items-start)
- Improved spacing between title and subtitle (mb-0.5, mt-1)
- Better visual centering of all elements
Inventory Wizard (TypeSelectionStep):
- Enhanced selection UI with ring and shadow when selected
- Better color feedback (10% opacity background, ring-2)
- Dynamic icon color (primary when selected, tertiary when not)
- Dynamic title color (primary when selected)
- Improved spacing between title and description (mb-3, mt-3)
- Added hover effects (shadow-lg, -translate-y-0.5)
- Better visual distinction for selected state
All changes improve visual feedback and user experience.
- Added OrdersService.createCustomer() API call
- Replaced console.log with actual customer creation
- Added loading states with spinner during API call
- Added error handling with user-friendly messages
- Added disabled state on submit button during save
- All customer data properly mapped to API format
- No more mock data or placeholders
Customer wizard now fully integrated with backend.
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.
- QualityTemplateWizard: Fixed onComplete bug and added API save via qualityTemplateService
- EquipmentWizard: Added API save via equipmentService with loading states and error handling
- TeamMemberWizard: Added API save via authService for user registration with permissions
All three wizards now:
- Use useTenant hook to get tenant ID
- Call actual backend APIs instead of console.log
- Include loading states during API calls
- Show error messages if API calls fail
- Properly handle success/failure scenarios
- RecipeWizard: 2-step flow with recipe details (ingredient selection placeholder for future)
- QualityTemplateWizard: 1-step flow for quality control templates
- EquipmentWizard: 1-step flow for equipment registration
- TeamMemberWizard: 2-step flow with member details and role-based permissions
All 9 wizards now fully implemented and ready for API integration.
Mobile-first design with proper validation and user feedback throughout.
- 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)
