[PUI] Price range formatting (#6107)

* Implement price range formatter

* Remove error message logging

* Fix unused variable issue

* Clean up more error messages

src/frontend/src/components/images/ApiImage.tsx

@@ -49,14 +49,12 @@ export function ApiImage(props: ImageProps) {
               // User is not authorized to view this image, or the image is not available
               setImage('');
               setAuthorized(false);
-              console.error(`Error fetching image ${props.src}:`, response);
               break;
           }
 
           return response;
         })
-        .catch((error) => {
+        .catch((_error) => {
-          console.error(`Error fetching image ${props.src}:`, error);
           return null;
         });
     },

src/frontend/src/components/nav/Header.tsx

@@ -49,7 +49,6 @@ export function Header() {
           return response.data;
         })
         .catch((error) => {
-          console.error('Error fetching notifications:', error);
           return error;
         });
     },

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -44,7 +44,6 @@ export function NotificationDrawer({
         })
         .then((response) => response.data)
         .catch((error) => {
-          console.error('Error fetching notifications:', error);
           return error;
         }),
     refetchOnMount: false,

src/frontend/src/components/tables/bom/BomTable.tsx

@@ -8,6 +8,7 @@ import {
 import { ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { formatPriceRange } from '../../../defaults/formatters';
 import { ApiPaths } from '../../../enums/ApiEndpoints';
 import { UserRoles } from '../../../enums/Roles';
 import { bomItemFields } from '../../../forms/BomForms';
@@ -142,14 +143,8 @@ export function BomTable({
         title: t`Price Range`,
 
         sortable: false,
-        render: (row) => {
+        render: (record: any) =>
-          let min_price = row.pricing_min || row.pricing_max;
+          formatPriceRange(record.pricing_min, record.pricing_max)
-          let max_price = row.pricing_max || row.pricing_min;
-
-          // TODO: Custom price range rendering component
-          // TODO: Footer component for price range
-          return `${min_price} - ${max_price}`;
-        }
       },
       {
         accessor: 'available_stock',

src/frontend/src/components/tables/part/PartTable.tsx

@@ -3,6 +3,7 @@ import { Group, Text } from '@mantine/core';
 import { ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { formatPriceRange } from '../../../defaults/formatters';
 import { ApiPaths } from '../../../enums/ApiEndpoints';
 import { shortenString } from '../../../functions/tables';
 import { useTable } from '../../../hooks/UseTable';
@@ -136,7 +137,7 @@ function partTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group spacing="xs" position="left">
+              <Group spacing="xs" position="left" noWrap>
                 <Text color={color}>{text}</Text>
                 {record.units && (
                   <Text size="xs" color={color}>
@@ -155,11 +156,8 @@ function partTableColumns(): TableColumn[] {
       accessor: 'price_range',
       title: t`Price Range`,
       sortable: false,
-
+      render: (record: any) =>
-      render: function (record: any) {
+        formatPriceRange(record.pricing_min, record.pricing_max)
-        // TODO: Render price range
-        return '-- price --';
-      }
     },
     LinkColumn()
   ];

src/frontend/src/defaults/formatters.tsx

@@ -21,7 +21,7 @@ interface formatCurrencyOptionsType {
  * - digits: Maximum number of significant digits (default = 10)
  */
 export function formatCurrency(
-  value: number,
+  value: number | null,
   options: formatCurrencyOptionsType = {}
 ) {
   if (value == null) {
@@ -53,6 +53,39 @@ export function formatCurrency(
   return formatter.format(value);
 }
 
+/*
+ * Render the price range for the provided values
+ */
+export function formatPriceRange(
+  minValue: number | null,
+  maxValue: number | null,
+  options: formatCurrencyOptionsType = {}
+) {
+  // If neither values are provided, return a dash
+  if (minValue == null && maxValue == null) {
+    return '-';
+  }
+
+  if (minValue == null) {
+    return formatCurrency(maxValue!, options);
+  }
+
+  if (maxValue == null) {
+    return formatCurrency(minValue!, options);
+  }
+
+  // If both values are the same, return a single value
+  if (minValue == maxValue) {
+    return formatCurrency(minValue, options);
+  }
+
+  // Otherwise, return a range
+  return `${formatCurrency(minValue, options)} - ${formatCurrency(
+    maxValue,
+    options
+  )}`;
+}
+
 interface renderDateOptionsType {
   showTime?: boolean;
 }