feat: Improve onboarding wizard UI, UX and dark mode support
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.
This commit is contained in:
@@ -11,7 +11,6 @@ import { WizardProvider, useWizardContext, BakeryType, DataSource } from './cont
|
||||
import {
|
||||
BakeryTypeSelectionStep,
|
||||
RegisterTenantStep,
|
||||
POIDetectionStep,
|
||||
FileUploadStep,
|
||||
InventoryReviewStep,
|
||||
ProductCategorizationStep,
|
||||
@@ -75,15 +74,7 @@ const OnboardingWizardContent: React.FC = () => {
|
||||
isConditional: true,
|
||||
condition: (ctx) => ctx.state.bakeryType !== null,
|
||||
},
|
||||
// Phase 2b: POI Detection
|
||||
{
|
||||
id: 'poi-detection',
|
||||
title: t('onboarding:steps.poi_detection.title', 'Detección de Ubicación'),
|
||||
description: t('onboarding:steps.poi_detection.description', 'Analizar puntos de interés cercanos'),
|
||||
component: POIDetectionStep,
|
||||
isConditional: true,
|
||||
condition: (ctx) => ctx.state.bakeryType !== null && ctx.state.bakeryLocation !== undefined,
|
||||
},
|
||||
// POI Detection removed - now happens automatically in background after tenant registration
|
||||
// Phase 2a: AI-Assisted Inventory Setup (REFACTORED - split into 3 focused steps)
|
||||
{
|
||||
id: 'upload-sales-data',
|
||||
@@ -159,14 +150,7 @@ const OnboardingWizardContent: React.FC = () => {
|
||||
component: MLTrainingStep,
|
||||
// Always show - no conditional
|
||||
},
|
||||
{
|
||||
id: 'setup-review',
|
||||
title: t('onboarding:steps.review.title', 'Revisión'),
|
||||
description: t('onboarding:steps.review.description', 'Confirma tu configuración'),
|
||||
component: ReviewSetupStep,
|
||||
isConditional: true,
|
||||
condition: (ctx) => ctx.state.bakeryType !== null, // Tenant created after bakeryType is set
|
||||
},
|
||||
// Revision step removed - not useful for user, completion step is final step
|
||||
{
|
||||
id: 'completion',
|
||||
title: t('onboarding:steps.completion.title', 'Completado'),
|
||||
@@ -562,12 +546,6 @@ const OnboardingWizardContent: React.FC = () => {
|
||||
initialStock: undefined,
|
||||
}))
|
||||
}
|
||||
: // Pass tenant info to POI detection step
|
||||
currentStep.id === 'poi-detection'
|
||||
? {
|
||||
tenantId: wizardContext.state.tenantId,
|
||||
bakeryLocation: wizardContext.state.bakeryLocation,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user