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:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user