[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
2024-08-30 18:33:04 +00:00 · 2024-04-17 01:52:14 +02:00 · 2024-04-17 01:52:14 +02:00 · 9435a4c3fd
commit 9435a4c3fd
parent 5bf246c478
10 changed files with 274 additions and 52 deletions
--- a/src/frontend/src/components/charts/tooltipFormatter.tsx
+++ b/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() ?? ''
+  );
+}
--- a/src/frontend/src/pages/part/PartPricingPanel.tsx
+++ b/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>
      )}
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/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}
--- a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
+++ b/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"
--- a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
+++ b/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}
+              {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"
--- a/src/frontend/src/pages/part/pricing/PricingPanel.tsx
+++ b/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>
    )
  );
--- a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
+++ b/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"
--- a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
+++ b/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"
--- a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
+++ b/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]}
--- a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
+++ b/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"