seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-13 00:33:38 +02:00
parent 1ad9b14aa6
commit 4c5ccf7f64
12 changed files with 1152 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/LoginPage.jsx
View File

@@ -52,6 +52,11 @@ class LoginPage extends PureComponent {
this.setState({ busy: true });
await authAutomat.actions.loginWithGoogle(idToken);
await bootstrapAuthMe();
const params = new URLSearchParams(window.location.search);
const returnTo = params.get('returnTo');
if (returnTo) {
window.location.replace(returnTo);
}
} catch (err) {
if (err instanceof GoogleSignInCancelledError) return;
logError('[login] Google sign-in failed', {

564
src/components/manifest/OrderList.jsx
View File

@@ -3,25 +3,20 @@ 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 Divider from '@mui/material/Divider';
import FormControlLabel from '@mui/material/FormControlLabel';
import IconButton from '@mui/material/IconButton';
import ListItemButton from '@mui/material/ListItemButton';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import Switch from '@mui/material/Switch';
import Skeleton from '@mui/material/Skeleton';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { enqueueSnackbar } from 'notistack';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import FillSpace from 'dashgui/FillSpace';
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
import BackendError from '../BackendError';
import orderAutomat, {
filterOrders,
CHUNK_SIZE,
isOrderPaid,
isOrderDelivered,
getNegativeSeekCutoff,
formatNegativeSeek,
} from '../../automats/orderAutomat';
import { order as orderApi } from '../../api';
import { backendErrorFrom } from '../../utils/backendError';
@@ -82,13 +77,42 @@ class OrderRow extends PureComponent {
}
render() {
const { item: order } = this.props;
const { item: order, disabled } = this.props;
// Data-free probe (FillSpace measures the row height with `item` undefined).
if (!order) {
if (disabled) {
return (
<ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
<Typography variant="body2">&nbsp;</Typography>
</ListItemButton>
);
}
return (
<ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
<Typography variant="body2">&nbsp;</Typography>
<ListItemButton disabled divider sx={rowSx}>
<Box sx={{ width: 120, flexShrink: 0 }}>
<Skeleton variant="text" width={80} height={20} />
<Skeleton variant="text" width={50} height={16} />
</Box>
<Box sx={{ width: 100, flexShrink: 0 }}>
<Skeleton variant="text" width={70} height={20} />
</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Skeleton variant="text" width="60%" height={20} />
</Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
<Skeleton variant="circular" width={20} height={20} />
</Box>
<Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
<Skeleton variant="circular" width={20} height={20} />
</Box>
<Box sx={{ width: 40, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
<Skeleton variant="rounded" width={28} height={20} />
</Box>
<Box sx={{ width: 96, flexShrink: 0, display: 'flex', justifyContent: 'flex-end' }}>
<Skeleton variant="text" width={60} height={20} />
</Box>
<Box sx={{ width: 40, flexShrink: 0 }} />
</ListItemButton>
);
}
@@ -187,239 +211,13 @@ class OrderRow extends PureComponent {
}
}
// MARK: <OrderSearchField/>
class OrderSearchField extends PureComponent {
constructor(props) {
super(props);
const s = orderAutomat.state;
this.state = {
input: s.filter ?? '',
onlyUnpaid: s.onlyUnpaid ?? false,
onlyUndelivered: s.onlyUndelivered ?? false,
seekMonths: s.seekMonths ?? 0,
seekYears: s.seekYears ?? 0,
negativeSeekMonths: s.negativeSeekMonths ?? 0,
};
}
componentDidMount() {
this.unsub = orderAutomat.subscribe(this, (state) => ({
input: state.filter ?? '',
onlyUnpaid: state.onlyUnpaid ?? false,
onlyUndelivered: state.onlyUndelivered ?? false,
seekMonths: state.seekMonths ?? 0,
seekYears: state.seekYears ?? 0,
negativeSeekMonths: state.negativeSeekMonths ?? 0,
}));
}
componentWillUnmount() {
this.unsub?.();
}
render() {
const { inputRef, onCreate } = this.props;
const { input, onlyUnpaid, onlyUndelivered, seekMonths, seekYears } = this.state;
const monthActive = seekMonths > 0;
const monthLabel = !monthActive ? '-1 Month' : `-${seekMonths} Month${seekMonths > 1 ? 's' : ''}`;
const yearActive = seekYears > 0;
const yearLabel = !yearActive ? '-1 Year' : `-${seekYears} Year${seekYears > 1 ? 's' : ''}`;
return (
<PanelTileGrid>
<Box
ref={inputRef}
sx={{
gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
display: 'flex',
flexDirection: 'column',
gap: 1.25,
pb: 2,
}}
>
{/* Top row: search field & create button */}
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
<SingleLineTextEdit
sx={{ flex: 1 }}
size="small"
search
clear
value={input}
onChange={(next) => orderAutomat.actions.filter(next)}
/>
<Button variant="contained" onClick={onCreate}>
{cfg.createButton}
</Button>
</Box>
{/* Filter Bar: "Nur ungezahlte", "Nur ungelieferte", Negativeseek (-1 Month, -1 Year, Reset) */}
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: 1.5,
}}
>
{/* Left: Unpaid & Undelivered toggles */}
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 1.5,
px: 1.5,
py: 0.25,
borderRadius: 2,
bgcolor: 'background.paper',
boxShadow: 1,
}}
>
<FormControlLabel
control={
<Switch
size="small"
color="warning"
checked={onlyUnpaid}
onChange={(e) => orderAutomat.actions.setOnlyUnpaid(e.target.checked)}
/>
}
label={
<Typography variant="body2" sx={{ fontWeight: onlyUnpaid ? 600 : 400, userSelect: 'none' }}>
Nur ungezahlte
</Typography>
}
sx={{ m: 0 }}
/>
<Divider orientation="vertical" flexItem sx={{ my: 0.5 }} />
<FormControlLabel
control={
<Switch
size="small"
color="primary"
checked={onlyUndelivered}
onChange={(e) => orderAutomat.actions.setOnlyUndelivered(e.target.checked)}
/>
}
label={
<Typography variant="body2" sx={{ fontWeight: onlyUndelivered ? 600 : 400, userSelect: 'none' }}>
Nur ungelieferte
</Typography>
}
sx={{ m: 0 }}
/>
</Box>
{/* Right: Negativeseek controls (-1 Month, -1 Year, Reset) */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.75,
px: 1.25,
py: 0.25,
borderRadius: 2,
bgcolor: 'background.paper',
boxShadow: 1,
}}
>
<Button
size="small"
variant={monthActive ? 'contained' : 'outlined'}
color={monthActive ? 'primary' : 'inherit'}
onClick={() => orderAutomat.actions.addSeekMonth()}
sx={{
minWidth: 88,
px: 1.25,
py: 0.25,
height: 28,
fontSize: '0.75rem',
fontWeight: 600,
textTransform: 'none',
boxSizing: 'border-box',
border: '1px solid',
borderColor: monthActive ? 'primary.main' : 'divider',
whiteSpace: 'nowrap',
}}
>
{monthLabel}
</Button>
<Button
size="small"
variant={yearActive ? 'contained' : 'outlined'}
color={yearActive ? 'primary' : 'inherit'}
onClick={() => orderAutomat.actions.addSeekYear()}
sx={{
minWidth: 78,
px: 1.25,
py: 0.25,
height: 28,
fontSize: '0.75rem',
fontWeight: 600,
textTransform: 'none',
boxSizing: 'border-box',
border: '1px solid',
borderColor: yearActive ? 'primary.main' : 'divider',
whiteSpace: 'nowrap',
}}
>
{yearLabel}
</Button>
<Button
size="small"
variant="text"
color="inherit"
disabled={!monthActive && !yearActive}
onClick={() => orderAutomat.actions.resetNegativeSeek()}
sx={{
minWidth: 'auto',
px: 1,
py: 0.25,
height: 28,
fontSize: '0.75rem',
fontWeight: 600,
textTransform: 'none',
}}
>
Reset
</Button>
</Box>
</Box>
</Box>
</Box>
</PanelTileGrid>
);
}
}
// MARK: <OrderList/>
export class OrderList extends PureComponent {
constructor(props) {
super(props);
const s = orderAutomat.state;
// getItems() returns current items or null and triggers loading of the first chunk
this.state = {
status: s.status === 'ready' ? 'ready' : 'loading',
error: s.error ? backendErrorFrom(s.error) : null,
filteredItems: orderAutomat.actions.getOrLoad(),
items: s.items ?? [],
total: s.total ?? 0,
filter: s.filter ?? '',
onlyUnpaid: s.onlyUnpaid ?? false,
onlyUndelivered: s.onlyUndelivered ?? false,
negativeSeekMonths: s.negativeSeekMonths ?? 0,
hasMore: s.hasMore ?? false,
loadingMore: s.loadingMore ?? false,
items: orderAutomat.getItems(),
partiesById: {},
busyId: null,
};
@@ -432,7 +230,74 @@ export class OrderList extends PureComponent {
this.handleTogglePaid = this.handleTogglePaid.bind(this);
this.handleToggleDelivered = this.handleToggleDelivered.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.nameOf = this.nameOf.bind(this);
}
componentDidMount() {
this._cancelled = false;
// Subscribe to items only
this.unsub = orderAutomat.subscribe(this, (state) => ({
items: state.items,
}));
void this.loadParties();
}
componentWillUnmount() {
this._cancelled = true;
this.unsub?.();
}
async loadParties() {
try {
const parties = await loadParties('order');
if (!this._cancelled) {
this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
}
} catch {
// Non-fatal: names fall back to ids.
}
}
handlePageChange(page, meta) {
const pageSize = meta?.pageSize ?? 10;
const startIndex = (page - 1) * pageSize;
const items = this.state.items;
const maxIndex = items ? items.length - 1 : startIndex;
const endIndex = Math.min(maxIndex, startIndex + pageSize - 1);
const startChunk = Math.floor(startIndex / CHUNK_SIZE);
const endChunk = Math.floor(endIndex / CHUNK_SIZE);
orderAutomat.requireChunk(startChunk);
if (endChunk !== startChunk) {
orderAutomat.requireChunk(endChunk);
}
}
handleRetry() {
void orderAutomat.actions.requireChunk(0).catch(() => {});
}
handleCreate() {
this.props.navigate(cfg.createPath);
}
handleOpen(order) {
this.props.navigate(cfg.editPath(order.id));
}
async handleDelete(order) {
if (this.state.busyId != null) return;
if (!window.confirm(cfg.confirmDelete(order.number))) return;
this.setState({ busyId: order.id });
try {
await orderApi.delete(order.id);
await orderAutomat.actions.reload();
enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
} catch (err) {
notifyError(err);
} finally {
if (!this._cancelled) this.setState({ busyId: null });
}
}
async handleTogglePaid(order, checked) {
@@ -463,122 +328,19 @@ export class OrderList extends PureComponent {
}
}
handlePageChange(page, meta) {
const pageSize = meta?.pageSize ?? 10;
const loadedPages = Math.ceil(this.state.items.length / pageSize);
// Load next batch when the pagination comes close to the end of loaded items (within 2 pages) or beyond.
if (loadedPages - page <= 2 || page > loadedPages) {
void orderAutomat.actions.loadMore(page * pageSize);
}
}
componentDidMount() {
this._cancelled = false;
this.unsub = orderAutomat.subscribe(this, (state) => ({
items: state.items ?? [],
total: state.total ?? 0,
filter: state.filter ?? '',
onlyUnpaid: state.onlyUnpaid ?? false,
onlyUndelivered: state.onlyUndelivered ?? false,
negativeSeekMonths: state.negativeSeekMonths ?? 0,
hasMore: state.hasMore ?? false,
loadingMore: state.loadingMore ?? false,
filteredItems: filterOrders(state.items ?? [], {
filter: state.filter,
onlyUnpaid: state.onlyUnpaid,
onlyUndelivered: state.onlyUndelivered,
negativeSeekMonths: state.negativeSeekMonths,
}, this.nameOf),
status: state.status,
error: state.error ? backendErrorFrom(state.error) : null,
}));
void this.loadAll();
}
componentWillUnmount() {
this._cancelled = true;
this.unsub?.();
}
async loadAll() {
try {
const parties = await loadParties('order');
if (!this._cancelled) {
const partiesById = cfg.partiesByIdFromList(parties);
this.setState((prev) => ({
partiesById,
filteredItems: filterOrders(prev.items, {
filter: prev.filter,
onlyUnpaid: prev.onlyUnpaid,
onlyUndelivered: prev.onlyUndelivered,
negativeSeekMonths: prev.negativeSeekMonths,
}, (o) => partyDisplayName('order', partiesById[o.entityId])),
}));
}
} catch {
// Non-fatal: names fall back to ids.
}
}
nameOf(order) {
const party = this.state.partiesById[order.entityId];
return partyDisplayName('order', party);
}
handleRetry() {
void orderAutomat.actions.load().catch(() => { });
}
handleCreate() {
this.props.navigate(cfg.createPath);
}
handleOpen(order) {
this.props.navigate(cfg.editPath(order.id));
}
async handleDelete(order) {
if (this.state.busyId != null) return;
if (!window.confirm(cfg.confirmDelete(order.number))) return;
this.setState({ busyId: order.id });
try {
await orderApi.delete(order.id);
await orderAutomat.actions.reload();
enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
} catch (err) {
notifyError(err);
} finally {
if (!this._cancelled) this.setState({ busyId: null });
}
}
render() {
const {
status,
error,
items,
total,
filter,
onlyUnpaid,
onlyUndelivered,
negativeSeekMonths,
hasMore,
loadingMore,
filteredItems,
partiesById,
busyId,
} = this.state;
const { items, partiesById, busyId } = this.state;
if (status === 'loading' || status === 'idle') {
if (items === null) {
if (orderAutomat.state.status === 'failed') {
return <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />;
}
return (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
<CircularProgress />
</Box>
);
}
if (status === 'failed') {
return <BackendError error={error} onRetry={this.handleRetry} />;
}
rowContext.partiesById = partiesById;
rowContext.busyId = busyId;
@@ -587,58 +349,64 @@ export class OrderList extends PureComponent {
rowContext.onTogglePaid = this.handleTogglePaid;
rowContext.onToggleDelivered = this.handleToggleDelivered;
const rows = filteredItems ?? [];
const isFiltered = Boolean(filter || onlyUnpaid || onlyUndelivered || negativeSeekMonths < 0);
const displayTotal = isFiltered ? rows.length : (total || items.length);
return (
<>
<OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
<PanelTileGrid>
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
<FillSpace
aboveRef={[this.searchRef]}
reserveBottom={32}
minPageSize={8}
minHeight={0}
items={rows}
totalCount={displayTotal}
renderItem={OrderRow}
virtualScrollbar
header={
<Box
sx={{
display: 'flex',
alignItems: 'center',
height: 36,
minHeight: 36,
px: 2,
gap: 1.5,
borderBottom: '1px solid',
borderColor: 'divider',
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
}}
>
<Box sx={{ width: 120, flexShrink: 0 }}>Nr. / Ref.</Box>
<Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box>
<Box sx={{ width: 40, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
<Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
<Box sx={{ width: 40, flexShrink: 0 }} />
</Box>
}
onPageChange={this.handlePageChange}
/>
</PanelTile>
</PanelTileGrid>
</>
<PanelTileGrid>
<Box
ref={this.searchRef}
sx={{
gridColumn: '1 / -1',
display: 'flex',
justifyContent: 'flex-end',
pb: 1.5,
}}
>
<Button variant="contained" onClick={this.handleCreate}>
{cfg.createButton}
</Button>
</Box>
<PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
<FillSpace
aboveRef={[this.searchRef]}
reserveBottom={32}
minPageSize={8}
minHeight={0}
items={items}
totalCount={items.length}
renderItem={OrderRow}
virtualScrollbar
header={
<Box
sx={{
display: 'flex',
alignItems: 'center',
height: 36,
minHeight: 36,
px: 2,
gap: 1.5,
borderBottom: '1px solid',
borderColor: 'divider',
color: 'text.secondary',
typography: 'caption',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.04em',
userSelect: 'none',
}}
>
<Box sx={{ width: 120, flexShrink: 0 }}>Nr. / Ref.</Box>
<Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box>
<Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box>
<Box sx={{ width: 40, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
<Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
<Box sx={{ width: 40, flexShrink: 0 }} />
</Box>
}
onPageChange={this.handlePageChange}
/>
</PanelTile>
</PanelTileGrid>
);
}
}

2
src/components/manifest/OrderPaymentList.jsx
View File

@@ -398,7 +398,7 @@ export class OrderPaymentList extends PureComponent {
extractAllPayments(orders = this.state.items) {
const list = [];
for (const order of orders) {
if (!Array.isArray(order.payments)) continue;
if (!order || !Array.isArray(order.payments)) continue;
for (const pay of order.payments) {
list.push({
...pay,

2
src/components/manifest/ShipmentList.jsx
View File

@@ -486,7 +486,7 @@ export class ShipmentList extends PureComponent {
extractAllShipments(orders = this.state.items) {
const list = [];
for (const order of orders) {
if (!Array.isArray(order.shipments)) continue;
if (!order || !Array.isArray(order.shipments)) continue;
for (const sh of order.shipments) {
list.push({
...sh,

312
src/components/settings/McpAuthorizationsPanel.jsx Normal file
View File

@@ -0,0 +1,312 @@
import { Component } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import Alert from '@mui/material/Alert';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import RefreshIcon from '@mui/icons-material/Refresh';
import SecurityIcon from '@mui/icons-material/Security';
import ComputerIcon from '@mui/icons-material/Computer';
import KeyIcon from '@mui/icons-material/Key';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined';
import { enqueueSnackbar } from 'notistack';
import { mcp } from '../../api';
import { notifyError } from '../../utils/notify';
import { SURFACE_BASE, SURFACE_RAISED, BORDER, DARK_2 } from '../../colors';
export default class McpAuthorizationsPanel extends Component {
constructor(props) {
super(props);
this.state = {
status: 'loading',
authorizations: [],
error: null,
confirmTarget: null,
revoking: false,
};
this.loadAuthorizations = this.loadAuthorizations.bind(this);
this.handleRevokeClick = this.handleRevokeClick.bind(this);
this.handleConfirmRevoke = this.handleConfirmRevoke.bind(this);
this.handleCloseConfirm = this.handleCloseConfirm.bind(this);
}
componentDidMount() {
void this.loadAuthorizations();
}
// #region loadAuthorizations
// MARK: calls GET /api/mcp/authorizations from ./api
async loadAuthorizations() {
this.setState({ status: 'loading', error: null });
try {
const res = await mcp.listAuthorizations();
this.setState({
authorizations: res?.authorizations || [],
status: 'ready',
});
} catch (err) {
this.setState({
status: 'error',
error: err?.message || 'Fehler beim Laden der MCP-Autorisierungen',
});
notifyError(err);
}
}
// #endregion
handleRevokeClick(client) {
this.setState({ confirmTarget: client });
}
handleCloseConfirm() {
if (this.state.revoking) return;
this.setState({ confirmTarget: null });
}
// #region handleConfirmRevoke
// MARK: calls DELETE /api/mcp/authorizations/:clientId from ./api
async handleConfirmRevoke() {
const { confirmTarget } = this.state;
if (!confirmTarget) return;
this.setState({ revoking: true });
try {
await mcp.revokeAuthorization(confirmTarget.clientId);
enqueueSnackbar(`Autorisierung für "${confirmTarget.clientName}" erfolgreich widerrufen.`, {
variant: 'success',
});
this.setState({ confirmTarget: null, revoking: false });
await this.loadAuthorizations();
} catch (err) {
this.setState({ revoking: false });
notifyError(err);
}
}
// #endregion
render() {
const { status, authorizations, error, confirmTarget, revoking } = this.state;
return (
<Box sx={{ maxWidth: 860 }}>
{/* Header */}
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 2.5 }}>
<Box>
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
<SecurityIcon sx={{ color: 'primary.main', fontSize: 24 }} />
<Typography variant="h6" sx={{ fontWeight: 600 }}>
MCP-Autorisierungen & Sicherheit
</Typography>
</Stack>
<Typography variant="body2" sx={{ color: DARK_2 }}>
Verwalten Sie externe MCP-Clients (z. B. Visual Studio Code, Cursor), die Zugriff auf Dashback Tools haben.
</Typography>
</Box>
<IconButton
size="small"
onClick={this.loadAuthorizations}
disabled={status === 'loading'}
aria-label="Aktualisieren"
>
<RefreshIcon fontSize="small" />
</IconButton>
</Stack>
{error && (
<Alert severity="error" sx={{ mb: 2 }} action={
<Button color="inherit" size="small" onClick={this.loadAuthorizations}>
Wiederholen
</Button>
}>
{error}
</Alert>
)}
{status === 'loading' && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
<CircularProgress size={36} />
</Box>
)}
{status === 'ready' && authorizations.length === 0 && (
<Card
variant="outlined"
sx={{
p: 4,
textAlign: 'center',
bgcolor: SURFACE_BASE,
borderColor: BORDER,
borderRadius: 2,
}}
>
<ComputerIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 1, opacity: 0.6 }} />
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
Keine aktiven MCP-Clients
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 440, mx: 'auto' }}>
Derzeit sind keine externen Anwendungen autorisiert. Wenn Sie einen MCP-Client wie VS Code mit Dash verbinden, wird er hier aufgeführt.
</Typography>
</Card>
)}
{status === 'ready' && authorizations.length > 0 && (
<Stack spacing={2}>
{authorizations.map((auth) => {
const authorizedDate = auth.authorizedAt
? new Date(auth.authorizedAt).toLocaleString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
})
: '–';
return (
<Card
key={auth.clientId || auth.clientDbId}
variant="outlined"
sx={{
borderRadius: 2,
borderColor: BORDER,
bgcolor: 'background.paper',
transition: 'box-shadow 0.2s ease',
'&:hover': {
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
},
}}
>
<CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'flex-start', sm: 'center' }}
justifyContent="space-between"
spacing={2}
>
<Stack direction="row" spacing={2} alignItems="center">
<Box
sx={{
width: 44,
height: 44,
borderRadius: '10px',
bgcolor: SURFACE_RAISED,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'primary.main',
flexShrink: 0,
}}
>
<ComputerIcon />
</Box>
<Box>
<Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
{auth.clientName || 'Unbenannter Client'}
</Typography>
{auth.scope && (
<Chip
size="small"
label={auth.scope}
variant="outlined"
sx={{
height: 20,
fontSize: '0.72rem',
borderColor: 'primary.light',
color: 'primary.main',
}}
/>
)}
</Stack>
<Typography
variant="caption"
sx={{
color: 'text.secondary',
fontFamily: 'monospace',
display: 'block',
mt: 0.25,
}}
>
Client ID: {auth.clientId}
</Typography>
<Stack direction="row" spacing={2} sx={{ mt: 0.75 }}>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
Autorisiert: <strong>{authorizedDate}</strong>
</Typography>
{auth.tokenCount != null && (
<Stack direction="row" spacing={0.5} alignItems="center">
<KeyIcon sx={{ fontSize: 13, color: 'text.secondary' }} />
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
Aktive Tokens: <strong>{auth.tokenCount}</strong>
</Typography>
</Stack>
)}
</Stack>
</Box>
</Stack>
<Button
variant="outlined"
color="error"
size="small"
startIcon={<DeleteOutlineIcon />}
onClick={() => this.handleRevokeClick(auth)}
sx={{ flexShrink: 0, textTransform: 'none' }}
>
Widerrufen
</Button>
</Stack>
</CardContent>
</Card>
);
})}
</Stack>
)}
{/* Confirmation Dialog */}
<Dialog
open={Boolean(confirmTarget)}
onClose={this.handleCloseConfirm}
maxWidth="xs"
fullWidth
>
<DialogTitle sx={{ fontWeight: 600 }}>
Autorisierung widerrufen?
</DialogTitle>
<DialogContent>
<DialogContentText>
Möchten Sie den Zugriff für <strong>{confirmTarget?.clientName}</strong> wirklich widerrufen?
Alle bestehenden Sitzungen und Tokens für diesen MCP-Client werden sofort ungültig.
</DialogContentText>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<Button onClick={this.handleCloseConfirm} disabled={revoking}>
Abbrechen
</Button>
<Button
onClick={this.handleConfirmRevoke}
color="error"
variant="contained"
disabled={revoking}
startIcon={revoking ? <CircularProgress size={16} color="inherit" /> : <DeleteOutlineIcon />}
>
{revoking ? 'Widerrufe...' : 'Ja, widerrufen'}
</Button>
</DialogActions>
</Dialog>
</Box>
);
}
}

4
src/components/settings/SettingsDialog.jsx
View File

@@ -19,6 +19,8 @@ import PrinterSettingsPanel from './PrinterSettingsPanel';
import SettingsKeysPanel from './SettingsKeysPanel';
import ImportExportSettingsPanel from './ImportExportSettingsPanel';
import PosTerminalSettingsPanel from './PosTerminalSettingsPanel';
import McpAuthorizationsPanel from './McpAuthorizationsPanel';
import SecurityIcon from '@mui/icons-material/Security';
import { SURFACE_BASE } from '../../colors';
const TAB_KEYS = {
@@ -28,6 +30,7 @@ const TAB_KEYS = {
printers: 'printers',
importExport: 'importExport',
posterminal: 'posterminal',
security: 'security',
};
const TABS = [
@@ -37,6 +40,7 @@ const TABS = [
{ id: TAB_KEYS.printers, label: 'Drucker', icon: <PrintOutlinedIcon />, Panel: PrinterSettingsPanel },
{ id: TAB_KEYS.importExport, label: 'Import/Export', icon: <ImportExportIcon />, Panel: ImportExportSettingsPanel },
{ id: TAB_KEYS.posterminal, label: 'POS Terminal', icon: <PointOfSaleIcon />, Panel: PosTerminalSettingsPanel },
{ id: TAB_KEYS.security, label: 'Sicherheit & MCP', icon: <SecurityIcon />, Panel: McpAuthorizationsPanel },
];
export default class SettingsDialog extends Component {