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-18 03:25:57 +02:00
parent dc73905a19
commit 1b4b31b016
3 changed files with 62 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/routes/infos/ArticleHistoryPage.jsx
View File

@@ -52,7 +52,7 @@ export function createDummyTestArticleHistory() {
const rowGridSx = {
display: 'grid',
gridTemplateColumns:
'minmax(60px, max-content) minmax(150px, max-content) minmax(120px, max-content) minmax(160px, 1.2fr) minmax(240px, 2fr) minmax(120px, max-content)',
'minmax(150px, max-content) minmax(130px, max-content) minmax(180px, 1.2fr) minmax(260px, 2fr)',
gridTemplateRows: '0px 1fr',
rowGap: 0,
columnGap: 2,
@@ -86,23 +86,17 @@ function renderInvisibleDummyRow(dummy) {
return (
<>
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.id}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{formatDateTime(d.date)}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.sku}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.name}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.text}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.user}</Typography>
</Box>
</>
);
}
@@ -121,23 +115,17 @@ class ArticleHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
<Skeleton variant="text" width="80%" height={20} />
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 2, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="text" width="85%" height={20} />
</Box>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="text" width="70%" height={20} />
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2 }}>
<Skeleton variant="text" width="60%" height={20} />
</Box>
</ListItemButton>
);
}
@@ -163,19 +151,15 @@ class ArticleHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
{/* 1. Datum */}
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
{item.id}
</Typography>
</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
{formatDateTime(item.date || item.createdAt)}
</Typography>
</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
{/* 2. SKU */}
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
{item.sku ? (
<Typography
variant="body2"
@@ -203,25 +187,21 @@ class ArticleHistoryRow extends PureComponent {
)}
</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
{/* 3. Artikelname */}
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" sx={{ fontWeight: 500, ...ellipsisSx }}>
{item.name || item.articlename || '–'}
</Typography>
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0 }}>
<Tooltip title={item.text || item.message || ''} placement="top-start" enterDelay={500}>
{/* 4. Änderung / Ereignis */}
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
<Tooltip title={item.historytext || item.text || item.message || ''} placement="top-start" enterDelay={500}>
<Typography variant="body2" sx={ellipsisSx}>
{item.text || item.message || '–'}
{item.historytext || item.text || item.message || '–'}
</Typography>
</Tooltip>
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{userName}
</Typography>
</Box>
</ListItemButton>
);
}
@@ -525,12 +505,10 @@ export default class ArticleHistoryPage extends PureComponent {
}}
>
{renderInvisibleDummyRow(this.headerItem)}
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>ID</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Artikel-Nr.</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Artikelname</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx }}>Änderung / Ereignis</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, ...headerCellSx }}>Benutzer</Box>
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Artikel-Nr.</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Artikelname</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Änderung / Ereignis</Box>
</Box>
}
onPageChange={this.handlePageChange}

58
src/routes/infos/GlobalHistoryPage.jsx
View File

@@ -52,7 +52,7 @@ export function createDummyTestGlobalHistory() {
const rowGridSx = {
display: 'grid',
gridTemplateColumns:
'minmax(60px, max-content) minmax(150px, max-content) minmax(110px, max-content) minmax(140px, max-content) minmax(240px, 2fr) minmax(120px, max-content)',
'minmax(150px, max-content) minmax(110px, max-content) minmax(140px, max-content) minmax(240px, 1fr)',
gridTemplateRows: '0px 1fr',
rowGap: 0,
columnGap: 2,
@@ -86,23 +86,17 @@ function renderInvisibleDummyRow(dummy) {
return (
<>
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.id}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{formatDateTime(d.date)}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.type}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.reference}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.text}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.user}</Typography>
</Box>
</>
);
}
@@ -121,23 +115,17 @@ class GlobalHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
<Skeleton variant="text" width="80%" height={20} />
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 2, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="rounded" width={70} height={22} />
</Box>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="text" width="80%" height={20} />
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2 }}>
<Skeleton variant="text" width="60%" height={20} />
</Box>
</ListItemButton>
);
}
@@ -167,19 +155,15 @@ class GlobalHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
{/* 1. Datum */}
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
{item.id}
</Typography>
</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
{formatDateTime(item.date || item.createdAt)}
</Typography>
</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
{/* 2. Typ */}
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
<Chip
size="small"
label={typeStr}
@@ -193,7 +177,8 @@ class GlobalHistoryRow extends PureComponent {
/>
</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
{/* 3. Referenz / Key */}
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
{isArticle ? (
<Typography
variant="body2"
@@ -221,19 +206,14 @@ class GlobalHistoryRow extends PureComponent {
)}
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0 }}>
{/* 4. Meldung / Beschreibung */}
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
<Tooltip title={item.text || item.value || ''} placement="top-start" enterDelay={500}>
<Typography variant="body2" sx={ellipsisSx}>
{item.text || item.value || '–'}
</Typography>
</Tooltip>
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{userName}
</Typography>
</Box>
</ListItemButton>
);
}
@@ -537,12 +517,10 @@ export default class GlobalHistoryPage extends PureComponent {
}}
>
{renderInvisibleDummyRow(this.headerItem)}
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>ID</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Typ</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Referenz / Key</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx }}>Meldung / Beschreibung</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, ...headerCellSx }}>Benutzer</Box>
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Typ</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Referenz / Key</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Meldung / Beschreibung</Box>
</Box>
}
onPageChange={this.handlePageChange}

80
src/routes/infos/LedgerHistoryPage.jsx
View File

@@ -53,7 +53,7 @@ export function createDummyTestLedgerHistory() {
const rowGridSx = {
display: 'grid',
gridTemplateColumns:
'minmax(60px, max-content) minmax(150px, max-content) minmax(110px, max-content) minmax(130px, max-content) minmax(90px, max-content) minmax(220px, 2fr) minmax(120px, max-content)',
'minmax(150px, max-content) minmax(110px, max-content) minmax(130px, max-content) minmax(90px, max-content) minmax(220px, 1fr)',
gridTemplateRows: '0px 1fr',
rowGap: 0,
columnGap: 2,
@@ -87,26 +87,20 @@ function renderInvisibleDummyRow(dummy) {
return (
<>
<Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.id}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{formatDateTime(d.created_at || d.date)}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.transaction_type}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.sku}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">+{d.amount}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.transaction_text}</Typography>
</Box>
<Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
<Typography variant="body2">{d.user}</Typography>
</Box>
</>
);
}
@@ -137,26 +131,20 @@ class LedgerHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
<Box sx={{ gridColumn: 1, gridRow: 2 }}>
<Skeleton variant="text" width="80%" height={20} />
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 2, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="rounded" width={70} height={22} />
</Box>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Box sx={{ gridColumn: 3, gridRow: 2 }}>
<Skeleton variant="text" width="80%" height={20} />
</Box>
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
<Box sx={{ gridColumn: 4, gridRow: 2 }}>
<Skeleton variant="text" width="70%" height={20} />
</Box>
<Box sx={{ gridColumn: 6, gridRow: 2 }}>
<Box sx={{ gridColumn: 5, gridRow: 2 }}>
<Skeleton variant="text" width="90%" height={20} />
</Box>
<Box sx={{ gridColumn: 7, gridRow: 2 }}>
<Skeleton variant="text" width="60%" height={20} />
</Box>
</ListItemButton>
);
}
@@ -195,27 +183,15 @@ class LedgerHistoryRow extends PureComponent {
>
{renderInvisibleDummyRow(dummy)}
{/* 1. ID */}
{/* 1. Datum */}
<Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0 }}>
<Typography
variant="body2"
color="text.secondary"
title={item.prev_hash ? `Hash-Version: ${item.hash_version ?? 1}\nVorheriger Hash: ${item.prev_hash}` : undefined}
sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}
>
{item.id}
</Typography>
</Box>
{/* 2. Datum */}
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={{ fontVariantNumeric: 'tabular-nums', ...ellipsisSx }}>
{formatDateTime(item.created_at || item.date || item.createdAt)}
</Typography>
</Box>
{/* 3. Typ */}
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
{/* 2. Typ */}
<Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0 }}>
<Chip
size="small"
label={typeLabel}
@@ -229,13 +205,14 @@ class LedgerHistoryRow extends PureComponent {
/>
</Box>
{/* 4. SKU */}
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0 }}>
{/* 3. SKU */}
<Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0 }}>
{hasSku ? (
<Typography
variant="body2"
component="a"
href={`/artikel/${encodeURIComponent(sku)}`}
title={item.name ? `${item.name} (${sku})` : sku}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -258,8 +235,8 @@ class LedgerHistoryRow extends PureComponent {
)}
</Box>
{/* 5. Menge / Betrag */}
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0, textAlign: 'right', pr: 1 }}>
{/* 4. Menge / Betrag */}
<Box sx={{ gridColumn: 4, gridRow: 2, minWidth: 0, textAlign: 'right', pr: 1 }}>
<Typography
variant="body2"
sx={{
@@ -273,19 +250,12 @@ class LedgerHistoryRow extends PureComponent {
</Typography>
</Box>
{/* 6. Buchungstext */}
<Box sx={{ gridColumn: 6, gridRow: 2, minWidth: 0 }}>
{/* 5. Buchungstext */}
<Box sx={{ gridColumn: 5, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" title={bookingText} sx={ellipsisSx}>
{bookingText}
</Typography>
</Box>
{/* 7. Benutzer */}
<Box sx={{ gridColumn: 7, gridRow: 2, minWidth: 0 }}>
<Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
{userName}
</Typography>
</Box>
</ListItemButton>
);
}
@@ -592,13 +562,11 @@ export default class LedgerHistoryPage extends PureComponent {
}}
>
{renderInvisibleDummyRow(this.headerItem)}
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>ID</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Typ</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx }}>Artikel-Nr.</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx, textAlign: 'right', pr: 1 }}>Menge</Box>
<Box sx={{ gridColumn: 6, gridRow: 2, ...headerCellSx }}>Buchungstext</Box>
<Box sx={{ gridColumn: 7, gridRow: 2, ...headerCellSx }}>Benutzer</Box>
<Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Datum</Box>
<Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Typ</Box>
<Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Artikel-Nr.</Box>
<Box sx={{ gridColumn: 4, gridRow: 2, ...headerCellSx, textAlign: 'right', pr: 1 }}>Menge</Box>
<Box sx={{ gridColumn: 5, gridRow: 2, ...headerCellSx }}>Buchungstext</Box>
</Box>
}
onPageChange={this.handlePageChange}