feat(production): TUI-Screens für Produktionsschritte verwalten

Produktionsschritte im RecipeDetailScreen anzeigen, hinzufügen und entfernen. Neuer AddProductionStepScreen mit Formular für stepNumber, description, durationMinutes und temperatureCelsius.
2026-03-28 08:29:36 +01:00 · 2026-02-19 19:38:14 +01:00 · 2026-02-19 19:38:14 +01:00 · 63f51bc1a9
commit 63f51bc1a9
parent 1e12353b9b
8 changed files with 290 additions and 6 deletions
--- a/frontend/apps/cli/src/App.tsx
+++ b/frontend/apps/cli/src/App.tsx
@ -41,6 +41,7 @@ import { ProductionMenu } from './components/production/ProductionMenu.js';
 import { RecipeListScreen } from './components/production/RecipeListScreen.js';
 import { RecipeCreateScreen } from './components/production/RecipeCreateScreen.js';
 import { RecipeDetailScreen } from './components/production/RecipeDetailScreen.js';
+import { AddProductionStepScreen } from './components/production/AddProductionStepScreen.js';

 function ScreenRouter() {
  const { isAuthenticated, loading } = useAuth();
@ -107,6 +108,7 @@ function ScreenRouter() {
      {current === 'recipe-list' && <RecipeListScreen />}
      {current === 'recipe-create' && <RecipeCreateScreen />}
      {current === 'recipe-detail' && <RecipeDetailScreen />}
+      {current === 'recipe-add-production-step' && <AddProductionStepScreen />}
    </MainLayout>
  );
 }
--- a/frontend/apps/cli/src/components/production/AddProductionStepScreen.tsx
+++ b/frontend/apps/cli/src/components/production/AddProductionStepScreen.tsx
@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useNavigation } from '../../state/navigation-context.js';
+import { FormInput } from '../shared/FormInput.js';
+import { LoadingSpinner } from '../shared/LoadingSpinner.js';
+import { ErrorDisplay } from '../shared/ErrorDisplay.js';
+import { client } from '../../utils/api-client.js';
+
+type Field = 'stepNumber' | 'description' | 'durationMinutes' | 'temperatureCelsius';
+const FIELDS: Field[] = ['stepNumber', 'description', 'durationMinutes', 'temperatureCelsius'];
+
+const FIELD_LABELS: Record<Field, string> = {
+  stepNumber: 'Schrittnummer (optional)',
+  description: 'Beschreibung *',
+  durationMinutes: 'Dauer in Minuten (optional)',
+  temperatureCelsius: 'Temperatur in °C (optional)',
+};
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : 'Unbekannter Fehler';
+}
+
+export function AddProductionStepScreen() {
+  const { params, navigate, back } = useNavigation();
+  const recipeId = params['recipeId'] ?? '';
+
+  const [values, setValues] = useState<Record<Field, string>>({
+    stepNumber: '', description: '', durationMinutes: '', temperatureCelsius: '',
+  });
+  const [activeField, setActiveField] = useState<Field>('stepNumber');
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const setField = (field: Field) => (value: string) => {
+    setValues((v) => ({ ...v, [field]: value }));
+  };
+
+  useInput((_input, key) => {
+    if (loading) return;
+    if (key.tab || key.downArrow) {
+      setActiveField((f) => {
+        const idx = FIELDS.indexOf(f);
+        return FIELDS[(idx + 1) % FIELDS.length] ?? f;
+      });
+    }
+    if (key.upArrow) {
+      setActiveField((f) => {
+        const idx = FIELDS.indexOf(f);
+        return FIELDS[(idx - 1 + FIELDS.length) % FIELDS.length] ?? f;
+      });
+    }
+    if (key.escape) back();
+  });
+
+  const handleSubmit = async () => {
+    const errors: Partial<Record<Field, string>> = {};
+    if (!values.description.trim()) errors.description = 'Beschreibung ist erforderlich.';
+    if (values.stepNumber.trim() && (!Number.isInteger(Number(values.stepNumber)) || Number(values.stepNumber) < 1)) {
+      errors.stepNumber = 'Muss eine positive Ganzzahl sein.';
+    }
+    if (values.durationMinutes.trim() && (!Number.isInteger(Number(values.durationMinutes)) || Number(values.durationMinutes) < 1)) {
+      errors.durationMinutes = 'Muss eine positive Ganzzahl sein.';
+    }
+    if (values.temperatureCelsius.trim() && isNaN(Number(values.temperatureCelsius))) {
+      errors.temperatureCelsius = 'Muss eine Zahl sein.';
+    }
+    setFieldErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      await client.recipes.addProductionStep(recipeId, {
+        description: values.description.trim(),
+        ...(values.stepNumber.trim() ? { stepNumber: Number(values.stepNumber) } : {}),
+        ...(values.durationMinutes.trim() ? { durationMinutes: Number(values.durationMinutes) } : {}),
+        ...(values.temperatureCelsius.trim() ? { temperatureCelsius: Number(values.temperatureCelsius) } : {}),
+      });
+      navigate('recipe-detail', { recipeId });
+    } catch (err: unknown) {
+      setError(errorMessage(err));
+      setLoading(false);
+    }
+  };
+
+  const handleFieldSubmit = (field: Field) => (_value: string) => {
+    const idx = FIELDS.indexOf(field);
+    if (idx < FIELDS.length - 1) {
+      setActiveField(FIELDS[idx + 1] ?? field);
+    } else {
+      void handleSubmit();
+    }
+  };
+
+  if (!recipeId) return <ErrorDisplay message="Keine Rezept-ID vorhanden." onDismiss={back} />;
+  if (loading) return <Box paddingY={2}><LoadingSpinner label="Produktionsschritt wird hinzugefügt..." /></Box>;
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color="cyan" bold>Produktionsschritt hinzufügen</Text>
+      {error && <ErrorDisplay message={error} onDismiss={() => setError(null)} />}
+
+      <Box flexDirection="column" gap={1} width={60}>
+        {FIELDS.map((field) => (
+          <FormInput
+            key={field}
+            label={FIELD_LABELS[field]}
+            value={values[field]}
+            onChange={setField(field)}
+            onSubmit={handleFieldSubmit(field)}
+            focus={activeField === field}
+            {...(fieldErrors[field] ? { error: fieldErrors[field] } : {})}
+          />
+        ))}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>
+          Tab/↑↓ Feld wechseln · Enter auf letztem Feld speichern · Escape Abbrechen
+        </Text>
+      </Box>
+    </Box>
+  );
+}
--- a/frontend/apps/cli/src/components/production/RecipeDetailScreen.tsx
+++ b/frontend/apps/cli/src/components/production/RecipeDetailScreen.tsx
@ -1,23 +1,52 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import type { RecipeDTO, RecipeType } from '@effigenix/api-client';
+import type { RecipeDTO, RecipeType, ProductionStepDTO } 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';
 import { ErrorDisplay } from '../shared/ErrorDisplay.js';
+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';
+
 function errorMessage(err: unknown): string {
  return err instanceof Error ? err.message : 'Unbekannter Fehler';
 }

 export function RecipeDetailScreen() {
-  const { params, back } = useNavigation();
+  const { params, navigate, back } = useNavigation();
  const recipeId = params['recipeId'] ?? '';

  const [recipe, setRecipe] = useState<RecipeDTO | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>('menu');
+  const [selectedAction, setSelectedAction] = useState(0);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [selectedStepIndex, setSelectedStepIndex] = useState(0);
+  const [stepToRemove, setStepToRemove] = useState<ProductionStepDTO | null>(null);
+
+  const isDraft = recipe?.status === 'DRAFT';
+
+  const menuItems: { id: MenuAction; label: string }[] = [
+    ...(isDraft ? [
+      { id: 'add-step' as const, label: '[Schritt hinzufügen]' },
+      { id: 'remove-step' as const, label: '[Schritt entfernen]' },
+    ] : []),
+    { id: 'back' as const, label: '[Zurück]' },
+  ];
+
+  useEffect(() => {
+    setSelectedAction(0);
+  }, [isDraft]);
+
+  const sortedSteps = recipe?.productionSteps
+    ? [...recipe.productionSteps].sort((a, b) => a.stepNumber - b.stepNumber)
+    : [];

  const loadRecipe = useCallback(() => {
    setLoading(true);
@ -30,10 +59,65 @@ export function RecipeDetailScreen() {
  useEffect(() => { if (recipeId) loadRecipe(); }, [loadRecipe, recipeId]);

  useInput((_input, key) => {
-    if (loading) return;
-    if (key.backspace || key.escape) back();
+    if (loading || actionLoading) return;
+
+    if (mode === 'menu') {
+      if (key.upArrow) setSelectedAction((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelectedAction((i) => Math.min(menuItems.length - 1, i + 1));
+      if (key.return) void handleAction();
+      if (key.backspace || key.escape) back();
+    }
+
+    if (mode === 'select-step-to-remove') {
+      if (key.upArrow) setSelectedStepIndex((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelectedStepIndex((i) => Math.min(sortedSteps.length - 1, i + 1));
+      if (key.return && sortedSteps.length > 0) {
+        setStepToRemove(sortedSteps[selectedStepIndex] ?? null);
+        setMode('confirm-remove');
+      }
+      if (key.escape) { setMode('menu'); setSelectedStepIndex(0); }
+    }
  });

+  const handleAction = async () => {
+    if (!recipe) return;
+    const item = menuItems[selectedAction];
+    if (!item) return;
+
+    switch (item.id) {
+      case 'add-step':
+        navigate('recipe-add-production-step', { recipeId });
+        break;
+      case 'remove-step':
+        if (sortedSteps.length === 0) {
+          setError('Keine Produktionsschritte vorhanden.');
+          return;
+        }
+        setSelectedStepIndex(0);
+        setMode('select-step-to-remove');
+        break;
+      case 'back':
+        back();
+        break;
+    }
+  };
+
+  const handleRemoveStep = useCallback(async () => {
+    if (!recipe || !stepToRemove) return;
+    setMode('menu');
+    setActionLoading(true);
+    try {
+      await client.recipes.removeProductionStep(recipe.id, stepToRemove.stepNumber);
+      const updated = await client.recipes.getById(recipe.id);
+      setRecipe(updated);
+      setSuccessMessage(`Schritt ${stepToRemove.stepNumber} entfernt.`);
+    } catch (err: unknown) {
+      setError(errorMessage(err));
+    }
+    setActionLoading(false);
+    setStepToRemove(null);
+  }, [recipe, stepToRemove]);
+
  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>;
@ -45,6 +129,7 @@ export function RecipeDetailScreen() {
      <Text color="cyan" bold>Rezept: {recipe.name}</Text>

      {error && <ErrorDisplay message={error} onDismiss={() => setError(null)} />}
+      {successMessage && <SuccessDisplay message={successMessage} onDismiss={() => setSuccessMessage(null)} />}

      <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={2} paddingY={1}>
        <Box gap={2}>
@ -93,10 +178,60 @@ export function RecipeDetailScreen() {
            ))}
          </Box>
        )}
+
+        {sortedSteps.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text color="gray">Produktionsschritte:</Text>
+            {sortedSteps.map((step) => (
+              <Box key={step.id} paddingLeft={2} gap={1}>
+                <Text color="yellow">{step.stepNumber}.</Text>
+                <Text>{step.description}</Text>
+                {step.durationMinutes != null && <Text color="gray">({step.durationMinutes} min)</Text>}
+                {step.temperatureCelsius != null && <Text color="gray">[{step.temperatureCelsius}°C]</Text>}
+              </Box>
+            ))}
+          </Box>
+        )}
      </Box>

+      {mode === 'select-step-to-remove' && (
+        <Box flexDirection="column">
+          <Text color="yellow" bold>Schritt zum Entfernen auswählen:</Text>
+          {sortedSteps.map((step, index) => (
+            <Box key={step.id}>
+              <Text color={index === selectedStepIndex ? 'cyan' : 'white'}>
+                {index === selectedStepIndex ? '▶ ' : '  '}Schritt {step.stepNumber}: {step.description}
+              </Text>
+            </Box>
+          ))}
+          <Text color="gray" dimColor>↑↓ auswählen · Enter bestätigen · Escape abbrechen</Text>
+        </Box>
+      )}
+
+      {mode === 'confirm-remove' && stepToRemove && (
+        <ConfirmDialog
+          message={`Schritt ${stepToRemove.stepNumber} "${stepToRemove.description}" entfernen?`}
+          onConfirm={() => void handleRemoveStep()}
+          onCancel={() => { setMode('menu'); setStepToRemove(null); }}
+        />
+      )}
+
+      {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>
+            </Box>
+          ))}
+        </Box>
+      )}
+
      <Box marginTop={1}>
-        <Text color="gray" dimColor>Backspace Zurück</Text>
+        <Text color="gray" dimColor>↑↓ navigieren · Enter ausführen · Backspace Zurück</Text>
      </Box>
    </Box>
  );
--- a/frontend/apps/cli/src/state/navigation-context.tsx
+++ b/frontend/apps/cli/src/state/navigation-context.tsx
@ -37,7 +37,8 @@ export type Screen =
  | 'production-menu'
  | 'recipe-list'
  | 'recipe-create'
-  | 'recipe-detail';
+  | 'recipe-detail'
+  | 'recipe-add-production-step';

 interface NavigationState {
  current: Screen;
--- a/frontend/packages/api-client/src/index.ts
+++ b/frontend/packages/api-client/src/index.ts
@ -82,8 +82,10 @@ export type {
  UpdateStorageLocationRequest,
  RecipeDTO,
  IngredientDTO,
+  ProductionStepDTO,
  CreateRecipeRequest,
  AddRecipeIngredientRequest,
+  AddProductionStepRequest,
 } from '@effigenix/types';

 // Resource types (runtime, stay in resource files)
--- a/frontend/packages/api-client/src/resources/recipes.ts
+++ b/frontend/packages/api-client/src/resources/recipes.ts
@ -9,8 +9,10 @@ import type { AxiosInstance } from 'axios';
 import type {
  RecipeDTO,
  IngredientDTO,
+  ProductionStepDTO,
  CreateRecipeRequest,
  AddRecipeIngredientRequest,
+  AddProductionStepRequest,
 } from '@effigenix/types';

 export type RecipeType = 'RAW_MATERIAL' | 'INTERMEDIATE' | 'FINISHED_PRODUCT';
@ -25,8 +27,10 @@ export const RECIPE_TYPE_LABELS: Record<RecipeType, string> = {
 export type {
  RecipeDTO,
  IngredientDTO,
+  ProductionStepDTO,
  CreateRecipeRequest,
  AddRecipeIngredientRequest,
+  AddProductionStepRequest,
 };

 // ── Resource factory ─────────────────────────────────────────────────────────
@ -60,6 +64,15 @@ export function createRecipesResource(client: AxiosInstance) {
      const res = await client.get<RecipeDTO>(`${BASE}/${recipeId}`);
      return res.data;
    },
+
+    async addProductionStep(id: string, request: AddProductionStepRequest): Promise<RecipeDTO> {
+      const res = await client.post<RecipeDTO>(`${BASE}/${id}/steps`, request);
+      return res.data;
+    },
+
+    async removeProductionStep(id: string, stepNumber: number): Promise<void> {
+      await client.delete(`${BASE}/${id}/steps/${stepNumber}`);
+    },
  };
 }

--- a/frontend/packages/types/src/production.ts
+++ b/frontend/packages/types/src/production.ts
@ -8,7 +8,9 @@ import type { components } from './generated/api';
 // Response DTOs
 export type RecipeDTO = components['schemas']['RecipeResponse'];
 export type IngredientDTO = components['schemas']['IngredientResponse'];
+export type ProductionStepDTO = components['schemas']['ProductionStepResponse'];

 // Request types
 export type CreateRecipeRequest = components['schemas']['CreateRecipeRequest'];
 export type AddRecipeIngredientRequest = components['schemas']['AddRecipeIngredientRequest'];
+export type AddProductionStepRequest = components['schemas']['AddProductionStepRequest'];