[PUI] Pricing UX improvements (#7053)

* Only render categories in overview if there is data
Red #7025

* add option to disable accordions

* remove unneeded log

* make optional

* add disabled state to panels

* add missing panels to overview

* use enum for refs

* add quickjump anchors

* use navigation function instaed

* make links more distinguishable

* fix type

* format ticks using currency

* add tooltip formatter

src/frontend/src/components/charts/tooltipFormatter.tsx

@@ -0,0 +1,9 @@
+import { formatCurrency } from '../../defaults/formatters';
+
+export function tooltipFormatter(label: any, currency: string) {
+  return (
+    formatCurrency(label, {
+      currency: currency
+    })?.toString() ?? ''
+  );
+}

src/frontend/src/pages/part/PartPricingPanel.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Accordion, Alert, LoadingOverlay, Stack, Text } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -15,6 +15,19 @@ import SaleHistoryPanel from './pricing/SaleHistoryPanel';
 import SupplierPricingPanel from './pricing/SupplierPricingPanel';
 import VariantPricingPanel from './pricing/VariantPricingPanel';
 
+export enum panelOptions {
+  overview = 'overview',
+  purchase = 'purchase',
+  internal = 'internal',
+  supplier = 'supplier',
+  bom = 'bom',
+  variant = 'variant',
+  sale_pricing = 'sale-pricing',
+  sale_history = 'sale-history',
+  override = 'override',
+  overall = 'overall'
+}
+
 export default function PartPricingPanel({ part }: { part: any }) {
   const user = useUserState();
 
@@ -40,6 +53,17 @@ export default function PartPricingPanel({ part }: { part: any }) {
     return user.hasViewRole(UserRoles.sales_order) && part?.salable;
   }, [user, part]);
 
+  const [value, setValue] = useState<string[]>([panelOptions.overview]);
+  function doNavigation(panel: panelOptions) {
+    if (!value.includes(panel)) {
+      setValue([...value, panel]);
+    }
+    const element = document.getElementById(panel);
+    if (element) {
+      element.scrollIntoView();
+    }
+  }
+
   return (
     <Stack spacing="xs">
       <LoadingOverlay visible={instanceQuery.isLoading} />
@@ -49,18 +73,27 @@ export default function PartPricingPanel({ part }: { part: any }) {
         </Alert>
       )}
       {pricing && (
-        <Accordion multiple defaultValue={['overview']}>
+        <Accordion multiple value={value} onChange={setValue}>
           <PricingPanel
-            content={<PricingOverviewPanel part={part} pricing={pricing} />}
-            label="overview"
+            content={
+              <PricingOverviewPanel
+                part={part}
+                pricing={pricing}
+                doNavigation={doNavigation}
+              />
+            }
+            label={panelOptions.overview}
             title={t`Pricing Overview`}
             visible={true}
           />
           <PricingPanel
             content={<PurchaseHistoryPanel part={part} />}
-            label="purchase"
+            label={panelOptions.purchase}
             title={t`Purchase History`}
             visible={purchaseOrderPricing}
+            disabled={
+              !pricing?.purchase_cost_min || !pricing?.purchase_cost_max
+            }
           />
           <PricingPanel
             content={
@@ -69,27 +102,35 @@ export default function PartPricingPanel({ part }: { part: any }) {
                 endpoint={ApiEndpoints.part_pricing_internal}
               />
             }
-            label="internal"
+            label={panelOptions.internal}
             title={t`Internal Pricing`}
             visible={internalPricing}
+            disabled={
+              !pricing?.internal_cost_min || !pricing?.internal_cost_max
+            }
           />
           <PricingPanel
             content={<SupplierPricingPanel part={part} />}
-            label="supplier"
+            label={panelOptions.supplier}
             title={t`Supplier Pricing`}
             visible={purchaseOrderPricing}
+            disabled={
+              !pricing?.supplier_price_min || !pricing?.supplier_price_max
+            }
           />
           <PricingPanel
             content={<BomPricingPanel part={part} pricing={pricing} />}
-            label="bom"
+            label={panelOptions.bom}
             title={t`BOM Pricing`}
             visible={part?.assembly}
+            disabled={!pricing?.bom_cost_min || !pricing?.bom_cost_max}
           />
           <PricingPanel
             content={<VariantPricingPanel part={part} pricing={pricing} />}
-            label="variant"
+            label={panelOptions.variant}
             title={t`Variant Pricing`}
             visible={part?.is_template}
+            disabled={!pricing?.variant_cost_min || !pricing?.variant_cost_max}
           />
           <PricingPanel
             content={
@@ -98,15 +139,17 @@ export default function PartPricingPanel({ part }: { part: any }) {
                 endpoint={ApiEndpoints.part_pricing_sale}
               />
             }
-            label="sale-pricing"
+            label={panelOptions.sale_pricing}
             title={t`Sale Pricing`}
             visible={salesOrderPricing}
+            disabled={!pricing?.sale_price_min || !pricing?.sale_price_max}
           />
           <PricingPanel
             content={<SaleHistoryPanel part={part} />}
-            label="sale-history"
+            label={panelOptions.sale_history}
             title={t`Sale History`}
             visible={salesOrderPricing}
+            disabled={!pricing?.sale_history_min || !pricing?.sale_history_max}
           />
         </Accordion>
       )}

src/frontend/src/pages/part/pricing/BomPricingPanel.tsx

@@ -21,7 +21,12 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
-import { formatDecimal, formatPriceRange } from '../../../defaults/formatters';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
+import {
+  formatCurrency,
+  formatDecimal,
+  formatPriceRange
+} from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
 import { useTable } from '../../../hooks/UseTable';
@@ -32,7 +37,7 @@ import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
 
 // Display BOM data as a pie chart
-function BomPieChart({ data }: { data: any[] }) {
+function BomPieChart({ data, currency }: { data: any[]; currency: string }) {
   return (
     <ResponsiveContainer width="100%" height={500}>
       <PieChart>
@@ -64,20 +69,30 @@ function BomPieChart({ data }: { data: any[] }) {
             />
           ))}
         </Pie>
-        <Tooltip />
+        <Tooltip
+          formatter={(label, payload) => tooltipFormatter(label, currency)}
+        />
       </PieChart>
     </ResponsiveContainer>
   );
 }
 
 // Display BOM data as a bar chart
-function BomBarChart({ data }: { data: any[] }) {
+function BomBarChart({ data, currency }: { data: any[]; currency: string }) {
   return (
     <ResponsiveContainer width="100%" height={500}>
       <BarChart data={data}>
         <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
+        <YAxis
+          tickFormatter={(value, index) =>
+            formatCurrency(value, {
+              currency: currency
+            })?.toString() ?? ''
+          }
+        />
+        <Tooltip
+          formatter={(label, payload) => tooltipFormatter(label, currency)}
+        />
         <Legend />
         <Bar
           dataKey="total_price_min"
@@ -202,8 +217,12 @@ export default function BomPricingPanel({
         />
         {bomPricingData.length > 0 ? (
           <Stack spacing="xs">
-            {chartType == 'bar' && <BomBarChart data={bomPricingData} />}
-            {chartType == 'pie' && <BomPieChart data={bomPricingData} />}
+            {chartType == 'bar' && (
+              <BomBarChart data={bomPricingData} currency={pricing?.currency} />
+            )}
+            {chartType == 'pie' && (
+              <BomPieChart data={bomPricingData} currency={pricing?.currency} />
+            )}
             <SegmentedControl
               value={chartType}
               onChange={setChartType}

src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Alert, SimpleGrid } from '@mantine/core';
+import { SimpleGrid } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 import {
   Bar,
@@ -13,6 +13,7 @@ import {
 
 import { AddItemButton } from '../../../components/buttons/AddItemButton';
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { ApiFormFieldSet } from '../../../components/forms/fields/ApiFormField';
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
@@ -144,6 +145,13 @@ export default function PriceBreakPanel({
     [user]
   );
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].currency;
+  }, [table.records]);
+
   return (
     <>
       {newPriceBreak.modal}
@@ -166,8 +174,18 @@ export default function PriceBreakPanel({
           <ResponsiveContainer width="100%" height={500}>
             <BarChart data={table.records}>
               <XAxis dataKey="quantity" />
-              <YAxis />
-              <Tooltip />
+              <YAxis
+                tickFormatter={(value, index) =>
+                  formatCurrency(value, {
+                    currency: currency
+                  })?.toString() ?? ''
+                }
+              />
+              <Tooltip
+                formatter={(label, payload) =>
+                  tooltipFormatter(label, currency)
+                }
+              />
               <Legend />
               <Bar
                 dataKey="price"

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -1,5 +1,13 @@
 import { t } from '@lingui/macro';
-import { Alert, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import {
+  Alert,
+  Anchor,
+  Group,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text
+} from '@mantine/core';
 import {
   IconBuildingWarehouse,
   IconChartDonut,
@@ -22,11 +30,13 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
+import { panelOptions } from '../PartPricingPanel';
 
 interface PricingOverviewEntry {
   icon: ReactNode;
-  name: string;
+  name: panelOptions;
   title: string;
   min_value: number | null | undefined;
   max_value: number | null | undefined;
@@ -36,10 +46,12 @@ interface PricingOverviewEntry {
 
 export default function PricingOverviewPanel({
   part,
-  pricing
+  pricing,
+  doNavigation
 }: {
   part: any;
   pricing: any;
+  doNavigation: (panel: panelOptions) => void;
 }): ReactNode {
   const columns: DataTableColumn<any>[] = useMemo(() => {
     return [
@@ -47,10 +59,17 @@ export default function PricingOverviewPanel({
         accessor: 'title',
         title: t`Pricing Category`,
         render: (record: PricingOverviewEntry) => {
+          const is_link = record.name !== panelOptions.overall;
           return (
             <Group position="left" spacing="xs">
               {record.icon}
-              <Text weight={700}>{record.title}</Text>
+              {is_link ? (
+                <Anchor weight={700} onClick={() => doNavigation(record.name)}>
+                  {record.title}
+                </Anchor>
+              ) : (
+                <Text weight={700}>{record.title}</Text>
+              )}
             </Group>
           );
         }
@@ -86,56 +105,70 @@ export default function PricingOverviewPanel({
   const overviewData: PricingOverviewEntry[] = useMemo(() => {
     return [
       {
-        name: 'internal',
+        name: panelOptions.internal,
         title: t`Internal Pricing`,
         icon: <IconList />,
         min_value: pricing?.internal_cost_min,
         max_value: pricing?.internal_cost_max
       },
       {
-        name: 'bom',
+        name: panelOptions.bom,
         title: t`BOM Pricing`,
         icon: <IconChartDonut />,
         min_value: pricing?.bom_cost_min,
         max_value: pricing?.bom_cost_max
       },
       {
-        name: 'purchase',
+        name: panelOptions.purchase,
         title: t`Purchase Pricing`,
         icon: <IconShoppingCart />,
         min_value: pricing?.purchase_cost_min,
         max_value: pricing?.purchase_cost_max
       },
       {
-        name: 'supplier',
+        name: panelOptions.supplier,
         title: t`Supplier Pricing`,
         icon: <IconBuildingWarehouse />,
         min_value: pricing?.supplier_price_min,
         max_value: pricing?.supplier_price_max
       },
       {
-        name: 'variants',
+        name: panelOptions.variant,
         title: t`Variant Pricing`,
         icon: <IconTriangleSquareCircle />,
         min_value: pricing?.variant_cost_min,
         max_value: pricing?.variant_cost_max
       },
       {
-        name: 'override',
+        name: panelOptions.sale_pricing,
+        title: t`Sale Pricing`,
+        icon: <IconTriangleSquareCircle />,
+        min_value: pricing?.sale_price_min,
+        max_value: pricing?.sale_price_max
+      },
+      {
+        name: panelOptions.sale_history,
+        title: t`Sale History`,
+        icon: <IconTriangleSquareCircle />,
+        min_value: pricing?.sale_history_min,
+        max_value: pricing?.sale_history_max
+      },
+      {
+        name: panelOptions.override,
         title: t`Override Pricing`,
         icon: <IconExclamationCircle />,
         min_value: pricing?.override_min,
         max_value: pricing?.override_max
       },
       {
-        name: 'overall',
+        name: panelOptions.overall,
         title: t`Overall Pricing`,
         icon: <IconReportAnalytics />,
         min_value: pricing?.overall_min,
         max_value: pricing?.overall_max
       }
     ].filter((entry) => {
-      return entry.min_value !== null || entry.max_value !== null;
+      return !(entry.min_value == null || entry.max_value == null);
     });
   }, [part, pricing]);
 
@@ -158,8 +191,18 @@ export default function PricingOverviewPanel({
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={overviewData}>
             <XAxis dataKey="title" />
-            <YAxis />
-            <Tooltip />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: pricing?.currency
+                })?.toString() ?? ''
+              }
+            />
+            <Tooltip
+              formatter={(label, payload) =>
+                tooltipFormatter(label, pricing?.currency)
+              }
+            />
             <Legend />
             <Bar
               dataKey="min_value"

src/frontend/src/pages/part/pricing/PricingPanel.tsx

@@ -1,28 +1,58 @@
 import { t } from '@lingui/macro';
-import { Accordion, Alert, Space, Stack, Text } from '@mantine/core';
-import { IconExclamationCircle } from '@tabler/icons-react';
+import {
+  Accordion,
+  AccordionControlProps,
+  Alert,
+  Box,
+  Space,
+  Stack,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { IconAlertCircle, IconExclamationCircle } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 
 import { StylishText } from '../../../components/items/StylishText';
+import { panelOptions } from '../PartPricingPanel';
+
+function AccordionControl(props: AccordionControlProps) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      {props.disabled && (
+        <Tooltip
+          label={t`No data available`}
+          children={<IconAlertCircle size="1rem" color="gray" />}
+        />
+      )}
+      <Accordion.Control
+        {...props}
+        pl={props.disabled ? '0.25rem' : '1.25rem'}
+      />
+    </Box>
+  );
+}
 
 export default function PricingPanel({
   content,
   label,
   title,
-  visible
+  visible,
+  disabled = undefined
 }: {
   content: ReactNode;
-  label: string;
+  label: panelOptions;
   title: string;
   visible: boolean;
+  disabled?: boolean | undefined;
 }): ReactNode {
+  const is_disabled = disabled === undefined ? false : disabled;
   return (
     visible && (
-      <Accordion.Item value={label}>
-        <Accordion.Control>
+      <Accordion.Item value={label} id={label}>
+        <AccordionControl disabled={is_disabled}>
           <StylishText size="lg">{title}</StylishText>
-        </Accordion.Control>
-        <Accordion.Panel>{content}</Accordion.Panel>
+        </AccordionControl>
+        <Accordion.Panel>{!is_disabled && content}</Accordion.Panel>
       </Accordion.Item>
     )
   );

src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx

@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
@@ -95,6 +96,13 @@ export default function PurchaseHistoryPanel({
     ];
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].purchase_price_currency;
+  }, [table.records]);
+
   const purchaseHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -126,8 +134,16 @@ export default function PurchaseHistoryPanel({
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={purchaseHistoryData}>
             <XAxis dataKey="name" />
-            <YAxis />
-            <Tooltip />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Legend />
             <Bar
               dataKey="unit_price"

src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx

@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
@@ -60,6 +61,13 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
     ];
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].sale_price_currency;
+  }, [table.records]);
+
   const saleHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -90,8 +98,16 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={saleHistoryData}>
             <XAxis dataKey="name" />
-            <YAxis />
-            <Tooltip />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Legend />
             <Bar
               dataKey="sale_price"

src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx

@@ -11,6 +11,8 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
+import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
@@ -29,6 +31,13 @@ export default function SupplierPricingPanel({ part }: { part: any }) {
     return SupplierPriceBreakColumns();
   }, []);
 
+  const currency: string = useMemo(() => {
+    if (table.records.length === 0) {
+      return '';
+    }
+    return table.records[0].currency;
+  }, [table.records]);
+
   const supplierPricingData = useMemo(() => {
     return table.records.map((record: any) => {
       return {
@@ -58,8 +67,16 @@ export default function SupplierPricingPanel({ part }: { part: any }) {
         <ResponsiveContainer width="100%" height={500}>
           <BarChart data={supplierPricingData}>
             <XAxis dataKey="name" />
-            <YAxis />
-            <Tooltip />
+            <YAxis
+              tickFormatter={(value, index) =>
+                formatCurrency(value, {
+                  currency: currency
+                })?.toString() ?? ''
+              }
+            />
+            <Tooltip
+              formatter={(label, payload) => tooltipFormatter(label, currency)}
+            />
             <Bar
               dataKey="unit_price"
               fill={CHART_COLORS[0]}

src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx

@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
+import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
@@ -99,8 +100,18 @@ export default function VariantPricingPanel({
           <ResponsiveContainer width="100%" height={500}>
             <BarChart data={variantPricingData}>
               <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip />
+              <YAxis
+                tickFormatter={(value, index) =>
+                  formatCurrency(value, {
+                    currency: pricing?.currency
+                  })?.toString() ?? ''
+                }
+              />
+              <Tooltip
+                formatter={(label, payload) =>
+                  tooltipFormatter(label, pricing?.currency)
+                }
+              />
               <Legend />
               <Bar
                 dataKey="pmin"