ec4a440cb13b80112db94dacb548cdaf24b31936
2 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Claude
|
ec4a440cb1 |
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 |
||
|
Claude
|
2e3d89bd7b |
Implement Phase 1: Setup Wizard Foundation (Foundation & Architecture)
Created complete foundation for the bakery operations setup wizard that guides users through post-onboarding configuration of suppliers, inventory, recipes, quality standards, and team members. **Core Components Created:** 1. SetupWizard.tsx - Main wizard orchestrator - 7-step configuration (Welcome → Suppliers → Inventory → Recipes → Quality → Team → Completion) - Weighted progress tracking (complex steps count more) - Step state management with backend synchronization - Auto-save and resume functionality - Skip logic for optional steps 2. StepProgress.tsx - Progress visualization - Responsive progress bar with weighted calculation - Desktop: Full step indicators with descriptions - Mobile: Horizontal scrolling step indicators - Visual completion status (checkmarks for completed steps) - Shows optional vs required steps 3. StepNavigation.tsx - Navigation controls - Back/Skip/Continue buttons with smart enabling - Conditional skip button (only for optional steps) - Loading states during saves - Contextual button text based on step 4. Placeholder Step Components (7 steps): - WelcomeStep: Introduction with feature preview - SuppliersSetupStep: Placeholder for Phase 2 - InventorySetupStep: Placeholder for Phase 2 - RecipesSetupStep: Placeholder for Phase 2 - QualitySetupStep: Placeholder for Phase 3 - TeamSetupStep: Placeholder for Phase 3 - CompletionStep: Success celebration **Routing & Integration:** - Added /app/setup route to routes.config.ts and AppRouter.tsx - Created SetupPage wrapper component - Integrated with OnboardingWizard CompletionStep - Added "One More Thing" CTA after onboarding - Choice: "Configurar Ahora (15 min)" or "Lo haré después" - Smooth transition from onboarding to setup **Key Features:** ✅ Weighted progress calculation (steps weighted by complexity/time) ✅ Mobile and desktop responsive design ✅ Step state persistence (save & resume) ✅ Skip logic for optional steps (Quality, Team) ✅ Backend integration ready (uses existing useUserProgress hooks) ✅ Consistent with existing OnboardingWizard patterns ✅ Loading and error states ✅ Accessibility support (ARIA labels, keyboard navigation ready) **Architecture Decisions:** - Reuses OnboardingWizard patterns (StepConfig interface, progress tracking) - Integrates with existing backend (user_progress table, step completion API) - AppShell layout (shows header & sidebar for context) - Modular step components (easy to implement individually in Phases 2-3) **Progress:** Phase 1 (Foundation): ✅ COMPLETE - Component structure ✅ - Navigation & progress ✅ - Routing & integration ✅ - Placeholder steps ✅ Phase 2 (Core Steps): 🔜 NEXT - Suppliers setup implementation - Inventory items setup implementation - Recipes setup implementation Phase 3 (Advanced Features): 🔜 FUTURE - Quality standards implementation - Team setup implementation - Templates & smart defaults **Files Changed:** - 17 new files created - 3 existing files modified (CompletionStep.tsx, AppRouter.tsx, routes.config.ts) **Testing Status:** - Components compile successfully - No TypeScript errors - Ready for Phase 2 implementation Based on comprehensive design specification in: - docs/wizard-flow-specification.md (2,144 lines) - docs/jtbd-analysis-inventory-setup.md (461 lines) Total implementation time: ~4 hours (Phase 1 of 6 phases) Estimated total project: 11 weeks (Phase 1: Week 1-2 foundation ✅) |