This commit implements multiple improvements to the onboarding wizard:
**1. Unified UI Components:**
- Created InfoCard component for consistent "why is important" blocks across all steps
- Created TemplateCard component for consistent template displays
- Both components use global CSS variables for proper dark mode support
**2. Initial Stock Entry Step Improvements:**
- Fixed title/subtitle positioning using unified InfoCard component
- Fixed missing count bug in warning message (now uses {{count}} interpolation)
- Fixed dark mode colors using CSS variables (--color-success, --color-info, etc.)
- Changed next button title from "completar configuración" to "Continuar →"
- Implemented stock creation API call using useAddStock hook
- Products with stock now properly save to backend on step completion
**3. Dark Mode Fixes:**
- Fixed QualitySetupStep: Enhanced button selection visibility with rings and shadows
- Fixed TeamSetupStep: Enhanced role selection visibility with rings and shadows
- Fixed AddressAutocomplete: Replaced all hardcoded colors with CSS variables
- All dropdown results, icons, and hover states now properly adapt to dark mode
**4. Streamlined Wizard Flow:**
- Removed POI Detection step from wizard (step previously added complexity)
- POI detection now runs automatically in background after tenant registration
- Non-blocking approach ensures users aren't delayed by POI detection
- Removed Revision step (setup-review) as it adds no user value
- Completion step is now the final step before dashboard
**5. Backend Updates:**
- Updated onboarding_progress.py to remove poi-detection from ONBOARDING_STEPS
- Updated onboarding_progress.py to remove setup-review from ONBOARDING_STEPS
- Updated step dependencies to reflect streamlined flow
- POI detection documented as automatic background process
All changes maintain backward compatibility and use proper TypeScript types.
Fixed the navigation architecture to follow proper onboarding patterns:
**ARCHITECTURE CHANGE:**
- REMOVED: External navigation footer from UnifiedOnboardingWizard (Back + Continue buttons at wizard level)
- ADDED: Internal Continue buttons inside each setup wizard step component
**WHY THIS MATTERS:**
1. Onboarding should NEVER show Back buttons (users cannot go back)
2. Each step should be self-contained with its own Continue button
3. Setup wizard steps are reused in both contexts:
- SetupWizard (/app/setup): Uses external StepNavigation component
- UnifiedOnboardingWizard: Steps now render their own buttons
**CHANGES MADE:**
1. UnifiedOnboardingWizard.tsx:
- Removed navigation footer (lines 548-588)
- Now passes canContinue prop to steps
- Steps are responsible for their own navigation
2. All setup wizard steps updated:
- QualitySetupStep: Added onComplete, canContinue props + Continue button
- SuppliersSetupStep: Modified existing button to call onComplete
- InventorySetupStep: Added onComplete, canContinue props + Continue button
- RecipesSetupStep: Added canContinue prop + Continue button
- TeamSetupStep: Added onComplete, canContinue props + Continue button
- ReviewSetupStep: Added onComplete, canContinue props + Continue button
3. Continue button pattern:
- Only renders when onComplete prop exists (onboarding context)
- Disabled based on canContinue prop from parent
- Styled consistently across all steps
- Positioned at bottom with border-top separator
**RESULT:**
- Clean separation: onboarding steps have internal buttons, no external navigation
- No Back button in onboarding (as required)
- Setup wizard still works with external StepNavigation
- Consistent UX across all steps
Fixed two critical issues in the setup wizard:
1. **Missing onUpdate callback**:
- Added onUpdate prop to SetupStepProps interface
- Created handleStepUpdate callback in SetupWizard to receive canContinue updates
- Passed onUpdate to all step components
- Added onUpdate implementation in SuppliersSetupStep (was missing)
- This fixes the issue where Continue/Skip buttons were incorrectly disabled for optional steps
2. **Button interaction issues in QualitySetupStep**:
- Added explicit e.preventDefault() and e.stopPropagation() to Check Type buttons
- Added explicit e.preventDefault() and e.stopPropagation() to Applicable Stages buttons
- Added cursor-pointer class for better UX
- This fixes the issue where buttons weren't responding to clicks
The Quality Setup and Suppliers Setup steps now properly:
- Show enabled Continue button when requirements are met
- Show Skip button for optional steps
- Allow clicking Check Type and Applicable Stages buttons without form submission interference
This commit implements two optional steps that allow users to configure
advanced features during the bakery setup process. Both steps can be
skipped without blocking wizard completion.
## Implemented Steps
### 1. Quality Setup Step (QualitySetupStep.tsx)
- Quality check template creation with full API integration
- 6 check types: Visual, Measurement, Temperature, Weight, Timing, Checklist
- Multi-select applicable stages (mixing, proofing, shaping, baking, etc.)
- Optional description field
- Required/Critical flags with visual indicators
- Minimum requirement: 2 quality checks (skippable)
- Grid-based type and stage selection with icons
- Integration with useQualityTemplates and useCreateQualityTemplate hooks
### 2. Team Setup Step (TeamSetupStep.tsx)
- Team member collection form (local state management)
- Required fields: Name, Email
- Role selection: Admin, Manager, Baker, Cashier
- Grid-based role selection with icons and descriptions
- Email validation and duplicate prevention
- Team member list with avatar icons
- Remove functionality
- Fully optional (always canContinue = true)
- Info note about future invitation emails
- Skip messaging for solo operators
## Key Features
### Quality Setup Step:
- ✅ Full backend integration with quality templates API
- ✅ Visual icon-based check type selection
- ✅ Multi-select stage chips (toggle on/off)
- ✅ Required/Critical badges on template list
- ✅ Form validation (name, at least one stage)
- ✅ Optional badge prominently displayed
- ✅ Progress tracking with "Need X more" messaging
### Team Setup Step:
- ✅ Local state management (ready for future API)
- ✅ Email validation with duplicate checking
- ✅ Visual role cards with icons and descriptions
- ✅ Team member list with role badges and avatars
- ✅ Remove button for each member
- ✅ Info note about invitation emails
- ✅ Skip messaging for working alone
- ✅ Always allows continuation (truly optional)
## Shared Features Across Both Steps:
- ✅ "Optional" badge with explanatory text
- ✅ "Why This Matters" information section
- ✅ Inline forms (not modals)
- ✅ Real-time validation with error messages
- ✅ Parent notification via onUpdate callback
- ✅ Responsive mobile-first design
- ✅ i18n support with translation keys
- ✅ Loading states
- ✅ Consistent UI patterns with Phase 2 steps
## Technical Implementation
### Quality Setup:
- Integration with qualityTemplateService
- useQualityTemplates hook for fetching templates
- useCreateQualityTemplate mutation hook
- ProcessStage and QualityCheckType enums from API types
- User ID from auth store for created_by field
- Template list with badge indicators
### Team Setup:
- Local TeamMember interface
- useState for team members array
- Email regex validation
- Duplicate email detection
- Role options with metadata (icon, label, description)
- Ready for future team invitation API integration
## Files Modified:
- frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx (406 lines)
- frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx (316 lines)
Total: **722 lines of new functional code**
## Related:
- Builds on Phase 1 (foundation) and Phase 2 (core steps)
- Integrates with quality templates service
- Prepared for future team invitation service
- Follows design specification in docs/wizard-flow-specification.md
- Addresses JTBD findings about quality and team management
## Next Steps (Phase 4+):
- Smart features (auto-suggestions, smart defaults)
- Polish & animations
- Comprehensive testing
- Template systems enhancement
- Bulk import functionality
