Fix recipes step next button & start AI inventory redesign

🔧 Recipes Step Fix:
- Add onComplete prop handling to RecipesSetupStep
- Add "Next" button when minimum requirement met (recipes.length >= 1)
- Show success indicator with recipe count
- Button only visible when not in adding mode

🚧 AI Inventory Step Redesign (In Progress):
- Updated InventoryItem interface to support both AI suggestions and manual entries
- Added new fields: id, isSuggested, isExpanded, low_stock_threshold, reorder_point
- Modified AI suggestion mapper to calculate inventory management defaults
- Next: Need to redesign UI from checkbox-grid to expandable-card list
- Next: Add manual ingredient addition form
- Next: Move inventory creation from button to onComplete/onNext handler

This is work in progress - UI redesign not yet complete.
This commit is contained in:
Claude
2025-11-06 15:01:24 +00:00
parent 34afbd0b43
commit 8be364ef81
2 changed files with 49 additions and 15 deletions

View File

@@ -16,7 +16,7 @@ interface RecipeIngredientForm {
ingredient_order: number;
}
export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete }) => {
const { t } = useTranslation();
// Get tenant ID
@@ -714,6 +714,26 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
</p>
</div>
)}
{/* Navigation - Show Next button when minimum requirement met */}
{recipes.length >= 1 && !isAdding && (
<div className="flex items-center justify-between pt-6 border-t border-[var(--border-secondary)] mt-6">
<div className="flex items-center gap-2 text-sm text-[var(--color-success)]">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>
{t('setup_wizard:recipes.minimum_met', '{{count}} recipe(s) added - Ready to continue!', { count: recipes.length })}
</span>
</div>
<button
onClick={() => onComplete?.()}
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors font-medium"
>
{t('common:next', 'Next')}
</button>
</div>
)}
</div>
);
};