mirror of
https://github.com/s-frick/effigenix.git
synced 2026-03-28 12:09:35 +01:00
feat(tui): Produktionschargen und Bestandsverwaltung in TUI einbauen
Chargen: Liste mit Statusfilter, Planen, Starten, Verbrauch erfassen, Abschließen und Stornieren. Bestände: Liste, Anlegen, Detailansicht mit Chargen sperren/entsperren/entfernen. Types, API-Client, Hooks, Navigation und Screens für beide Bounded Contexts vollständig ergänzt.
This commit is contained in:
Sebastian Frick
parent
b2b3b59ce9
commit
5fe0dfc139
21 changed files with 2385 additions and 31 deletions
|
|
@ -45,6 +45,14 @@ import { RecipeCreateScreen } from './components/production/RecipeCreateScreen.j
|
|||
import { RecipeDetailScreen } from './components/production/RecipeDetailScreen.js';
|
||||
import { AddProductionStepScreen } from './components/production/AddProductionStepScreen.js';
|
||||
import { AddIngredientScreen } from './components/production/AddIngredientScreen.js';
|
||||
import { BatchListScreen } from './components/production/BatchListScreen.js';
|
||||
import { BatchDetailScreen } from './components/production/BatchDetailScreen.js';
|
||||
import { BatchPlanScreen } from './components/production/BatchPlanScreen.js';
|
||||
import { RecordConsumptionScreen } from './components/production/RecordConsumptionScreen.js';
|
||||
import { CompleteBatchScreen } from './components/production/CompleteBatchScreen.js';
|
||||
import { StockListScreen } from './components/inventory/StockListScreen.js';
|
||||
import { StockDetailScreen } from './components/inventory/StockDetailScreen.js';
|
||||
import { StockCreateScreen } from './components/inventory/StockCreateScreen.js';
|
||||
|
||||
function ScreenRouter() {
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
|
|
@ -108,6 +116,9 @@ function ScreenRouter() {
|
|||
{current === 'storage-location-detail' && <StorageLocationDetailScreen />}
|
||||
{current === 'stock-batch-entry' && <StockBatchEntryScreen />}
|
||||
{current === 'stock-add-batch' && <AddBatchScreen />}
|
||||
{current === 'stock-list' && <StockListScreen />}
|
||||
{current === 'stock-detail' && <StockDetailScreen />}
|
||||
{current === 'stock-create' && <StockCreateScreen />}
|
||||
{/* Produktion */}
|
||||
{current === 'production-menu' && <ProductionMenu />}
|
||||
{current === 'recipe-list' && <RecipeListScreen />}
|
||||
|
|
@ -115,6 +126,11 @@ function ScreenRouter() {
|
|||
{current === 'recipe-detail' && <RecipeDetailScreen />}
|
||||
{current === 'recipe-add-production-step' && <AddProductionStepScreen />}
|
||||
{current === 'recipe-add-ingredient' && <AddIngredientScreen />}
|
||||
{current === 'batch-list' && <BatchListScreen />}
|
||||
{current === 'batch-detail' && <BatchDetailScreen />}
|
||||
{current === 'batch-plan' && <BatchPlanScreen />}
|
||||
{current === 'batch-record-consumption' && <RecordConsumptionScreen />}
|
||||
{current === 'batch-complete' && <CompleteBatchScreen />}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ interface MenuItem {
|
|||
|
||||
const MENU_ITEMS: MenuItem[] = [
|
||||
{ label: 'Lagerorte', screen: 'storage-location-list', description: 'Lagerorte verwalten (Kühlräume, Trockenlager, …)' },
|
||||
{ label: 'Bestände', screen: 'stock-list', description: 'Bestände einsehen, anlegen und Chargen verwalten' },
|
||||
{ label: 'Charge einbuchen', screen: 'stock-batch-entry', description: 'Neue Charge in einen Bestand einbuchen' },
|
||||
];
|
||||
|
||||
|
|
|
|||
216
frontend/apps/cli/src/components/inventory/StockCreateScreen.tsx
Normal file
216
frontend/apps/cli/src/components/inventory/StockCreateScreen.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useStocks } from '../../hooks/useStocks.js';
|
||||
import { useArticles } from '../../hooks/useArticles.js';
|
||||
import { useStorageLocations } from '../../hooks/useStorageLocations.js';
|
||||
import { FormInput } from '../shared/FormInput.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { ArticlePicker } from '../shared/ArticlePicker.js';
|
||||
import { UOM_VALUES, UOM_LABELS } from '@effigenix/api-client';
|
||||
import type { UoM, ArticleDTO, StorageLocationDTO } from '@effigenix/api-client';
|
||||
|
||||
type Field = 'articleId' | 'storageLocationId' | 'minimumLevelAmount' | 'minimumLevelUnit' | 'minimumShelfLifeDays';
|
||||
const FIELDS: Field[] = ['articleId', 'storageLocationId', 'minimumLevelAmount', 'minimumLevelUnit', 'minimumShelfLifeDays'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
articleId: 'Artikel *',
|
||||
storageLocationId: 'Lagerort * (↑↓ auswählen)',
|
||||
minimumLevelAmount: 'Mindestbestand Menge',
|
||||
minimumLevelUnit: 'Mindestbestand Einheit (←→ wechseln)',
|
||||
minimumShelfLifeDays: 'Mindest-MHD (Tage)',
|
||||
};
|
||||
|
||||
export function StockCreateScreen() {
|
||||
const { replace, back } = useNavigation();
|
||||
const { createStock, loading, error, clearError } = useStocks();
|
||||
const { articles, fetchArticles } = useArticles();
|
||||
const { storageLocations, fetchStorageLocations } = useStorageLocations();
|
||||
|
||||
const [articleQuery, setArticleQuery] = useState('');
|
||||
const [selectedArticle, setSelectedArticle] = useState<{ id: string; name: string } | null>(null);
|
||||
const [locationIdx, setLocationIdx] = useState(0);
|
||||
const [minimumLevelAmount, setMinimumLevelAmount] = useState('');
|
||||
const [uomIdx, setUomIdx] = useState(0);
|
||||
const [minimumShelfLifeDays, setMinimumShelfLifeDays] = useState('');
|
||||
const [activeField, setActiveField] = useState<Field>('articleId');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
|
||||
|
||||
useEffect(() => {
|
||||
void fetchArticles();
|
||||
void fetchStorageLocations();
|
||||
}, [fetchArticles, fetchStorageLocations]);
|
||||
|
||||
const handleArticleSelect = (article: ArticleDTO) => {
|
||||
setSelectedArticle({ id: article.id, name: `${article.name} (${article.articleNumber})` });
|
||||
setArticleQuery('');
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Partial<Record<Field, string>> = {};
|
||||
if (!selectedArticle) errors.articleId = 'Artikel muss ausgewählt werden.';
|
||||
if (storageLocations.length === 0) errors.storageLocationId = 'Kein Lagerort verfügbar.';
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const location = storageLocations[locationIdx] as StorageLocationDTO;
|
||||
const result = await createStock({
|
||||
articleId: selectedArticle!.id,
|
||||
storageLocationId: location.id,
|
||||
...(minimumLevelAmount.trim() ? { minimumLevelAmount: minimumLevelAmount.trim() } : {}),
|
||||
...(minimumLevelAmount.trim() ? { minimumLevelUnit: UOM_VALUES[uomIdx] as string } : {}),
|
||||
...(minimumShelfLifeDays.trim() ? { minimumShelfLifeDays: parseInt(minimumShelfLifeDays, 10) } : {}),
|
||||
});
|
||||
if (result) replace('stock-list');
|
||||
};
|
||||
|
||||
const handleFieldSubmit = (field: Field) => (_value: string) => {
|
||||
const idx = FIELDS.indexOf(field);
|
||||
if (idx < FIELDS.length - 1) {
|
||||
setActiveField(FIELDS[idx + 1] ?? field);
|
||||
} else {
|
||||
void handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
useInput((_input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (activeField === 'articleId') {
|
||||
if (key.escape) back();
|
||||
if (key.tab || key.downArrow) setActiveField('storageLocationId');
|
||||
if (key.return && selectedArticle && !articleQuery) setActiveField('storageLocationId');
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeField === 'storageLocationId') {
|
||||
if (key.upArrow) {
|
||||
if (locationIdx > 0) setLocationIdx((i) => i - 1);
|
||||
else setActiveField('articleId');
|
||||
return;
|
||||
}
|
||||
if (key.downArrow) {
|
||||
if (locationIdx < storageLocations.length - 1) setLocationIdx((i) => i + 1);
|
||||
else setActiveField('minimumLevelAmount');
|
||||
return;
|
||||
}
|
||||
if (key.return || key.tab) {
|
||||
setActiveField('minimumLevelAmount');
|
||||
return;
|
||||
}
|
||||
if (key.escape) back();
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeField === 'minimumLevelUnit') {
|
||||
if (key.leftArrow || key.rightArrow) {
|
||||
const dir = key.rightArrow ? 1 : -1;
|
||||
setUomIdx((i) => (i + dir + UOM_VALUES.length) % UOM_VALUES.length);
|
||||
return;
|
||||
}
|
||||
if (key.return) {
|
||||
handleFieldSubmit('minimumLevelUnit')('');
|
||||
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();
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box flexDirection="column" alignItems="center" paddingY={2}>
|
||||
<LoadingSpinner label="Bestand wird angelegt..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const uomLabel = UOM_LABELS[UOM_VALUES[uomIdx] as UoM] ?? UOM_VALUES[uomIdx];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="cyan" bold>Neuer Bestand</Text>
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
<Box flexDirection="column" gap={1} width={60}>
|
||||
{/* Article picker */}
|
||||
<Box flexDirection="column">
|
||||
<ArticlePicker
|
||||
articles={articles}
|
||||
query={articleQuery}
|
||||
onQueryChange={setArticleQuery}
|
||||
onSelect={handleArticleSelect}
|
||||
focus={activeField === 'articleId'}
|
||||
{...(selectedArticle ? { selectedName: selectedArticle.name } : {})}
|
||||
/>
|
||||
{fieldErrors.articleId && <Text color="red">{fieldErrors.articleId}</Text>}
|
||||
</Box>
|
||||
|
||||
{/* Storage location selector */}
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'storageLocationId' ? 'cyan' : 'gray'}>{FIELD_LABELS.storageLocationId}</Text>
|
||||
{fieldErrors.storageLocationId && <Text color="red">{fieldErrors.storageLocationId}</Text>}
|
||||
<Box flexDirection="column" borderStyle="round" borderColor={activeField === 'storageLocationId' ? 'cyan' : 'gray'} paddingX={1}>
|
||||
{storageLocations.length === 0 ? (
|
||||
<Text color="gray" dimColor>Keine Lagerorte verfügbar.</Text>
|
||||
) : (
|
||||
storageLocations.slice(Math.max(0, locationIdx - 3), locationIdx + 4).map((loc, i) => {
|
||||
const actualIdx = Math.max(0, locationIdx - 3) + i;
|
||||
const isSelected = actualIdx === locationIdx;
|
||||
return (
|
||||
<Text key={loc.id} color={isSelected ? 'cyan' : 'white'}>
|
||||
{isSelected ? '▶ ' : ' '}{loc.name} ({loc.storageType})
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Minimum level */}
|
||||
<FormInput
|
||||
label={FIELD_LABELS.minimumLevelAmount}
|
||||
value={minimumLevelAmount}
|
||||
onChange={setMinimumLevelAmount}
|
||||
onSubmit={handleFieldSubmit('minimumLevelAmount')}
|
||||
focus={activeField === 'minimumLevelAmount'}
|
||||
placeholder="optional"
|
||||
/>
|
||||
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'minimumLevelUnit' ? 'cyan' : 'gray'}>
|
||||
{FIELD_LABELS.minimumLevelUnit}: <Text bold color="white">{activeField === 'minimumLevelUnit' ? `< ${uomLabel} >` : uomLabel}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<FormInput
|
||||
label={FIELD_LABELS.minimumShelfLifeDays}
|
||||
value={minimumShelfLifeDays}
|
||||
onChange={setMinimumShelfLifeDays}
|
||||
onSubmit={handleFieldSubmit('minimumShelfLifeDays')}
|
||||
focus={activeField === 'minimumShelfLifeDays'}
|
||||
placeholder="optional, z.B. 30"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
Tab/↑↓ Feld wechseln · ←→ Einheit · Enter bestätigen/speichern · Escape Abbrechen
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
315
frontend/apps/cli/src/components/inventory/StockDetailScreen.tsx
Normal file
315
frontend/apps/cli/src/components/inventory/StockDetailScreen.tsx
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import TextInput from 'ink-text-input';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useStocks } from '../../hooks/useStocks.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { SuccessDisplay } from '../shared/SuccessDisplay.js';
|
||||
import { STOCK_BATCH_STATUS_LABELS } from '@effigenix/api-client';
|
||||
import type { StockBatchStatus } from '@effigenix/api-client';
|
||||
|
||||
type Mode = 'view' | 'menu' | 'batch-actions' | 'block-reason' | 'remove-amount' | 'remove-unit';
|
||||
|
||||
const BATCH_STATUS_COLORS: Record<string, string> = {
|
||||
AVAILABLE: 'green',
|
||||
EXPIRING_SOON: 'yellow',
|
||||
EXPIRED: 'red',
|
||||
BLOCKED: 'magenta',
|
||||
};
|
||||
|
||||
export function StockDetailScreen() {
|
||||
const { params, back } = useNavigation();
|
||||
const { stock, loading, error, fetchStock, blockBatch, unblockBatch, removeBatch, clearError } = useStocks();
|
||||
const [mode, setMode] = useState<Mode>('view');
|
||||
const [menuIndex, setMenuIndex] = useState(0);
|
||||
const [batchIndex, setBatchIndex] = useState(0);
|
||||
const [batchActionIndex, setBatchActionIndex] = useState(0);
|
||||
const [blockReason, setBlockReason] = useState('');
|
||||
const [removeAmount, setRemoveAmount] = useState('');
|
||||
const [removeUnit, setRemoveUnit] = useState('');
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
const stockId = params.stockId ?? '';
|
||||
|
||||
useEffect(() => {
|
||||
if (stockId) void fetchStock(stockId);
|
||||
}, [fetchStock, stockId]);
|
||||
|
||||
const batches = stock?.batches ?? [];
|
||||
const selectedBatch = batches[batchIndex];
|
||||
|
||||
const getBatchActions = () => {
|
||||
if (!selectedBatch) return [];
|
||||
const actions: { label: string; action: string }[] = [];
|
||||
if (selectedBatch.status === 'AVAILABLE' || selectedBatch.status === 'EXPIRING_SOON') {
|
||||
actions.push({ label: 'Sperren', action: 'block' });
|
||||
actions.push({ label: 'Entfernen', action: 'remove' });
|
||||
}
|
||||
if (selectedBatch.status === 'BLOCKED') {
|
||||
actions.push({ label: 'Entsperren', action: 'unblock' });
|
||||
}
|
||||
if (selectedBatch.status === 'EXPIRED') {
|
||||
actions.push({ label: 'Entfernen', action: 'remove' });
|
||||
}
|
||||
return actions;
|
||||
};
|
||||
|
||||
const batchActions = getBatchActions();
|
||||
|
||||
const handleBlock = async () => {
|
||||
if (!selectedBatch || !blockReason.trim()) return;
|
||||
const result = await blockBatch(stockId, selectedBatch.id!, blockReason.trim());
|
||||
if (result) {
|
||||
setSuccess('Charge gesperrt.');
|
||||
setMode('view');
|
||||
setBlockReason('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnblock = async () => {
|
||||
if (!selectedBatch) return;
|
||||
const result = await unblockBatch(stockId, selectedBatch.id!);
|
||||
if (result) {
|
||||
setSuccess('Charge entsperrt.');
|
||||
setMode('view');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = async () => {
|
||||
if (!selectedBatch || !removeAmount.trim() || !removeUnit.trim()) return;
|
||||
const result = await removeBatch(stockId, selectedBatch.id!, removeAmount.trim(), removeUnit.trim());
|
||||
if (result) {
|
||||
setSuccess('Menge entfernt.');
|
||||
setMode('view');
|
||||
setRemoveAmount('');
|
||||
setRemoveUnit('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatchAction = (action: string) => {
|
||||
switch (action) {
|
||||
case 'block':
|
||||
setMode('block-reason');
|
||||
setBlockReason('');
|
||||
break;
|
||||
case 'unblock':
|
||||
void handleUnblock();
|
||||
break;
|
||||
case 'remove':
|
||||
setMode('remove-amount');
|
||||
setRemoveAmount('');
|
||||
setRemoveUnit('');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{ label: 'Chargen verwalten', action: 'batches' },
|
||||
];
|
||||
|
||||
useInput((input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (mode === 'block-reason') {
|
||||
if (key.escape) setMode('batch-actions');
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'remove-amount') {
|
||||
if (key.escape) setMode('batch-actions');
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'remove-unit') {
|
||||
if (key.escape) setMode('remove-amount');
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'batch-actions') {
|
||||
if (key.upArrow) setBatchActionIndex((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setBatchActionIndex((i) => Math.min(batchActions.length - 1, i + 1));
|
||||
if (key.return && batchActions[batchActionIndex]) {
|
||||
handleBatchAction(batchActions[batchActionIndex].action);
|
||||
}
|
||||
if (key.escape) setMode('view');
|
||||
if (key.leftArrow) setBatchIndex((i) => Math.max(0, i - 1));
|
||||
if (key.rightArrow) setBatchIndex((i) => Math.min(batches.length - 1, i + 1));
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'menu') {
|
||||
if (key.upArrow) setMenuIndex((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setMenuIndex((i) => Math.min(MENU_ITEMS.length - 1, i + 1));
|
||||
if (key.return && MENU_ITEMS[menuIndex]) {
|
||||
if (MENU_ITEMS[menuIndex].action === 'batches' && batches.length > 0) {
|
||||
setMode('batch-actions');
|
||||
setBatchIndex(0);
|
||||
setBatchActionIndex(0);
|
||||
}
|
||||
}
|
||||
if (key.escape) setMode('view');
|
||||
return;
|
||||
}
|
||||
|
||||
// view mode
|
||||
if (input === 'm') {
|
||||
setMode('menu');
|
||||
setMenuIndex(0);
|
||||
}
|
||||
if (key.backspace || key.escape) back();
|
||||
});
|
||||
|
||||
if (loading && !stock) return <LoadingSpinner label="Lade Bestand..." />;
|
||||
|
||||
if (!stock) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
<Text color="red">Bestand nicht gefunden.</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box gap={2}>
|
||||
<Text color="cyan" bold>Bestand</Text>
|
||||
{loading && <Text color="gray"> (aktualisiere...)</Text>}
|
||||
</Box>
|
||||
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
{success && <SuccessDisplay message={success} onDismiss={() => setSuccess(null)} />}
|
||||
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Box><Text color="gray">Artikel: </Text><Text>{stock.articleId}</Text></Box>
|
||||
<Box><Text color="gray">Lagerort: </Text><Text>{stock.storageLocationId}</Text></Box>
|
||||
<Box><Text color="gray">Gesamtmenge: </Text><Text>{stock.totalQuantity}{stock.quantityUnit ? ` ${stock.quantityUnit}` : ''}</Text></Box>
|
||||
<Box><Text color="gray">Verfügbar: </Text><Text color="green">{stock.availableQuantity}{stock.quantityUnit ? ` ${stock.quantityUnit}` : ''}</Text></Box>
|
||||
{stock.minimumLevel && (
|
||||
<Box><Text color="gray">Mindestbest.: </Text><Text>{stock.minimumLevel.amount} {stock.minimumLevel.unit}</Text></Box>
|
||||
)}
|
||||
{stock.minimumShelfLifeDays != null && (
|
||||
<Box><Text color="gray">Min-MHD (d): </Text><Text>{stock.minimumShelfLifeDays}</Text></Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Batches table */}
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Text color="cyan" bold>Chargen ({batches.length})</Text>
|
||||
{batches.length === 0 ? (
|
||||
<Text color="gray" dimColor>Keine Chargen vorhanden.</Text>
|
||||
) : (
|
||||
<>
|
||||
<Box paddingX={1}>
|
||||
<Text color="gray" bold>{' Batch-ID'.padEnd(18)}</Text>
|
||||
<Text color="gray" bold>{'Typ'.padEnd(12)}</Text>
|
||||
<Text color="gray" bold>{'Menge'.padEnd(12)}</Text>
|
||||
<Text color="gray" bold>{'MHD'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>Status</Text>
|
||||
</Box>
|
||||
{batches.map((b, i) => {
|
||||
const isSelected = mode === 'batch-actions' && i === batchIndex;
|
||||
const textColor = isSelected ? 'cyan' : 'white';
|
||||
const statusColor = BATCH_STATUS_COLORS[b.status ?? ''] ?? 'white';
|
||||
const statusLabel = STOCK_BATCH_STATUS_LABELS[(b.status ?? '') as StockBatchStatus] ?? b.status;
|
||||
return (
|
||||
<Box key={b.id} paddingX={1}>
|
||||
<Text color={textColor}>{isSelected ? '▶ ' : ' '}</Text>
|
||||
<Text color={textColor}>{(b.batchId ?? '').substring(0, 14).padEnd(15)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{(b.batchType ?? '').padEnd(12)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{`${b.quantityAmount ?? ''} ${b.quantityUnit ?? ''}`.padEnd(12)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{(b.expiryDate ?? '').padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : statusColor}>{statusLabel}</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Modes */}
|
||||
{mode === 'menu' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
|
||||
<Text color="cyan" bold>Aktionen</Text>
|
||||
{MENU_ITEMS.map((item, i) => (
|
||||
<Text key={item.action} color={i === menuIndex ? 'cyan' : 'white'}>
|
||||
{i === menuIndex ? '▶ ' : ' '}{item.label}
|
||||
</Text>
|
||||
))}
|
||||
<Text color="gray" dimColor>↑↓ nav · Enter ausführen · Escape zurück</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{mode === 'batch-actions' && selectedBatch && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
|
||||
<Text color="cyan" bold>Charge: {selectedBatch.batchId} — Aktionen</Text>
|
||||
{batchActions.length === 0 ? (
|
||||
<Text color="gray" dimColor>Keine Aktionen verfügbar.</Text>
|
||||
) : (
|
||||
batchActions.map((a, i) => (
|
||||
<Text key={a.action} color={i === batchActionIndex ? 'cyan' : 'white'}>
|
||||
{i === batchActionIndex ? '▶ ' : ' '}{a.label}
|
||||
</Text>
|
||||
))
|
||||
)}
|
||||
<Text color="gray" dimColor>←→ Charge wechseln · ↑↓ Aktion · Enter ausführen · Escape zurück</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{mode === 'block-reason' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
|
||||
<Text color="yellow" bold>Sperrgrund eingeben:</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<TextInput
|
||||
value={blockReason}
|
||||
onChange={setBlockReason}
|
||||
onSubmit={() => void handleBlock()}
|
||||
focus={true}
|
||||
/>
|
||||
</Box>
|
||||
<Text color="gray" dimColor>Enter bestätigen · Escape abbrechen</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{mode === 'remove-amount' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
|
||||
<Text color="yellow" bold>Zu entfernende Menge:</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<TextInput
|
||||
value={removeAmount}
|
||||
onChange={setRemoveAmount}
|
||||
onSubmit={() => setMode('remove-unit')}
|
||||
focus={true}
|
||||
/>
|
||||
</Box>
|
||||
<Text color="gray" dimColor>Enter weiter · Escape abbrechen</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{mode === 'remove-unit' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
|
||||
<Text color="yellow" bold>Mengeneinheit (z.B. KILOGRAM):</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<TextInput
|
||||
value={removeUnit}
|
||||
onChange={setRemoveUnit}
|
||||
onSubmit={() => void handleRemove()}
|
||||
focus={true}
|
||||
/>
|
||||
</Box>
|
||||
<Text color="gray" dimColor>Enter bestätigen · Escape zurück</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
[m] Aktionsmenü · Backspace Zurück
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useStocks } from '../../hooks/useStocks.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
|
||||
export function StockListScreen() {
|
||||
const { navigate, back } = useNavigation();
|
||||
const { stocks, loading, error, fetchStocks, clearError } = useStocks();
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchStocks();
|
||||
}, [fetchStocks]);
|
||||
|
||||
useInput((input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setSelectedIndex((i) => Math.min(stocks.length - 1, i + 1));
|
||||
|
||||
if (key.return && stocks.length > 0) {
|
||||
const stock = stocks[selectedIndex];
|
||||
if (stock) navigate('stock-detail', { stockId: stock.id });
|
||||
}
|
||||
if (input === 'n') navigate('stock-create');
|
||||
if (input === 'r') void fetchStocks();
|
||||
if (key.backspace || key.escape) back();
|
||||
});
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box gap={2}>
|
||||
<Text color="cyan" bold>Bestände</Text>
|
||||
<Text color="gray" dimColor>({stocks.length})</Text>
|
||||
</Box>
|
||||
|
||||
{loading && <LoadingSpinner label="Lade Bestände..." />}
|
||||
{error && !loading && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
{!loading && !error && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Box paddingX={1}>
|
||||
<Text color="gray" bold>{' Artikel'.padEnd(20)}</Text>
|
||||
<Text color="gray" bold>{'Lagerort'.padEnd(20)}</Text>
|
||||
<Text color="gray" bold>{'Gesamt'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>{'Verfügbar'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>Chargen</Text>
|
||||
</Box>
|
||||
{stocks.length === 0 && (
|
||||
<Box paddingX={1} paddingY={1}>
|
||||
<Text color="gray" dimColor>Keine Bestände gefunden.</Text>
|
||||
</Box>
|
||||
)}
|
||||
{stocks.map((stock, index) => {
|
||||
const isSelected = index === selectedIndex;
|
||||
const textColor = isSelected ? 'cyan' : 'white';
|
||||
const totalStr = `${stock.totalQuantity}${stock.quantityUnit ? ` ${stock.quantityUnit}` : ''}`;
|
||||
const availStr = `${stock.availableQuantity}${stock.quantityUnit ? ` ${stock.quantityUnit}` : ''}`;
|
||||
const batchCount = stock.batches?.length ?? 0;
|
||||
return (
|
||||
<Box key={stock.id} paddingX={1}>
|
||||
<Text color={textColor}>{isSelected ? '▶ ' : ' '}</Text>
|
||||
<Text color={textColor}>{stock.articleId.substring(0, 16).padEnd(17)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{stock.storageLocationId.substring(0, 18).padEnd(20)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{totalStr.substring(0, 12).padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{availStr.substring(0, 12).padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{String(batchCount)}</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
↑↓ nav · Enter Details · [n] Neu · [r] Aktualisieren · Backspace Zurück
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import TextInput from 'ink-text-input';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useBatches } from '../../hooks/useBatches.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 { BATCH_STATUS_LABELS, UOM_LABELS } from '@effigenix/api-client';
|
||||
import type { BatchStatus, UoM } from '@effigenix/api-client';
|
||||
|
||||
type Mode = 'view' | 'menu' | 'confirm-start' | 'confirm-cancel' | 'cancel-reason';
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
PLANNED: 'yellow',
|
||||
IN_PRODUCTION: 'blue',
|
||||
COMPLETED: 'green',
|
||||
CANCELLED: 'red',
|
||||
};
|
||||
|
||||
export function BatchDetailScreen() {
|
||||
const { params, navigate, back } = useNavigation();
|
||||
const { batch, loading, error, fetchBatch, startBatch, cancelBatch, clearError } = useBatches();
|
||||
const [mode, setMode] = useState<Mode>('view');
|
||||
const [menuIndex, setMenuIndex] = useState(0);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [cancelReason, setCancelReason] = useState('');
|
||||
|
||||
const batchId = params.batchId ?? '';
|
||||
|
||||
useEffect(() => {
|
||||
if (batchId) void fetchBatch(batchId);
|
||||
}, [fetchBatch, batchId]);
|
||||
|
||||
const getMenuItems = () => {
|
||||
if (!batch) return [];
|
||||
const items: { label: string; action: string }[] = [];
|
||||
if (batch.status === 'PLANNED') {
|
||||
items.push({ label: 'Charge starten', action: 'start' });
|
||||
items.push({ label: 'Charge stornieren', action: 'cancel' });
|
||||
}
|
||||
if (batch.status === 'IN_PRODUCTION') {
|
||||
items.push({ label: 'Verbrauch erfassen', action: 'consumption' });
|
||||
items.push({ label: 'Charge abschließen', action: 'complete' });
|
||||
items.push({ label: 'Charge stornieren', action: 'cancel' });
|
||||
}
|
||||
return items;
|
||||
};
|
||||
|
||||
const menuItems = getMenuItems();
|
||||
|
||||
const handleMenuAction = (action: string) => {
|
||||
switch (action) {
|
||||
case 'start':
|
||||
setMode('confirm-start');
|
||||
break;
|
||||
case 'cancel':
|
||||
setMode('cancel-reason');
|
||||
setCancelReason('');
|
||||
break;
|
||||
case 'consumption':
|
||||
navigate('batch-record-consumption', { batchId });
|
||||
break;
|
||||
case 'complete':
|
||||
navigate('batch-complete', { batchId });
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleStart = async () => {
|
||||
const result = await startBatch(batchId);
|
||||
if (result) {
|
||||
setSuccess('Charge wurde gestartet.');
|
||||
setMode('view');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (!cancelReason.trim()) return;
|
||||
const result = await cancelBatch(batchId, cancelReason.trim());
|
||||
if (result) {
|
||||
setSuccess('Charge wurde storniert.');
|
||||
setMode('view');
|
||||
}
|
||||
};
|
||||
|
||||
useInput((input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (mode === 'cancel-reason') {
|
||||
if (key.escape) setMode('view');
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'confirm-start' || mode === 'confirm-cancel') return;
|
||||
|
||||
if (mode === 'menu') {
|
||||
if (key.upArrow) setMenuIndex((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setMenuIndex((i) => Math.min(menuItems.length - 1, i + 1));
|
||||
if (key.return && menuItems[menuIndex]) {
|
||||
handleMenuAction(menuItems[menuIndex].action);
|
||||
}
|
||||
if (key.escape) setMode('view');
|
||||
return;
|
||||
}
|
||||
|
||||
// view mode
|
||||
if (input === 'm' && menuItems.length > 0) {
|
||||
setMode('menu');
|
||||
setMenuIndex(0);
|
||||
}
|
||||
if (key.backspace || key.escape) back();
|
||||
});
|
||||
|
||||
if (loading && !batch) {
|
||||
return <LoadingSpinner label="Lade Charge..." />;
|
||||
}
|
||||
|
||||
if (!batch) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
<Text color="red">Charge nicht gefunden.</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const statusLabel = BATCH_STATUS_LABELS[batch.status as BatchStatus] ?? batch.status;
|
||||
const statusColor = STATUS_COLORS[batch.status ?? ''] ?? 'white';
|
||||
const uomLabel = (u: string | undefined) => (u ? UOM_LABELS[u as UoM] ?? u : '');
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box gap={2}>
|
||||
<Text color="cyan" bold>Charge: {batch.batchNumber}</Text>
|
||||
<Text color={statusColor} bold>[{statusLabel}]</Text>
|
||||
{loading && <Text color="gray"> (aktualisiere...)</Text>}
|
||||
</Box>
|
||||
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
{success && <SuccessDisplay message={success} onDismiss={() => setSuccess(null)} />}
|
||||
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Box><Text color="gray">Rezept-ID: </Text><Text>{batch.recipeId}</Text></Box>
|
||||
<Box><Text color="gray">Geplante Menge: </Text><Text>{batch.plannedQuantity} {uomLabel(batch.plannedQuantityUnit)}</Text></Box>
|
||||
<Box><Text color="gray">Prod.-Datum: </Text><Text>{batch.productionDate}</Text></Box>
|
||||
<Box><Text color="gray">MHD: </Text><Text>{batch.bestBeforeDate}</Text></Box>
|
||||
{batch.actualQuantity && (
|
||||
<Box><Text color="gray">Ist-Menge: </Text><Text>{batch.actualQuantity} {uomLabel(batch.actualQuantityUnit)}</Text></Box>
|
||||
)}
|
||||
{batch.waste && (
|
||||
<Box><Text color="gray">Ausschuss: </Text><Text>{batch.waste} {uomLabel(batch.wasteUnit)}</Text></Box>
|
||||
)}
|
||||
{batch.remarks && (
|
||||
<Box><Text color="gray">Bemerkungen: </Text><Text>{batch.remarks}</Text></Box>
|
||||
)}
|
||||
{batch.completedAt && (
|
||||
<Box><Text color="gray">Abgeschlossen: </Text><Text>{new Date(batch.completedAt).toLocaleString('de-DE')}</Text></Box>
|
||||
)}
|
||||
{batch.cancellationReason && (
|
||||
<Box><Text color="gray">Stornogrund: </Text><Text color="red">{batch.cancellationReason}</Text></Box>
|
||||
)}
|
||||
{batch.cancelledAt && (
|
||||
<Box><Text color="gray">Storniert am: </Text><Text>{new Date(batch.cancelledAt).toLocaleString('de-DE')}</Text></Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Consumptions */}
|
||||
{batch.consumptions && batch.consumptions.length > 0 && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Text color="cyan" bold>Verbrauchsmaterial ({batch.consumptions.length})</Text>
|
||||
<Box paddingX={1}>
|
||||
<Text color="gray" bold>{'Artikel'.padEnd(20)}</Text>
|
||||
<Text color="gray" bold>{'Menge'.padEnd(16)}</Text>
|
||||
<Text color="gray" bold>Erfasst am</Text>
|
||||
</Box>
|
||||
{batch.consumptions.map((c) => (
|
||||
<Box key={c.id} paddingX={1}>
|
||||
<Text>{(c.articleId ?? '').substring(0, 18).padEnd(20)}</Text>
|
||||
<Text>{`${c.quantityUsed ?? ''} ${uomLabel(c.quantityUsedUnit)}`.padEnd(16)}</Text>
|
||||
<Text color="gray">{c.consumedAt ? new Date(c.consumedAt).toLocaleString('de-DE') : ''}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Modes */}
|
||||
{mode === 'menu' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
|
||||
<Text color="cyan" bold>Aktionen</Text>
|
||||
{menuItems.map((item, i) => (
|
||||
<Text key={item.action} color={i === menuIndex ? 'cyan' : 'white'}>
|
||||
{i === menuIndex ? '▶ ' : ' '}{item.label}
|
||||
</Text>
|
||||
))}
|
||||
<Text color="gray" dimColor>↑↓ nav · Enter ausführen · Escape zurück</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{mode === 'confirm-start' && (
|
||||
<ConfirmDialog
|
||||
message="Charge starten? Status wird auf 'In Produktion' gesetzt."
|
||||
onConfirm={() => void handleStart()}
|
||||
onCancel={() => setMode('view')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{mode === 'cancel-reason' && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
|
||||
<Text color="yellow" bold>Stornogrund eingeben:</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<TextInput
|
||||
value={cancelReason}
|
||||
onChange={setCancelReason}
|
||||
onSubmit={() => void handleCancel()}
|
||||
focus={true}
|
||||
/>
|
||||
</Box>
|
||||
<Text color="gray" dimColor>Enter bestätigen · Escape abbrechen</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
{menuItems.length > 0 ? '[m] Aktionsmenü · ' : ''}Backspace Zurück
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
112
frontend/apps/cli/src/components/production/BatchListScreen.tsx
Normal file
112
frontend/apps/cli/src/components/production/BatchListScreen.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useBatches } from '../../hooks/useBatches.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { BATCH_STATUS_LABELS } from '@effigenix/api-client';
|
||||
import type { BatchStatus } from '@effigenix/api-client';
|
||||
|
||||
const STATUS_FILTERS: { key: string; label: string; value: BatchStatus | undefined }[] = [
|
||||
{ key: 'a', label: 'ALLE', value: undefined },
|
||||
{ key: 'P', label: 'GEPLANT', value: 'PLANNED' },
|
||||
{ key: 'I', label: 'IN PRODUKTION', value: 'IN_PRODUCTION' },
|
||||
{ key: 'C', label: 'ABGESCHLOSSEN', value: 'COMPLETED' },
|
||||
{ key: 'X', label: 'STORNIERT', value: 'CANCELLED' },
|
||||
];
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
PLANNED: 'yellow',
|
||||
IN_PRODUCTION: 'blue',
|
||||
COMPLETED: 'green',
|
||||
CANCELLED: 'red',
|
||||
};
|
||||
|
||||
export function BatchListScreen() {
|
||||
const { navigate, back } = useNavigation();
|
||||
const { batches, loading, error, fetchBatches, clearError } = useBatches();
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [statusFilter, setStatusFilter] = useState<BatchStatus | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchBatches(statusFilter);
|
||||
}, [fetchBatches, statusFilter]);
|
||||
|
||||
useInput((input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setSelectedIndex((i) => Math.min(batches.length - 1, i + 1));
|
||||
|
||||
if (key.return && batches.length > 0) {
|
||||
const batch = batches[selectedIndex];
|
||||
if (batch?.id) navigate('batch-detail', { batchId: batch.id });
|
||||
}
|
||||
if (input === 'n') navigate('batch-plan');
|
||||
if (key.backspace || key.escape) back();
|
||||
|
||||
for (const filter of STATUS_FILTERS) {
|
||||
if (input === filter.key) {
|
||||
setStatusFilter(filter.value);
|
||||
setSelectedIndex(0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const activeFilterLabel = STATUS_FILTERS.find((f) => f.value === statusFilter)?.label ?? 'ALLE';
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box gap={2}>
|
||||
<Text color="cyan" bold>Chargen</Text>
|
||||
<Text color="gray" dimColor>({batches.length})</Text>
|
||||
<Text color="gray" dimColor>Filter: </Text>
|
||||
<Text color="yellow" bold>{activeFilterLabel}</Text>
|
||||
</Box>
|
||||
|
||||
{loading && <LoadingSpinner label="Lade Chargen..." />}
|
||||
{error && !loading && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
{!loading && !error && (
|
||||
<Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
|
||||
<Box paddingX={1}>
|
||||
<Text color="gray" bold>{' Chargen-Nr.'.padEnd(18)}</Text>
|
||||
<Text color="gray" bold>{'Menge'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>{'Prod.-Datum'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>{'MHD'.padEnd(14)}</Text>
|
||||
<Text color="gray" bold>Status</Text>
|
||||
</Box>
|
||||
{batches.length === 0 && (
|
||||
<Box paddingX={1} paddingY={1}>
|
||||
<Text color="gray" dimColor>Keine Chargen gefunden.</Text>
|
||||
</Box>
|
||||
)}
|
||||
{batches.map((batch, index) => {
|
||||
const isSelected = index === selectedIndex;
|
||||
const textColor = isSelected ? 'cyan' : 'white';
|
||||
const statusColor = STATUS_COLORS[batch.status ?? ''] ?? 'white';
|
||||
const statusLabel = BATCH_STATUS_LABELS[(batch.status ?? '') as BatchStatus] ?? batch.status;
|
||||
const qty = `${batch.plannedQuantity ?? ''} ${batch.plannedQuantityUnit ?? ''}`;
|
||||
return (
|
||||
<Box key={batch.id} paddingX={1}>
|
||||
<Text color={textColor}>{isSelected ? '▶ ' : ' '}</Text>
|
||||
<Text color={textColor}>{(batch.batchNumber ?? '').substring(0, 14).padEnd(15)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{qty.substring(0, 12).padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{(batch.productionDate ?? '').padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : 'gray'}>{(batch.bestBeforeDate ?? '').padEnd(14)}</Text>
|
||||
<Text color={isSelected ? 'cyan' : statusColor}>{statusLabel}</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
↑↓ nav · Enter Details · [n] Neu · [a] Alle [P] Geplant [I] In Prod. [C] Abgeschl. [X] Storniert · Backspace Zurück
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
191
frontend/apps/cli/src/components/production/BatchPlanScreen.tsx
Normal file
191
frontend/apps/cli/src/components/production/BatchPlanScreen.tsx
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useBatches } from '../../hooks/useBatches.js';
|
||||
import { useRecipes } from '../../hooks/useRecipes.js';
|
||||
import { FormInput } from '../shared/FormInput.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { UOM_VALUES, UOM_LABELS } from '@effigenix/api-client';
|
||||
import type { UoM, RecipeSummaryDTO } from '@effigenix/api-client';
|
||||
|
||||
type Field = 'recipe' | 'quantity' | 'unit' | 'productionDate' | 'bestBeforeDate';
|
||||
const FIELDS: Field[] = ['recipe', 'quantity', 'unit', 'productionDate', 'bestBeforeDate'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
recipe: 'Rezept (↑↓ auswählen)',
|
||||
quantity: 'Geplante Menge *',
|
||||
unit: 'Mengeneinheit * (←→ wechseln)',
|
||||
productionDate: 'Produktionsdatum * (YYYY-MM-DD)',
|
||||
bestBeforeDate: 'MHD * (YYYY-MM-DD)',
|
||||
};
|
||||
|
||||
export function BatchPlanScreen() {
|
||||
const { replace, back } = useNavigation();
|
||||
const { planBatch, loading, error, clearError } = useBatches();
|
||||
const { recipes, fetchRecipes } = useRecipes();
|
||||
|
||||
const [quantity, setQuantity] = useState('');
|
||||
const [uomIdx, setUomIdx] = useState(0);
|
||||
const [productionDate, setProductionDate] = useState('');
|
||||
const [bestBeforeDate, setBestBeforeDate] = useState('');
|
||||
const [recipeIdx, setRecipeIdx] = useState(0);
|
||||
const [activeField, setActiveField] = useState<Field>('recipe');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
|
||||
|
||||
useEffect(() => {
|
||||
void fetchRecipes('ACTIVE');
|
||||
}, [fetchRecipes]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Partial<Record<Field, string>> = {};
|
||||
if (recipes.length === 0) errors.recipe = 'Kein aktives Rezept verfügbar.';
|
||||
if (!quantity.trim()) errors.quantity = 'Menge ist erforderlich.';
|
||||
if (!productionDate.trim() || !/^\d{4}-\d{2}-\d{2}$/.test(productionDate)) errors.productionDate = 'Format: YYYY-MM-DD';
|
||||
if (!bestBeforeDate.trim() || !/^\d{4}-\d{2}-\d{2}$/.test(bestBeforeDate)) errors.bestBeforeDate = 'Format: YYYY-MM-DD';
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const recipe = recipes[recipeIdx] as RecipeSummaryDTO;
|
||||
const result = await planBatch({
|
||||
recipeId: recipe.id,
|
||||
plannedQuantity: quantity.trim(),
|
||||
plannedQuantityUnit: UOM_VALUES[uomIdx] as string,
|
||||
productionDate: productionDate.trim(),
|
||||
bestBeforeDate: bestBeforeDate.trim(),
|
||||
});
|
||||
if (result?.id) replace('batch-detail', { batchId: result.id });
|
||||
};
|
||||
|
||||
const handleFieldSubmit = (field: Field) => (_value: string) => {
|
||||
const idx = FIELDS.indexOf(field);
|
||||
if (idx < FIELDS.length - 1) {
|
||||
setActiveField(FIELDS[idx + 1] ?? field);
|
||||
} else {
|
||||
void handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
useInput((_input, key) => {
|
||||
if (loading) return;
|
||||
|
||||
if (activeField === 'recipe') {
|
||||
if (key.upArrow) setRecipeIdx((i) => Math.max(0, i - 1));
|
||||
if (key.downArrow) setRecipeIdx((i) => Math.min(recipes.length - 1, i + 1));
|
||||
if (key.return || key.tab) setActiveField('quantity');
|
||||
if (key.escape) back();
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeField === 'unit') {
|
||||
if (key.leftArrow || key.rightArrow) {
|
||||
const dir = key.rightArrow ? 1 : -1;
|
||||
setUomIdx((i) => (i + dir + UOM_VALUES.length) % UOM_VALUES.length);
|
||||
return;
|
||||
}
|
||||
if (key.return) {
|
||||
handleFieldSubmit('unit')('');
|
||||
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();
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box flexDirection="column" alignItems="center" paddingY={2}>
|
||||
<LoadingSpinner label="Charge wird geplant..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const uomLabel = UOM_LABELS[UOM_VALUES[uomIdx] as UoM] ?? UOM_VALUES[uomIdx];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="cyan" bold>Neue Charge planen</Text>
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
<Box flexDirection="column" gap={1} width={60}>
|
||||
{/* Recipe selector */}
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'recipe' ? 'cyan' : 'gray'}>{FIELD_LABELS.recipe}</Text>
|
||||
{fieldErrors.recipe && <Text color="red">{fieldErrors.recipe}</Text>}
|
||||
<Box flexDirection="column" borderStyle="round" borderColor={activeField === 'recipe' ? 'cyan' : 'gray'} paddingX={1}>
|
||||
{recipes.length === 0 ? (
|
||||
<Text color="gray" dimColor>Keine aktiven Rezepte gefunden.</Text>
|
||||
) : (
|
||||
recipes.slice(Math.max(0, recipeIdx - 3), recipeIdx + 4).map((r, i) => {
|
||||
const actualIdx = Math.max(0, recipeIdx - 3) + i;
|
||||
const isSelected = actualIdx === recipeIdx;
|
||||
return (
|
||||
<Text key={r.id} color={isSelected ? 'cyan' : 'white'}>
|
||||
{isSelected ? '▶ ' : ' '}{r.name} (v{r.version})
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Quantity */}
|
||||
<FormInput
|
||||
label={FIELD_LABELS.quantity}
|
||||
value={quantity}
|
||||
onChange={setQuantity}
|
||||
onSubmit={handleFieldSubmit('quantity')}
|
||||
focus={activeField === 'quantity'}
|
||||
{...(fieldErrors.quantity ? { error: fieldErrors.quantity } : {})}
|
||||
/>
|
||||
|
||||
{/* Unit */}
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'unit' ? 'cyan' : 'gray'}>
|
||||
{FIELD_LABELS.unit}: <Text bold color="white">{activeField === 'unit' ? `< ${uomLabel} >` : uomLabel}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Production Date */}
|
||||
<FormInput
|
||||
label={FIELD_LABELS.productionDate}
|
||||
value={productionDate}
|
||||
onChange={setProductionDate}
|
||||
onSubmit={handleFieldSubmit('productionDate')}
|
||||
focus={activeField === 'productionDate'}
|
||||
placeholder="2025-01-15"
|
||||
{...(fieldErrors.productionDate ? { error: fieldErrors.productionDate } : {})}
|
||||
/>
|
||||
|
||||
{/* Best Before Date */}
|
||||
<FormInput
|
||||
label={FIELD_LABELS.bestBeforeDate}
|
||||
value={bestBeforeDate}
|
||||
onChange={setBestBeforeDate}
|
||||
onSubmit={handleFieldSubmit('bestBeforeDate')}
|
||||
focus={activeField === 'bestBeforeDate'}
|
||||
placeholder="2025-03-15"
|
||||
{...(fieldErrors.bestBeforeDate ? { error: fieldErrors.bestBeforeDate } : {})}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
Tab/↑↓ Feld wechseln · ←→ Einheit · Enter bestätigen/speichern · Escape Abbrechen
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useBatches } from '../../hooks/useBatches.js';
|
||||
import { FormInput } from '../shared/FormInput.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { UOM_VALUES, UOM_LABELS } from '@effigenix/api-client';
|
||||
import type { UoM } from '@effigenix/api-client';
|
||||
|
||||
type Field = 'actualQuantity' | 'actualUnit' | 'waste' | 'wasteUnit' | 'remarks';
|
||||
const FIELDS: Field[] = ['actualQuantity', 'actualUnit', 'waste', 'wasteUnit', 'remarks'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
actualQuantity: 'Ist-Menge *',
|
||||
actualUnit: 'Ist-Einheit * (←→ wechseln)',
|
||||
waste: 'Ausschuss *',
|
||||
wasteUnit: 'Ausschuss-Einheit * (←→ wechseln)',
|
||||
remarks: 'Bemerkungen',
|
||||
};
|
||||
|
||||
export function CompleteBatchScreen() {
|
||||
const { params, back } = useNavigation();
|
||||
const { completeBatch, loading, error, clearError } = useBatches();
|
||||
|
||||
const batchId = params.batchId ?? '';
|
||||
const [values, setValues] = useState({ actualQuantity: '', waste: '', remarks: '' });
|
||||
const [actualUomIdx, setActualUomIdx] = useState(0);
|
||||
const [wasteUomIdx, setWasteUomIdx] = useState(0);
|
||||
const [activeField, setActiveField] = useState<Field>('actualQuantity');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const setField = (field: keyof typeof values) => (value: string) => {
|
||||
setValues((v) => ({ ...v, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Partial<Record<Field, string>> = {};
|
||||
if (!values.actualQuantity.trim()) errors.actualQuantity = 'Ist-Menge erforderlich.';
|
||||
if (!values.waste.trim()) errors.waste = 'Ausschuss erforderlich (0 wenn kein Ausschuss).';
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const result = await completeBatch(batchId, {
|
||||
actualQuantity: values.actualQuantity.trim(),
|
||||
actualQuantityUnit: UOM_VALUES[actualUomIdx] as string,
|
||||
waste: values.waste.trim(),
|
||||
wasteUnit: UOM_VALUES[wasteUomIdx] as string,
|
||||
...(values.remarks.trim() ? { remarks: values.remarks.trim() } : {}),
|
||||
});
|
||||
if (result) {
|
||||
setSuccess(true);
|
||||
setTimeout(() => back(), 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldSubmit = (field: Field) => (_value: string) => {
|
||||
const idx = FIELDS.indexOf(field);
|
||||
if (idx < FIELDS.length - 1) {
|
||||
setActiveField(FIELDS[idx + 1] ?? field);
|
||||
} else {
|
||||
void handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
useInput((_input, key) => {
|
||||
if (loading || success) return;
|
||||
|
||||
if (activeField === 'actualUnit' || activeField === 'wasteUnit') {
|
||||
const setIdx = activeField === 'actualUnit' ? setActualUomIdx : setWasteUomIdx;
|
||||
if (key.leftArrow || key.rightArrow) {
|
||||
const dir = key.rightArrow ? 1 : -1;
|
||||
setIdx((i) => (i + dir + UOM_VALUES.length) % UOM_VALUES.length);
|
||||
return;
|
||||
}
|
||||
if (key.return) {
|
||||
handleFieldSubmit(activeField)('');
|
||||
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();
|
||||
});
|
||||
|
||||
if (loading) return <LoadingSpinner label="Charge wird abgeschlossen..." />;
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<Box flexDirection="column" paddingY={1}>
|
||||
<Text color="green" bold>Charge erfolgreich abgeschlossen.</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const actualUomLabel = UOM_LABELS[UOM_VALUES[actualUomIdx] as UoM] ?? UOM_VALUES[actualUomIdx];
|
||||
const wasteUomLabel = UOM_LABELS[UOM_VALUES[wasteUomIdx] as UoM] ?? UOM_VALUES[wasteUomIdx];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="cyan" bold>Charge abschließen</Text>
|
||||
<Text color="gray" dimColor>Charge: {batchId}</Text>
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
<Box flexDirection="column" gap={1} width={60}>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.actualQuantity}
|
||||
value={values.actualQuantity}
|
||||
onChange={setField('actualQuantity')}
|
||||
onSubmit={handleFieldSubmit('actualQuantity')}
|
||||
focus={activeField === 'actualQuantity'}
|
||||
{...(fieldErrors.actualQuantity ? { error: fieldErrors.actualQuantity } : {})}
|
||||
/>
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'actualUnit' ? 'cyan' : 'gray'}>
|
||||
{FIELD_LABELS.actualUnit}: <Text bold color="white">{activeField === 'actualUnit' ? `< ${actualUomLabel} >` : actualUomLabel}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.waste}
|
||||
value={values.waste}
|
||||
onChange={setField('waste')}
|
||||
onSubmit={handleFieldSubmit('waste')}
|
||||
focus={activeField === 'waste'}
|
||||
{...(fieldErrors.waste ? { error: fieldErrors.waste } : {})}
|
||||
/>
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'wasteUnit' ? 'cyan' : 'gray'}>
|
||||
{FIELD_LABELS.wasteUnit}: <Text bold color="white">{activeField === 'wasteUnit' ? `< ${wasteUomLabel} >` : wasteUomLabel}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.remarks}
|
||||
value={values.remarks}
|
||||
onChange={setField('remarks')}
|
||||
onSubmit={handleFieldSubmit('remarks')}
|
||||
focus={activeField === 'remarks'}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
Tab/↑↓ Feld wechseln · ←→ Einheit · Enter bestätigen/speichern · Escape Abbrechen
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@ interface MenuItem {
|
|||
|
||||
const MENU_ITEMS: MenuItem[] = [
|
||||
{ label: 'Rezepte', screen: 'recipe-list', description: 'Rezepte anlegen und verwalten' },
|
||||
{ label: 'Chargen', screen: 'batch-list', description: 'Produktionschargen planen, starten und abschließen' },
|
||||
];
|
||||
|
||||
export function ProductionMenu() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useBatches } from '../../hooks/useBatches.js';
|
||||
import { FormInput } from '../shared/FormInput.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { UOM_VALUES, UOM_LABELS } from '@effigenix/api-client';
|
||||
import type { UoM } from '@effigenix/api-client';
|
||||
|
||||
type Field = 'inputBatchId' | 'articleId' | 'quantityUsed' | 'quantityUnit';
|
||||
const FIELDS: Field[] = ['inputBatchId', 'articleId', 'quantityUsed', 'quantityUnit'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
inputBatchId: 'Input-Chargen-ID *',
|
||||
articleId: 'Artikel-ID *',
|
||||
quantityUsed: 'Verbrauchte Menge *',
|
||||
quantityUnit: 'Mengeneinheit * (←→ wechseln)',
|
||||
};
|
||||
|
||||
export function RecordConsumptionScreen() {
|
||||
const { params, back } = useNavigation();
|
||||
const { recordConsumption, loading, error, clearError } = useBatches();
|
||||
|
||||
const batchId = params.batchId ?? '';
|
||||
const [values, setValues] = useState({ inputBatchId: '', articleId: '', quantityUsed: '' });
|
||||
const [uomIdx, setUomIdx] = useState(0);
|
||||
const [activeField, setActiveField] = useState<Field>('inputBatchId');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const setField = (field: keyof typeof values) => (value: string) => {
|
||||
setValues((v) => ({ ...v, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Partial<Record<Field, string>> = {};
|
||||
if (!values.inputBatchId.trim()) errors.inputBatchId = 'Chargen-ID erforderlich.';
|
||||
if (!values.articleId.trim()) errors.articleId = 'Artikel-ID erforderlich.';
|
||||
if (!values.quantityUsed.trim()) errors.quantityUsed = 'Menge erforderlich.';
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const result = await recordConsumption(batchId, {
|
||||
inputBatchId: values.inputBatchId.trim(),
|
||||
articleId: values.articleId.trim(),
|
||||
quantityUsed: values.quantityUsed.trim(),
|
||||
quantityUnit: UOM_VALUES[uomIdx] as string,
|
||||
});
|
||||
if (result) {
|
||||
setSuccess(true);
|
||||
setTimeout(() => back(), 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldSubmit = (field: Field) => (_value: string) => {
|
||||
const idx = FIELDS.indexOf(field);
|
||||
if (idx < FIELDS.length - 1) {
|
||||
setActiveField(FIELDS[idx + 1] ?? field);
|
||||
} else {
|
||||
void handleSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
useInput((_input, key) => {
|
||||
if (loading || success) return;
|
||||
|
||||
if (activeField === 'quantityUnit') {
|
||||
if (key.leftArrow || key.rightArrow) {
|
||||
const dir = key.rightArrow ? 1 : -1;
|
||||
setUomIdx((i) => (i + dir + UOM_VALUES.length) % UOM_VALUES.length);
|
||||
return;
|
||||
}
|
||||
if (key.return) {
|
||||
void handleSubmit();
|
||||
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();
|
||||
});
|
||||
|
||||
if (loading) return <LoadingSpinner label="Verbrauch wird erfasst..." />;
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<Box flexDirection="column" paddingY={1}>
|
||||
<Text color="green" bold>Verbrauch erfolgreich erfasst.</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const uomLabel = UOM_LABELS[UOM_VALUES[uomIdx] as UoM] ?? UOM_VALUES[uomIdx];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="cyan" bold>Verbrauch erfassen</Text>
|
||||
<Text color="gray" dimColor>Charge: {batchId}</Text>
|
||||
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
|
||||
|
||||
<Box flexDirection="column" gap={1} width={60}>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.inputBatchId}
|
||||
value={values.inputBatchId}
|
||||
onChange={setField('inputBatchId')}
|
||||
onSubmit={handleFieldSubmit('inputBatchId')}
|
||||
focus={activeField === 'inputBatchId'}
|
||||
{...(fieldErrors.inputBatchId ? { error: fieldErrors.inputBatchId } : {})}
|
||||
/>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.articleId}
|
||||
value={values.articleId}
|
||||
onChange={setField('articleId')}
|
||||
onSubmit={handleFieldSubmit('articleId')}
|
||||
focus={activeField === 'articleId'}
|
||||
{...(fieldErrors.articleId ? { error: fieldErrors.articleId } : {})}
|
||||
/>
|
||||
<FormInput
|
||||
label={FIELD_LABELS.quantityUsed}
|
||||
value={values.quantityUsed}
|
||||
onChange={setField('quantityUsed')}
|
||||
onSubmit={handleFieldSubmit('quantityUsed')}
|
||||
focus={activeField === 'quantityUsed'}
|
||||
{...(fieldErrors.quantityUsed ? { error: fieldErrors.quantityUsed } : {})}
|
||||
/>
|
||||
<Box flexDirection="column">
|
||||
<Text color={activeField === 'quantityUnit' ? 'cyan' : 'gray'}>
|
||||
{FIELD_LABELS.quantityUnit}: <Text bold color="white">{activeField === 'quantityUnit' ? `< ${uomLabel} >` : uomLabel}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
Tab/↑↓ Feld wechseln · ←→ Einheit · Enter bestätigen/speichern · Escape Abbrechen
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
120
frontend/apps/cli/src/hooks/useBatches.ts
Normal file
120
frontend/apps/cli/src/hooks/useBatches.ts
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import { useState, useCallback } from 'react';
|
||||
import type { BatchSummaryDTO, BatchDTO, PlanBatchRequest, BatchStatus } from '@effigenix/api-client';
|
||||
import { client } from '../utils/api-client.js';
|
||||
|
||||
interface BatchesState {
|
||||
batches: BatchSummaryDTO[];
|
||||
batch: BatchDTO | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
return err instanceof Error ? err.message : 'Unbekannter Fehler';
|
||||
}
|
||||
|
||||
export function useBatches() {
|
||||
const [state, setState] = useState<BatchesState>({
|
||||
batches: [],
|
||||
batch: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const fetchBatches = useCallback(async (status?: BatchStatus) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batches = await client.batches.list(status);
|
||||
setState((s) => ({ ...s, batches, loading: false, error: null }));
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchBatch = useCallback(async (id: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.batches.getById(id);
|
||||
setState((s) => ({ ...s, batch, loading: false, error: null }));
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const planBatch = useCallback(async (request: PlanBatchRequest) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.batches.plan(request);
|
||||
setState((s) => ({ ...s, loading: false, error: null }));
|
||||
return batch;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const startBatch = useCallback(async (id: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.batches.start(id);
|
||||
setState((s) => ({ ...s, batch, loading: false, error: null }));
|
||||
return batch;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const recordConsumption = useCallback(async (id: string, request: Parameters<typeof client.batches.recordConsumption>[1]) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
await client.batches.recordConsumption(id, request);
|
||||
const batch = await client.batches.getById(id);
|
||||
setState((s) => ({ ...s, batch, loading: false, error: null }));
|
||||
return true;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const completeBatch = useCallback(async (id: string, request: Parameters<typeof client.batches.complete>[1]) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.batches.complete(id, request);
|
||||
setState((s) => ({ ...s, batch, loading: false, error: null }));
|
||||
return batch;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const cancelBatch = useCallback(async (id: string, reason: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.batches.cancel(id, { reason });
|
||||
setState((s) => ({ ...s, batch, loading: false, error: null }));
|
||||
return batch;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState((s) => ({ ...s, error: null }));
|
||||
}, []);
|
||||
|
||||
return {
|
||||
...state,
|
||||
fetchBatches,
|
||||
fetchBatch,
|
||||
planBatch,
|
||||
startBatch,
|
||||
recordConsumption,
|
||||
completeBatch,
|
||||
cancelBatch,
|
||||
clearError,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,8 +1,17 @@
|
|||
import { useState, useCallback } from 'react';
|
||||
import type { StockBatchDTO, AddStockBatchRequest } from '@effigenix/api-client';
|
||||
import type {
|
||||
StockDTO,
|
||||
StockBatchDTO,
|
||||
AddStockBatchRequest,
|
||||
CreateStockRequest,
|
||||
UpdateStockRequest,
|
||||
StockFilter,
|
||||
} from '@effigenix/api-client';
|
||||
import { client } from '../utils/api-client.js';
|
||||
|
||||
interface StocksState {
|
||||
stocks: StockDTO[];
|
||||
stock: StockDTO | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
|
@ -13,29 +22,121 @@ function errorMessage(err: unknown): string {
|
|||
|
||||
export function useStocks() {
|
||||
const [state, setState] = useState<StocksState>({
|
||||
stocks: [],
|
||||
stock: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const fetchStocks = useCallback(async (filter?: StockFilter) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const stocks = await client.stocks.list(filter);
|
||||
setState((s) => ({ ...s, stocks, loading: false, error: null }));
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchStock = useCallback(async (id: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const stock = await client.stocks.getById(id);
|
||||
setState((s) => ({ ...s, stock, loading: false, error: null }));
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const createStock = useCallback(async (request: CreateStockRequest) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const result = await client.stocks.create(request);
|
||||
setState((s) => ({ ...s, loading: false, error: null }));
|
||||
return result;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateStock = useCallback(async (id: string, request: UpdateStockRequest) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const stock = await client.stocks.update(id, request);
|
||||
setState((s) => ({ ...s, stock, loading: false, error: null }));
|
||||
return stock;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addBatch = useCallback(async (stockId: string, request: AddStockBatchRequest): Promise<StockBatchDTO | null> => {
|
||||
setState({ loading: true, error: null });
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
const batch = await client.stocks.addBatch(stockId, request);
|
||||
setState({ loading: false, error: null });
|
||||
setState((s) => ({ ...s, loading: false, error: null }));
|
||||
return batch;
|
||||
} catch (err) {
|
||||
setState({ loading: false, error: errorMessage(err) });
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const removeBatch = useCallback(async (stockId: string, batchId: string, quantityAmount: string, quantityUnit: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
await client.stocks.removeBatch(stockId, batchId, { quantityAmount, quantityUnit });
|
||||
const stock = await client.stocks.getById(stockId);
|
||||
setState((s) => ({ ...s, stock, loading: false, error: null }));
|
||||
return true;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const blockBatch = useCallback(async (stockId: string, batchId: string, reason: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
await client.stocks.blockBatch(stockId, batchId, { reason });
|
||||
const stock = await client.stocks.getById(stockId);
|
||||
setState((s) => ({ ...s, stock, loading: false, error: null }));
|
||||
return true;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const unblockBatch = useCallback(async (stockId: string, batchId: string) => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
try {
|
||||
await client.stocks.unblockBatch(stockId, batchId);
|
||||
const stock = await client.stocks.getById(stockId);
|
||||
setState((s) => ({ ...s, stock, loading: false, error: null }));
|
||||
return true;
|
||||
} catch (err) {
|
||||
setState((s) => ({ ...s, loading: false, error: errorMessage(err) }));
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setState((s) => ({ ...s, error: null }));
|
||||
}, []);
|
||||
|
||||
return {
|
||||
...state,
|
||||
fetchStocks,
|
||||
fetchStock,
|
||||
createStock,
|
||||
updateStock,
|
||||
addBatch,
|
||||
removeBatch,
|
||||
blockBatch,
|
||||
unblockBatch,
|
||||
clearError,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,13 +35,21 @@ export type Screen =
|
|||
| 'storage-location-detail'
|
||||
| 'stock-batch-entry'
|
||||
| 'stock-add-batch'
|
||||
| 'stock-list'
|
||||
| 'stock-detail'
|
||||
| 'stock-create'
|
||||
// Produktion
|
||||
| 'production-menu'
|
||||
| 'recipe-list'
|
||||
| 'recipe-create'
|
||||
| 'recipe-detail'
|
||||
| 'recipe-add-production-step'
|
||||
| 'recipe-add-ingredient';
|
||||
| 'recipe-add-ingredient'
|
||||
| 'batch-list'
|
||||
| 'batch-detail'
|
||||
| 'batch-plan'
|
||||
| 'batch-record-consumption'
|
||||
| 'batch-complete';
|
||||
|
||||
interface NavigationState {
|
||||
current: Screen;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue