Implement Phase 1: Post-onboarding configuration system
This commit implements the first phase of the post-onboarding configuration
system based on JTBD analysis:
**1. Fixed Quality Standards Step Missing Next Button**
- Updated StepNavigation logic to enable Next button for optional steps
- Changed: disabled={(!canContinue && !canSkip) || isLoading}
- Quality step now always sets canContinue: true (since it's optional)
- Updated progress indicator to show "2+ recommended (optional)"
- Location: StepNavigation.tsx, QualitySetupStep.tsx
**2. Implemented Configuration Progress Widget**
A comprehensive dashboard widget that guides post-onboarding configuration:
Features:
- Real-time progress tracking (% complete calculation)
- Section-by-section status (Inventory, Suppliers, Recipes, Quality)
- Visual indicators: checkmarks for complete, circles for incomplete
- Minimum requirements vs recommended amounts
- Next action prompts ("Add at least 3 ingredients")
- Feature unlock notifications ("Purchase Orders unlocked!")
- Clickable sections that navigate to configuration pages
- Auto-hides when 100% configured
Location: ConfigurationProgressWidget.tsx (340 lines)
Integration: DashboardPage.tsx
**Configuration Logic:**
- Inventory: 3 minimum, 10 recommended
- Suppliers: 1 minimum, 3 recommended
- Recipes: 1 minimum, 3 recommended
- Quality: 0 minimum (optional), 2 recommended
**UX Improvements:**
- Clear orientation ("Complete Your Bakery Setup")
- Progress bar with percentage
- Next step call-to-action
- Visual hierarchy (gradient borders, icons, colors)
- Responsive design
- Loading states
**Technical Implementation:**
- React hooks: useMemo for calculations
- Real-time data fetching from inventory, suppliers, recipes, quality APIs
- Automatic progress recalculation on data changes
- Navigation integration with react-router
- i18n support for all text
**Files Created:**
- ConfigurationProgressWidget.tsx
**Files Modified:**
- StepNavigation.tsx - Fixed optional step button logic
- QualitySetupStep.tsx - Always allow continuing (optional step)
- DashboardPage.tsx - Added configuration widget
**Pending (Next Phases):**
- Phase 2: Recipe & Supplier Wizard Modals (multi-step forms)
- Phase 3: Recipe templates, bulk operations, configuration recovery
Build: ✅ Success (21.17s)
All TypeScript validations passed.
This commit is contained in:
@@ -40,7 +40,7 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
const count = templates.length;
|
||||
onUpdate?.({
|
||||
itemsCount: count,
|
||||
canContinue: count >= 2,
|
||||
canContinue: true, // Always allow continuing since this step is optional
|
||||
});
|
||||
}, [templates.length, onUpdate]);
|
||||
|
||||
@@ -167,11 +167,11 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{t('setup_wizard:quality.minimum_met', 'Minimum requirement met')}
|
||||
{t('setup_wizard:quality.recommended_met', 'Recommended amount met')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-[var(--text-secondary)]">
|
||||
{t('setup_wizard:quality.need_more', 'Need {{count}} more', { count: 2 - templates.length })}
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{t('setup_wizard:quality.recommended', '2+ recommended (optional)')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user