feat(lieferung/neu): PDF upload with SSE streaming and result dialog
- Add PDF-Upload button to ManifestHeader (delivery forms only) - New ManifestPdfDialog: live SSE event log, structured basedata, and line-items table streamed from POST /api/delivery/parsePDF - ApiClient.delivery.parsePdfSse: multipart/form-data upload, async generator yielding typed SSE events (status, llm_call, tool_call, usage, progress, result, error) - ManifestForm.handlePdfUpload: drives SSE generator, updates dialog state in real-time; dialog opens immediately on upload - Fix MUI icon imports (CheckCircle, ErrorOutlined)
This commit is contained in:
seb
273
src/components/manifest/ManifestPdfDialog.jsx
Normal file
273
src/components/manifest/ManifestPdfDialog.jsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
|
||||
/** Chip colour by SSE event type */
|
||||
const EVENT_CHIP_COLOR = {
|
||||
status: 'default',
|
||||
llm_call: 'primary',
|
||||
tool_call: 'secondary',
|
||||
usage: 'info',
|
||||
};
|
||||
|
||||
function EventLog({ messages, streaming }) {
|
||||
const bottomRef = useRef(null);
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, [messages]);
|
||||
|
||||
if (!messages?.length && !streaming) return null;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', userSelect: 'none', mb: 0.5 }}
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" fontWeight={600}>
|
||||
LLM-Protokoll
|
||||
</Typography>
|
||||
{streaming ? (
|
||||
<CircularProgress size={12} sx={{ ml: 'auto' }} />
|
||||
) : (
|
||||
<CheckCircleIcon sx={{ ml: 'auto', fontSize: 16, color: 'success.main' }} />
|
||||
)}
|
||||
<IconButton size="small" sx={{ p: 0 }}>
|
||||
{expanded ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Collapse in={expanded}>
|
||||
<Box
|
||||
sx={{
|
||||
maxHeight: 180,
|
||||
overflowY: 'auto',
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
borderRadius: 1,
|
||||
bgcolor: (t) => (t.palette.mode === 'dark' ? 'grey.900' : 'grey.50'),
|
||||
p: 1,
|
||||
}}
|
||||
>
|
||||
{messages.map((msg, i) => (
|
||||
<Box key={i} sx={{ display: 'flex', alignItems: 'baseline', gap: 1, mb: 0.25 }}>
|
||||
<Chip
|
||||
label={msg.type}
|
||||
size="small"
|
||||
color={EVENT_CHIP_COLOR[msg.type] ?? 'default'}
|
||||
sx={{ fontFamily: 'monospace', fontSize: '0.65rem', height: 18, flexShrink: 0 }}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ fontFamily: 'monospace', fontSize: '0.75rem', wordBreak: 'break-all' }}>
|
||||
{msg.text}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
{streaming && !messages.length && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Verbinde…
|
||||
</Typography>
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function BaseDataSection({ basedata }) {
|
||||
if (!basedata) return null;
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ display: 'block', mb: 0.5 }}>
|
||||
Kopfdaten
|
||||
</Typography>
|
||||
<Stack direction="row" flexWrap="wrap" gap={1}>
|
||||
{basedata.date && <Chip size="small" label={`Datum: ${basedata.date}`} />}
|
||||
{basedata.manifestNr && <Chip size="small" label={`Nr: ${basedata.manifestNr}`} />}
|
||||
{basedata.manifestType && <Chip size="small" label={`Typ: ${basedata.manifestType}`} />}
|
||||
{basedata.lieferantName && <Chip size="small" label={`Lieferant: ${basedata.lieferantName}`} />}
|
||||
{basedata.kLieferant != null && <Chip size="small" label={`kLieferant: ${basedata.kLieferant}`} />}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ItemsSection({ items }) {
|
||||
if (!items?.items?.length) return null;
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ display: 'block', mb: 0.5 }}>
|
||||
Positionen ({items.items.length})
|
||||
{items.pagesFrom != null && (
|
||||
<span style={{ fontWeight: 400, marginLeft: 4 }}>
|
||||
— Seiten {items.pagesFrom}–{items.pagesTo}
|
||||
</span>
|
||||
)}
|
||||
</Typography>
|
||||
<Box sx={{ overflowX: 'auto', border: 1, borderColor: 'divider', borderRadius: 1 }}>
|
||||
<Table size="small" padding="none" sx={{ minWidth: 520 }}>
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: 'action.hover' }}>
|
||||
{['Pos.', 'Artikel', 'LiefArtNr', 'Menge', 'VPE', 'Einheit', 'EK-Netto', 'MwSt'].map((h) => (
|
||||
<TableCell key={h} sx={{ px: 1, py: 0.5, fontSize: '0.72rem', fontWeight: 700, whiteSpace: 'nowrap' }}>
|
||||
{h}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{items.items.map((item, i) => (
|
||||
<TableRow key={i} hover>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem' }}>{item.position ?? i + 1}</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', maxWidth: 180, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{item.articleName ?? '–'}
|
||||
</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', fontFamily: 'monospace' }}>{item.liefArtNr ?? '–'}</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', textAlign: 'right' }}>{item.count}</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', textAlign: 'right' }}>{item.vpe ?? 1}</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem' }}>{item.unit ?? '–'}</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', textAlign: 'right', fontFamily: 'monospace' }}>
|
||||
{item.eknetto != null ? item.eknetto.toFixed(2) : '–'}
|
||||
</TableCell>
|
||||
<TableCell sx={{ px: 1, py: 0.4, fontSize: '0.75rem', textAlign: 'right' }}>
|
||||
{item.mwst != null ? `${item.mwst} %` : '–'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ManifestPdfDialog({ open, filename, data, onClose }) {
|
||||
if (!open) return null;
|
||||
|
||||
const { streaming = false, messages = [], result = null, error = null } = data ?? {};
|
||||
const hasResult = Boolean(result);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={streaming ? undefined : onClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
aria-labelledby="pdf-dialog-title"
|
||||
>
|
||||
<DialogTitle
|
||||
id="pdf-dialog-title"
|
||||
sx={{
|
||||
m: 0,
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
{error ? (
|
||||
<ErrorOutlinedIcon color="error" />
|
||||
) : streaming ? (
|
||||
<CircularProgress size={22} />
|
||||
) : (
|
||||
<PictureAsPdfIcon color="action" />
|
||||
)}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="subtitle1" component="div" fontWeight={600}>
|
||||
{streaming ? 'PDF wird analysiert…' : error ? 'PDF-Analyse fehlgeschlagen' : 'PDF-Analyseergebnis'}
|
||||
</Typography>
|
||||
{filename ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{filename}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Box>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
size="small"
|
||||
disabled={streaming}
|
||||
sx={{ color: (theme) => theme.palette.grey[500] }}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers sx={{ p: 2 }}>
|
||||
<Stack spacing={2}>
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<Alert severity="error" icon={<ErrorOutlinedIcon />}>
|
||||
<Typography variant="body2" fontWeight={600}>{error}</Typography>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Live log */}
|
||||
<EventLog messages={messages} streaming={streaming} />
|
||||
|
||||
{/* Notes */}
|
||||
{result?.notes?.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ display: 'block', mb: 0.5 }}>
|
||||
Hinweise
|
||||
</Typography>
|
||||
<Stack spacing={0.5}>
|
||||
{result.notes.map((note, i) => (
|
||||
<Alert key={i} severity="warning" sx={{ py: 0, '& .MuiAlert-message': { fontSize: '0.8rem' } }}>
|
||||
{note}
|
||||
</Alert>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Basedata + Items */}
|
||||
{hasResult && (
|
||||
<>
|
||||
<Divider />
|
||||
<BaseDataSection basedata={result.basedata} />
|
||||
<ItemsSection items={result.items} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* No result yet and no error: show waiting state */}
|
||||
{!hasResult && !error && !streaming && (
|
||||
<Alert severity="info">Keine Daten extrahiert.</Alert>
|
||||
)}
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ p: 1.5, px: 2 }}>
|
||||
<Button onClick={onClose} variant="contained" size="small" disabled={streaming}>
|
||||
Schließen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user