feat(production): TUI-Screens für Zutaten verwalten + Rezept aktivieren

frontend/apps/cli/src/components/production/RecipeDetailScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import type { RecipeDTO, RecipeType, ProductionStepDTO } from '@effigenix/api-client';
+import type { RecipeDTO, RecipeType, ProductionStepDTO, IngredientDTO } from '@effigenix/api-client';
 import { RECIPE_TYPE_LABELS } from '@effigenix/api-client';
 import { useNavigation } from '../../state/navigation-context.js';
 import { LoadingSpinner } from '../shared/LoadingSpinner.js';
@@ -9,8 +9,8 @@ import { SuccessDisplay } from '../shared/SuccessDisplay.js';
 import { ConfirmDialog } from '../shared/ConfirmDialog.js';
 import { client } from '../../utils/api-client.js';
 
-type MenuAction = 'add-step' | 'remove-step' | 'back';
-type Mode = 'menu' | 'select-step-to-remove' | 'confirm-remove';
+type MenuAction = 'add-ingredient' | 'remove-ingredient' | 'add-step' | 'remove-step' | 'activate' | 'back';
+type Mode = 'menu' | 'select-step-to-remove' | 'confirm-remove' | 'select-ingredient-to-remove' | 'confirm-remove-ingredient' | 'confirm-activate';
 
 function errorMessage(err: unknown): string {
   return err instanceof Error ? err.message : 'Unbekannter Fehler';
@@ -29,25 +29,32 @@ export function RecipeDetailScreen() {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [selectedStepIndex, setSelectedStepIndex] = useState(0);
   const [stepToRemove, setStepToRemove] = useState<ProductionStepDTO | null>(null);
+  const [selectedIngredientIndex, setSelectedIngredientIndex] = useState(0);
+  const [ingredientToRemove, setIngredientToRemove] = useState<IngredientDTO | null>(null);
 
   const isDraft = recipe?.status === 'DRAFT';
 
   const menuItems: { id: MenuAction; label: string }[] = [
     ...(isDraft ? [
+      { id: 'add-ingredient' as const, label: '[Zutat hinzufügen]' },
+      { id: 'remove-ingredient' as const, label: '[Zutat entfernen]' },
       { id: 'add-step' as const, label: '[Schritt hinzufügen]' },
       { id: 'remove-step' as const, label: '[Schritt entfernen]' },
+      { id: 'activate' as const, label: '[Rezept aktivieren]' },
     ] : []),
     { id: 'back' as const, label: '[Zurück]' },
   ];
 
-  useEffect(() => {
-    setSelectedAction(0);
-  }, [isDraft]);
+  const clampedAction = Math.min(selectedAction, menuItems.length - 1);
 
   const sortedSteps = recipe?.productionSteps
     ? [...recipe.productionSteps].sort((a, b) => a.stepNumber - b.stepNumber)
     : [];
 
+  const sortedIngredients = recipe?.ingredients
+    ? [...recipe.ingredients].sort((a, b) => a.position - b.position)
+    : [];
+
   const loadRecipe = useCallback(() => {
     setLoading(true);
     setError(null);
@@ -77,14 +84,35 @@ export function RecipeDetailScreen() {
       }
       if (key.escape) { setMode('menu'); setSelectedStepIndex(0); }
     }
+
+    if (mode === 'select-ingredient-to-remove') {
+      if (key.upArrow) setSelectedIngredientIndex((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelectedIngredientIndex((i) => Math.min(sortedIngredients.length - 1, i + 1));
+      if (key.return && sortedIngredients.length > 0) {
+        setIngredientToRemove(sortedIngredients[selectedIngredientIndex] ?? null);
+        setMode('confirm-remove-ingredient');
+      }
+      if (key.escape) { setMode('menu'); setSelectedIngredientIndex(0); }
+    }
   });
 
   const handleAction = async () => {
     if (!recipe) return;
-    const item = menuItems[selectedAction];
+    const item = menuItems[clampedAction];
     if (!item) return;
 
     switch (item.id) {
+      case 'add-ingredient':
+        navigate('recipe-add-ingredient', { recipeId });
+        break;
+      case 'remove-ingredient':
+        if (sortedIngredients.length === 0) {
+          setError('Keine Zutaten vorhanden.');
+          return;
+        }
+        setSelectedIngredientIndex(0);
+        setMode('select-ingredient-to-remove');
+        break;
       case 'add-step':
         navigate('recipe-add-production-step', { recipeId });
         break;
@@ -96,6 +124,9 @@ export function RecipeDetailScreen() {
         setSelectedStepIndex(0);
         setMode('select-step-to-remove');
         break;
+      case 'activate':
+        setMode('confirm-activate');
+        break;
       case 'back':
         back();
         break;
@@ -118,6 +149,36 @@ export function RecipeDetailScreen() {
     setStepToRemove(null);
   }, [recipe, stepToRemove]);
 
+  const handleRemoveIngredient = useCallback(async () => {
+    if (!recipe || !ingredientToRemove) return;
+    setMode('menu');
+    setActionLoading(true);
+    try {
+      await client.recipes.removeIngredient(recipe.id, ingredientToRemove.id);
+      const updated = await client.recipes.getById(recipe.id);
+      setRecipe(updated);
+      setSuccessMessage(`Zutat (Position ${ingredientToRemove.position}) entfernt.`);
+    } catch (err: unknown) {
+      setError(errorMessage(err));
+    }
+    setActionLoading(false);
+    setIngredientToRemove(null);
+  }, [recipe, ingredientToRemove]);
+
+  const handleActivate = useCallback(async () => {
+    if (!recipe) return;
+    setMode('menu');
+    setActionLoading(true);
+    try {
+      const updated = await client.recipes.activateRecipe(recipe.id);
+      setRecipe(updated);
+      setSuccessMessage('Rezept wurde aktiviert.');
+    } catch (err: unknown) {
+      setError(errorMessage(err));
+    }
+    setActionLoading(false);
+  }, [recipe]);
+
   if (loading) return <LoadingSpinner label="Lade Rezept..." />;
   if (error && !recipe) return <ErrorDisplay message={error} onDismiss={back} />;
   if (!recipe) return <Text color="red">Rezept nicht gefunden.</Text>;
@@ -208,6 +269,28 @@ export function RecipeDetailScreen() {
         </Box>
       )}
 
+      {mode === 'select-ingredient-to-remove' && (
+        <Box flexDirection="column">
+          <Text color="yellow" bold>Zutat zum Entfernen auswählen:</Text>
+          {sortedIngredients.map((ing, index) => (
+            <Box key={ing.id}>
+              <Text color={index === selectedIngredientIndex ? 'cyan' : 'white'}>
+                {index === selectedIngredientIndex ? '▶ ' : '  '}Position {ing.position}: {ing.quantity} {ing.uom} (Artikel: {ing.articleId})
+              </Text>
+            </Box>
+          ))}
+          <Text color="gray" dimColor>↑↓ auswählen · Enter bestätigen · Escape abbrechen</Text>
+        </Box>
+      )}
+
+      {mode === 'confirm-remove-ingredient' && ingredientToRemove && (
+        <ConfirmDialog
+          message={`Zutat an Position ${ingredientToRemove.position} (Artikel: ${ingredientToRemove.articleId}) entfernen?`}
+          onConfirm={() => void handleRemoveIngredient()}
+          onCancel={() => { setMode('menu'); setIngredientToRemove(null); }}
+        />
+      )}
+
       {mode === 'confirm-remove' && stepToRemove && (
         <ConfirmDialog
           message={`Schritt ${stepToRemove.stepNumber} "${stepToRemove.description}" entfernen?`}
@@ -216,14 +299,22 @@ export function RecipeDetailScreen() {
         />
       )}
 
+      {mode === 'confirm-activate' && (
+        <ConfirmDialog
+          message="Rezept wirklich aktivieren? Der Status wechselt zu ACTIVE."
+          onConfirm={() => void handleActivate()}
+          onCancel={() => setMode('menu')}
+        />
+      )}
+
       {mode === 'menu' && (
         <Box flexDirection="column">
           <Text color="gray" bold>Aktionen:</Text>
           {actionLoading && <LoadingSpinner label="Aktion wird ausgeführt..." />}
           {!actionLoading && menuItems.map((item, index) => (
             <Box key={item.id}>
-              <Text color={index === selectedAction ? 'cyan' : 'white'}>
-                {index === selectedAction ? '▶ ' : '  '}{item.label}
+              <Text color={index === clampedAction ? 'cyan' : 'white'}>
+                {index === clampedAction ? '▶ ' : '  '}{item.label}
               </Text>
             </Box>
           ))}