u

src/components/article/ArticleView.jsx

@@ -6,6 +6,12 @@ import Typography from '@mui/material/Typography';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
 import { requireObject } from '../../utils/apiShape';
+import {
+  articleEans,
+  brandName,
+  priceBrutto,
+  primaryPrice,
+} from '../../utils/articleDetail';
 import { formatPrice } from '../../utils/price';
 import { formatStock } from '../../pages/artikel/searchFormat';
 
@@ -68,11 +74,6 @@ function RelationLine({ label, active, children }) {
   );
 }
 
-function articleBrutto(article) {
-  if (article.net == null || article.taxRate == null) return null;
-  return article.net * (1 + article.taxRate / 100);
-}
-
 function nameDraftDirty(draft, saved) {
   return draft.name.trim() !== String(saved.name ?? '').trim();
 }
@@ -82,7 +83,9 @@ function nameDraftValid(draft) {
 }
 
 export default function ArticleView({ article: articleData, onArticleUpdated }) {
-  const brutto = articleBrutto(articleData);
+  const basePrice = primaryPrice(articleData);
+  const brutto = priceBrutto(basePrice);
+  const eans = articleEans(articleData);
 
   const handleSaveName = async (draft) => {
     const name = draft.name.trim();
@@ -108,7 +111,7 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
               display: 'flex',
               alignItems: 'center',
               minHeight: { xs: 0, sm: 200 },
-              pr: 4,
+              pr: 5,
             }}
           >
             <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.25 }}>
@@ -153,20 +156,24 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
       </PanelTile>
 
       <PanelTile wide={1} title="Marke">
-        <PanelValue>{articleData.brand}</PanelValue>
+        <PanelValue>{brandName(articleData)}</PanelValue>
       </PanelTile>
 
       <PanelTile wide={1} title="SKU / EAN">
         <PanelValue label="SKU">{articleData.sku}</PanelValue>
-        <PanelValue label="EAN">{articleData.ean}</PanelValue>
+        {eans.map((ean) => (
+          <PanelValue key={ean} label="EAN">
+            {ean}
+          </PanelValue>
+        ))}
       </PanelTile>
 
       <PanelTile wide={1} title="Preis">
         <PanelValue label="Netto">
-          {articleData.net != null ? formatPrice(articleData.net) : null}
+          {basePrice?.net != null ? formatPrice(basePrice.net) : null}
         </PanelValue>
         <PanelValue label="MwSt.">
-          {articleData.taxRate != null ? `${articleData.taxRate} %` : null}
+          {basePrice?.taxRate != null ? `${basePrice.taxRate} %` : null}
         </PanelValue>
         <PanelValue label="Brutto">
           {brutto != null ? formatPrice(brutto) : null}