feat: Enhance onboarding wizard UX with improved feedback and completion
This commit adds significant UX improvements to multiple onboarding steps: **1. Recipes Setup Step:** - Fixed double next button issue (removed duplicate navigation button) - Filtered finished products dropdown to show only 'finished_product' type ingredients - Users can now only select appropriate finished products for recipes **2. File Upload Step:** - Added comprehensive validation success state with detailed feedback - Shows file name, rows found, and unique products count after validation - Enhanced error display with helpful troubleshooting tips - Clear visual distinction between file selected, validation success, and processing states - Improved user confidence by clearly communicating validation results **3. Completion Step:** - Complete redesign with animated success icon and gradient text - Added 4 quick access cards for Analytics, Inventory, Procurement, and Production - Interactive hover effects on quick access cards (scale and shadow) - New "Tips for Success" section with actionable advice - Enhanced primary CTA button with better sizing and prominence - More engaging and valuable final step that guides users to next actions All changes use global CSS variables for proper dark mode support and maintain consistent design language throughout the application.
This commit is contained in:
@@ -565,11 +565,13 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
|
||||
className={`w-full px-3 py-2 bg-[var(--bg-primary)] border ${errors.finished_product_id ? 'border-[var(--color-error)]' : 'border-[var(--border-secondary)]'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]`}
|
||||
>
|
||||
<option value="">{t('setup_wizard:recipes.placeholders.finished_product', 'Select finished product...')}</option>
|
||||
{ingredients.map((ing) => (
|
||||
<option key={ing.id} value={ing.id}>
|
||||
{ing.name} ({ing.unit_of_measure})
|
||||
</option>
|
||||
))}
|
||||
{ingredients
|
||||
.filter((ing) => ing.product_type === 'finished_product')
|
||||
.map((ing) => (
|
||||
<option key={ing.id} value={ing.id}>
|
||||
{ing.name} ({ing.unit_of_measure})
|
||||
</option>
|
||||
))}
|
||||
<option value="__ADD_NEW__" className="text-[var(--color-primary)] font-medium">
|
||||
➕ {t('setup_wizard:recipes.add_new_ingredient', 'Add New Ingredient')}
|
||||
</option>
|
||||
@@ -793,19 +795,6 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
|
||||
tenantId={tenantId}
|
||||
context="recipe"
|
||||
/>
|
||||
|
||||
{/* Continue button - only shown when used in onboarding context */}
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
{t('setup_wizard:navigation.continue', 'Continue →')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user