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-05 01:01:03 +02:00
parent 81b59fd309
commit b766769634
59 changed files with 903 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/article/ArticleImageSearchDialog.jsx
View File

@@ -29,6 +29,14 @@ import artikelAutomat from '../../automats/artikelAutomat';
import { articleWithUploadedPhoto } from '../../utils/articleDetail';
import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
import { requireObject } from '../../utils/apiShape';
import {
CHECKERBOARD,
INFO_RIBBON,
SCRIM_LABEL,
VEIL_CARD,
VEIL_OVERLAY,
WHITE,
} from '../../colors';
function computeDefaultQuery(article) {
@@ -502,9 +510,8 @@ export default class ArticleImageSearchDialog extends PureComponent {
overflow: 'hidden',
border: '1px solid',
borderColor: isThisProcessing ? 'primary.main' : 'divider',
bgcolor: '#fff',
backgroundImage:
'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
bgcolor: WHITE,
backgroundImage: CHECKERBOARD,
backgroundSize: '16px 16px',
backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
cursor: processingId ? 'default' : 'pointer',
@@ -567,8 +574,8 @@ export default class ArticleImageSearchDialog extends PureComponent {
height: 16,
fontSize: '0.62rem',
fontWeight: 600,
bgcolor: 'rgba(0, 0, 0, 0.65)',
color: '#fff',
bgcolor: SCRIM_LABEL,
color: WHITE,
pointerEvents: 'none',
px: 0.25,
}}
@@ -586,9 +593,9 @@ export default class ArticleImageSearchDialog extends PureComponent {
right: 0,
py: 0.6,
px: 0.8,
bgcolor: 'rgba(25, 118, 210, 0.92)',
bgcolor: INFO_RIBBON,
backdropFilter: 'blur(3px)',
color: '#fff',
color: WHITE,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -615,7 +622,7 @@ export default class ArticleImageSearchDialog extends PureComponent {
sx={{
position: 'absolute',
inset: 0,
bgcolor: 'rgba(255, 255, 255, 0.92)',
bgcolor: VEIL_OVERLAY,
backdropFilter: 'blur(3px)',
display: 'flex',
flexDirection: 'column',
@@ -662,10 +669,10 @@ export default class ArticleImageSearchDialog extends PureComponent {
onClick={(e) => this.handleCopyUrl(img.url, e)}
sx={{
p: 0.4,
bgcolor: 'rgba(255, 255, 255, 0.85)',
bgcolor: VEIL_CARD,
backdropFilter: 'blur(2px)',
boxShadow: 1,
'&:hover': { bgcolor: '#fff' },
'&:hover': { bgcolor: WHITE },
}}
>
<ContentCopyIcon sx={{ fontSize: 13, color: 'text.secondary' }} />
@@ -677,10 +684,10 @@ export default class ArticleImageSearchDialog extends PureComponent {
onClick={(e) => this.handleOpenUrl(img.url, e)}
sx={{
p: 0.4,
bgcolor: 'rgba(255, 255, 255, 0.85)',
bgcolor: VEIL_CARD,
backdropFilter: 'blur(2px)',
boxShadow: 1,
'&:hover': { bgcolor: '#fff' },
'&:hover': { bgcolor: WHITE },
}}
>
<OpenInNewIcon sx={{ fontSize: 13, color: 'text.secondary' }} />

5
src/components/article/ArticlePhoto.jsx
View File

@@ -2,6 +2,9 @@ import { Component } from 'react';
import Box from '@mui/material/Box';
import { thumb } from '../../api';
import ThumbHashImage from './ThumbHashImage';
import {
SCRIM_SOFT,
} from '../../colors';
class ArticlePhoto extends Component {
constructor(props) {
@@ -53,7 +56,7 @@ class ArticlePhoto extends Component {
justifyContent: 'center',
borderRadius: fill ? 0 : 2,
overflow: 'hidden',
bgcolor: 'rgba(0, 0, 0, 0.35)',
bgcolor: SCRIM_SOFT,
...sx,
}}
>

20
src/components/article/ArticlePhotosDialog.jsx
View File

@@ -27,22 +27,30 @@ import {
} from '../../utils/articleDetail';
import { notifyError } from '../../utils/notify';
import { readClipboardImage } from '../../utils/pasteImage';
import {
SCRIM_BUTTON,
SCRIM_LABEL,
SCRIM_SOFT,
SCRIM_STRONG,
VEIL_MUTED,
WHITE,
} from '../../colors';
import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
import ArticlePhoto from './ArticlePhoto';
import ArticleImageSearchDialog from './ArticleImageSearchDialog';
const overlayChipSx = {
height: 22,
bgcolor: 'rgba(0, 0, 0, 0.65)',
color: '#fff',
bgcolor: SCRIM_LABEL,
color: WHITE,
'& .MuiChip-label': { px: 0.75, fontSize: 11 },
};
const overlayIconSx = {
color: '#fff',
bgcolor: 'rgba(0, 0, 0, 0.55)',
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.75)' },
'&.Mui-disabled': { color: 'rgba(255,255,255,0.35)', bgcolor: 'rgba(0,0,0,0.35)' },
color: WHITE,
bgcolor: SCRIM_BUTTON,
'&:hover': { bgcolor: SCRIM_STRONG },
'&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT },
};
class ArticlePhotosDialog extends Component {

25
src/components/article/ArticleStockAdjustDialog.jsx
View File

@@ -32,6 +32,15 @@ import { formatStock } from './searchFormat';
import { notifyError } from '../../utils/notify';
import artikelAutomat from '../../automats/artikelAutomat';
import warehouseAutomat from '../../automats/warehouseAutomat';
import {
BORDER,
GREEN_BG,
GREEN_PANEL,
RED_BG,
RED_PANEL,
SURFACE_BASE,
SURFACE_RAISED,
} from '../../colors';
const REASON_PRESETS = [
'Inventurdifferenz',
@@ -344,8 +353,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
sx={{
p: 1.5,
borderRadius: 1,
backgroundColor: '#f8fafc',
border: '1px solid #e2e8f0',
backgroundColor: SURFACE_BASE,
border: `1px solid ${BORDER}`,
}}
>
<Typography variant="caption" color="text.secondary" display="block">
@@ -361,8 +370,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
sx={{
p: 1.5,
borderRadius: 1,
backgroundColor: '#f8fafc',
border: '1px solid #e2e8f0',
backgroundColor: SURFACE_BASE,
border: `1px solid ${BORDER}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@@ -437,8 +446,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
p: 1,
px: 2,
borderRadius: 1,
backgroundColor: '#f1f5f9',
border: '1px solid #e2e8f0',
backgroundColor: SURFACE_RAISED,
border: `1px solid ${BORDER}`,
minWidth: 140,
}}
>
@@ -529,8 +538,8 @@ export default class ArticleStockAdjustDialog extends PureComponent {
sx={{
p: 1.5,
borderRadius: 1,
backgroundColor: amount > 0 ? '#ecfdf5' : '#fef2f2',
border: `1px solid ${amount > 0 ? '#a7f3d0' : '#fecaca'}`,
backgroundColor: amount > 0 ? GREEN_BG : RED_BG,
border: `1px solid ${amount > 0 ? GREEN_PANEL : RED_PANEL}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',

27
src/components/article/ArticleTileTab.jsx
View File

@@ -31,40 +31,50 @@ import ArticleSeoTab from './tabs/ArticleSeoTab';
import ArticleSettingsTab from './tabs/ArticleSettingsTab';
import ArticleSupplierTab from './tabs/ArticleSupplierTab';
import HelpBadge from '../HelpBadge';
import {
BLUE_PANEL,
BORDER,
GREEN_PANEL,
ORANGE_PANEL,
PETROL_PANEL,
RED_PANEL,
SHADOW_TAB,
YELLOW_PANEL,
} from '../../colors';
const ALWAYS_TABS = [
{
id: ARTICLE_TAB.history,
label: 'History',
color: '#fed7aa',
color: ORANGE_PANEL,
Icon: HistoryIcon,
help: 'Historie aller Änderungen, Buchungen und Ereignisse zu diesem Artikel',
},
{
id: ARTICLE_TAB.supplier,
label: 'Supplier',
color: '#bbf7d0',
color: GREEN_PANEL,
Icon: LocalShippingIcon,
help: 'Zugeordnete Lieferanten, Einkaufspreise und Lieferanten-Artikelnummern',
},
{
id: ARTICLE_TAB.seo,
label: 'SEO & Beschreibung',
color: '#99f6e4',
color: PETROL_PANEL,
Icon: ManageSearchIcon,
help: 'Shop-Texte, Beschreibungen und Suchmaschinen-Metadaten',
},
{
id: ARTICLE_TAB.label,
label: 'Label',
color: '#fde68a',
color: YELLOW_PANEL,
Icon: LabelIcon,
help: 'Barcode- und Preisetiketten für diesen Artikel gestalten und drucken',
},
{
id: ARTICLE_TAB.attributes,
label: 'Attribute und Merkmale',
color: '#bfdbfe',
color: BLUE_PANEL,
Icon: CategoryIcon,
help: 'Zusatzattribute, technische Merkmale und Filtereigenschaften',
},
@@ -73,7 +83,7 @@ const ALWAYS_TABS = [
const SETTINGS_TAB = {
id: ARTICLE_TAB.settings,
label: 'Einstellungen',
color: '#fca5a5',
color: RED_PANEL,
Icon: SettingsIcon,
help: 'Artikeleinstellungen, Einheiten, Steuersatz und Löschen',
};
@@ -220,8 +230,7 @@ class ArticleTileTab extends PureComponent {
display: 'flex',
flexDirection: 'column',
minWidth: 0,
filter:
'drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12))',
filter: SHADOW_TAB,
}}
>
<Box
@@ -313,7 +322,7 @@ class ArticleTileTab extends PureComponent {
},
'&.Mui-disabled': {
opacity: 0.4,
bgcolor: '#e2e8f0',
bgcolor: BORDER,
cursor: 'not-allowed',
pointerEvents: 'auto',
},

5
src/components/article/ArticleView.jsx
View File

@@ -16,6 +16,9 @@ import ArticleViewBrand from './boxes/ArticleViewBrand';
import ArticleViewEANs from './boxes/ArticleViewEANs';
import ArticleViewPrice from './boxes/ArticleViewPrice';
import ArticleViewLists from './boxes/ArticleViewLists';
import {
YELLOW_PANEL,
} from '../../colors';
/** Stable prop so PureComponent photo tile does not see a new sx each render. */
const PHOTO_TILE_SX = { minHeight: 0 };
@@ -93,7 +96,7 @@ class ArticleView extends PureComponent {
<ArticlePhotoTile
wide={1}
color="#fde68a"
color={YELLOW_PANEL}
sx={PHOTO_TILE_SX}
article={article}
/>

5
src/components/article/boxes/ArticleViewBrand.jsx
View File

@@ -10,6 +10,9 @@ import { requireObject } from '../../../utils/apiShape';
import { notifyError } from '../../../utils/notify';
import InputAdornment from '@mui/material/InputAdornment';
import { BrandLabel, BrandThumb } from '../../brand';
import {
PURPLE_BG,
} from '../../../colors';
class PanelValue extends Component {
render() {
@@ -174,7 +177,7 @@ export default class ArticleViewBrand extends PureComponent {
title="Marke"
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e9d5ff"
color={PURPLE_BG}
contentAlignItems="flex-start"
value={value}
onSave={this.handleSave}

8
src/components/article/boxes/ArticleViewEANs.jsx
View File

@@ -9,6 +9,10 @@ import { requireObject } from '../../../utils/apiShape';
import { articleEans } from '../../../utils/articleDetail';
import { notifyError } from '../../../utils/notify';
import JsBarcode from 'jsbarcode';
import {
BORDER,
INK,
} from '../../../colors';
class PanelValue extends Component {
render() {
const { label, children } = this.props;
@@ -61,7 +65,7 @@ class SkuBarcode extends PureComponent {
displayValue: false,
margin: 0,
background: 'transparent',
lineColor: '#1e293b',
lineColor: INK,
});
} catch (e) {
console.warn('Barcode render error:', e);
@@ -151,7 +155,7 @@ export default class ArticleViewEANs extends PureComponent {
title={articleData.sku}
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e2e8f0"
color={BORDER}
contentAlignItems="flex-start"
value={value}
onSave={this.handleSave}

12
src/components/article/boxes/ArticleViewLists.jsx
View File

@@ -36,6 +36,10 @@ import attributeAutomat, { selectAttributes } from '../../../automats/attributeA
import artikelAutomat, { getArticle } from '../../../automats/artikelAutomat';
import { notifyError } from '../../../utils/notify';
import articleIndexAutomat from '../../../automats/articleIndexAutomat';
import {
MAGENTA_PANEL,
SHADOW_CARD,
} from '../../../colors';
export default class ArticleViewLists extends PureComponent {
constructor(props) {
@@ -1157,7 +1161,7 @@ export default class ArticleViewLists extends PureComponent {
transition: 'all 0.15s ease-in-out',
'&:hover': {
borderColor: 'primary.main',
boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
boxShadow: SHADOW_CARD,
},
}}
>
@@ -1245,7 +1249,7 @@ export default class ArticleViewLists extends PureComponent {
transition: 'all 0.15s ease-in-out',
'&:hover': {
borderColor: 'primary.main',
boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
boxShadow: SHADOW_CARD,
},
}}
>
@@ -1465,7 +1469,7 @@ export default class ArticleViewLists extends PureComponent {
const parentArticle = parentSku ? getArticle(parentSku) : null;
return (
<PanelTile wide={1} minHeight={200} color="#fbcfe8">
<PanelTile wide={1} minHeight={200} color={MAGENTA_PANEL}>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 1 }}>
{/* ── Mode 1: Parent Article ──────────────────────────────────────── */}
{isParent ? (
@@ -1640,7 +1644,7 @@ export default class ArticleViewLists extends PureComponent {
transition: 'all 0.15s ease-in-out',
'&:hover': {
borderColor: 'primary.main',
boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
boxShadow: SHADOW_CARD,
},
}}
>

5
src/components/article/boxes/ArticleViewName.jsx
View File

@@ -8,6 +8,9 @@ import { Box, Chip, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import CategoryPickerDialog from '../CategoryPickerDialog';
import { notifyError } from '../../../utils/notify';
import {
WHITE,
} from '../../../colors';
const articleNameTextSx = {
fontWeight: 700,
@@ -327,7 +330,7 @@ export default class ArticleViewName extends PureComponent {
wide={3}
minHeight={0}
sx={headerTileSx}
color="#ffffff"
color={WHITE}
value={value}
onSave={this.handleSave}
onError={notifyError}

8
src/components/article/boxes/ArticleViewPrice.jsx
View File

@@ -31,6 +31,10 @@ import { notifyError } from '../../../utils/notify';
import { PriceTaxRow } from './PriceTaxRow';
import TierPricePills from './TierPricePills';
import { PriceUnitRow, PriceUnitCorner } from './PriceUnitRow';
import {
BLUE_PANEL,
BORDER,
} from '../../../colors';
const SECOND_ROW_MIN_HEIGHT = 220;
@@ -481,7 +485,7 @@ export default class ArticleViewPrice extends PureComponent {
<PanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#e2e8f0"
color={BORDER}
contentAlignItems="flex-start"
>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
@@ -533,7 +537,7 @@ export default class ArticleViewPrice extends PureComponent {
<EditablePanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color="#bfdbfe"
color={BLUE_PANEL}
contentAlignItems="flex-start"
value={priceValue}
onSave={this.handleSave}

18
src/components/article/boxes/ArticleViewStock.jsx
View File

@@ -7,6 +7,14 @@ import Tooltip from '@mui/material/Tooltip';
import { PanelTile } from 'dashgui/panels';
import { formatStock } from '../searchFormat';
import ArticleStockAdjustDialog from '../ArticleStockAdjustDialog';
import {
BORDER,
GREEN_PANEL,
PETROL_PANEL,
SORT_GHOST_BG,
TINT_ROW_HOVER,
VEIL_PANEL,
} from '../../../colors';
const SECOND_ROW_MIN_HEIGHT = 220;
@@ -66,7 +74,7 @@ export default class ArticleViewStock extends PureComponent {
<PanelTile
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color={isParent ? '#e2e8f0' : isStueckliste ? '#cffafe' : '#bbf7d0'}
color={isParent ? BORDER : isStueckliste ? PETROL_PANEL : GREEN_PANEL}
action={
isParent || isStueckliste
? null
@@ -171,7 +179,7 @@ export default class ArticleViewStock extends PureComponent {
mx: -0.5,
transition: 'background-color 0.15s ease',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
backgroundColor: TINT_ROW_HOVER,
},
}}
>
@@ -209,7 +217,7 @@ export default class ArticleViewStock extends PureComponent {
mx: -0.5,
transition: 'background-color 0.15s ease',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
backgroundColor: TINT_ROW_HOVER,
},
}}
>
@@ -246,7 +254,7 @@ export default class ArticleViewStock extends PureComponent {
pr: 0.5,
'&::-webkit-scrollbar': { width: 4 },
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0, 0, 0, 0.15)',
backgroundColor: SORT_GHOST_BG,
borderRadius: 2,
},
}}
@@ -262,7 +270,7 @@ export default class ArticleViewStock extends PureComponent {
py: 0.35,
px: 0.75,
borderRadius: 1,
backgroundColor: 'rgba(255, 255, 255, 0.55)',
backgroundColor: VEIL_PANEL,
}}
>
<Box

9
src/components/article/boxes/PriceTaxRow.jsx
View File

@@ -3,6 +3,11 @@ import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
import {
TINT_CHIP,
TINT_PILL_ACTIVE,
TINT_STRONG,
} from '../../../colors';
const taxPillSx = {
height: 28,
@@ -27,12 +32,12 @@ export class TaxRatePills extends Component {
sx={{
...taxPillSx,
visibility: active || !readOnly ? 'visible' : 'hidden',
bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
bgcolor: active ? TINT_PILL_ACTIVE : TINT_CHIP,
...(readOnly
? {}
: {
cursor: 'pointer',
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
'&:hover': { bgcolor: TINT_STRONG },
}),
}}
/>

5
src/components/article/boxes/PriceUnitRow.jsx
View File

@@ -10,6 +10,9 @@ import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
import Switch from '@mui/material/Switch';
import TextInput from '../../TextInput';
import { findUnitBySi, unitLabel } from '../../../utils/units';
import {
TINT_PILL,
} from '../../../colors';
const priceUnitCornerSx = {
position: 'absolute',
@@ -49,7 +52,7 @@ export class PriceUnitRow extends Component {
height: 28,
fontSize: 13,
fontWeight: 600,
bgcolor: 'rgba(0, 0, 0, 0.08)',
bgcolor: TINT_PILL,
}}
/>
) : null}

5
src/components/article/boxes/TierPricePills.jsx
View File

@@ -2,6 +2,9 @@ import { Component } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import { formatPrice, parsePriceInput } from '../../../utils/price';
import {
TINT_PILL,
} from '../../../colors';
const tierPillSx = {
height: 22,
@@ -24,7 +27,7 @@ export default class TierPricePills extends Component {
label={`ab ${tier.minmultiplier} · ${formatPrice(gross)}`}
sx={{
...tierPillSx,
bgcolor: 'rgba(0, 0, 0, 0.08)',
bgcolor: TINT_PILL,
}}
/>
);

22
src/components/article/tabs/ArticleHistoryTab.jsx
View File

@@ -15,6 +15,21 @@ function formatDate(iso) {
return new Date(iso).toLocaleString('de-DE');
}
import {
SCRIM_SOFT,
} from '../../../colors';
const HISTORY_DATE_CELL_BORDER = `1px solid ${SCRIM_SOFT}`;
const dateDividerSx = {
borderBottom: HISTORY_DATE_CELL_BORDER,
};
const dateCellSx = {
borderBottom: HISTORY_DATE_CELL_BORDER,
verticalAlign: 'middle',
};
export default class ArticleHistoryTab extends PureComponent {
constructor(props) {
super(props);
@@ -94,7 +109,7 @@ export default class ArticleHistoryTab extends PureComponent {
<TableRow>
<TableCell
sx={{
borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
...dateDividerSx,
width: '1%',
whiteSpace: 'nowrap',
verticalAlign: 'middle',
@@ -103,10 +118,7 @@ export default class ArticleHistoryTab extends PureComponent {
Datum
</TableCell>
<TableCell
sx={{
borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
verticalAlign: 'middle',
}}
sx={dateCellSx}
>
{showPagination ? (
<ResultsPagination

12
src/components/article/tabs/ArticleSupplierTab.jsx
View File

@@ -28,6 +28,10 @@ import { articleSupplierAutomat } from '../../../automats/articleDetailAutomat';
import sseAutomat from '../../../automats/sseAutomat';
import companyAutomat from '../../../automats/companyAutomat';
import ArticleSupplierDialog from '../ArticleSupplierDialog';
import {
SORT_GHOST_BG,
TINT_FAINT,
} from '../../../colors';
export default class ArticleSupplierTab extends PureComponent {
constructor(props) {
@@ -218,8 +222,8 @@ export default class ArticleSupplierTab extends PureComponent {
py: 6,
px: 2,
borderRadius: 2,
border: '1px dashed rgba(0, 0, 0, 0.15)',
bgcolor: 'rgba(0, 0, 0, 0.01)',
border: `1px dashed ${SORT_GHOST_BG}`,
bgcolor: TINT_FAINT,
textAlign: 'center',
}}
>
@@ -286,8 +290,8 @@ export default class ArticleSupplierTab extends PureComponent {
py: 6,
px: 2,
borderRadius: 2,
border: '1px dashed rgba(0, 0, 0, 0.15)',
bgcolor: 'rgba(0, 0, 0, 0.01)',
border: `1px dashed ${SORT_GHOST_BG}`,
bgcolor: TINT_FAINT,
textAlign: 'center',
}}
>