Fix currency not showing as expected

inventory-manager/src/components/page-content/segment3-table/segment/InventoryTable.tsx

@@ -7,6 +7,7 @@ import {useSearchContext} from "../../../../context/SearchContext";
 import {useDataContext} from "../../../../context/DataContext";
 import {deleteProduct, markInStock, markOutOfStock} from "../../../../services/Requests";
 import ProductForm from "../../segment2-new_product/ProductForm";
+import currencyTransformator from "../../../../utils/CurrencyFormatter.ts";
 
 type DataIndex = keyof Product;
 const InventoryTable: React.FC = () => {
@@ -174,7 +175,9 @@ const InventoryTable: React.FC = () => {
             title: 'Price',
             dataIndex: 'unitPrice',
             sorter: {multiple: 3},
-            filteredValue: null
+            filteredValue: null,
+            render: (value: number | null | undefined) => (
+                value == null ? "—" : currencyTransformator(value)),
         },
         {
             title: 'Expiration Date',

inventory-manager/src/components/page-content/segment4-metrics/InventoryMetricsTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {Table, type TableColumnsType} from 'antd';
 import type {CategorySummary} from "../../../types/Product";
 import {useDataContext} from "../../../context/DataContext";
+import currencyTransformator from "../../../utils/CurrencyFormatter.ts";
 
 const InventoryMetricsTable: React.FC = () => {
     const {summary} = useDataContext();
@@ -18,10 +19,14 @@ const InventoryMetricsTable: React.FC = () => {
         {
             title: 'Total Value in Stock',
             dataIndex: 'valueInStock',
+            render: (value: number | null | undefined) => (
+                value == null ? "—" : currencyTransformator(value)),
         },
         {
             title: 'Average Price in Stock',
             dataIndex: 'averageValue',
+            render: (value: number | null | undefined) => (
+                value == null ? "—" : currencyTransformator(value)),
         },
     ];
 
@@ -38,8 +43,8 @@ const InventoryMetricsTable: React.FC = () => {
                        <Table.Summary.Row>
                            <Table.Summary.Cell index={summary?.length || 0}>Overall</Table.Summary.Cell>
                            <Table.Summary.Cell index={summary?.length || 0}>{overallStock}</Table.Summary.Cell>
-                           <Table.Summary.Cell index={summary?.length || 0}>{overallValue}</Table.Summary.Cell>
-                           <Table.Summary.Cell index={summary?.length || 0}>{overallValue/overallStock}</Table.Summary.Cell>
+                           <Table.Summary.Cell index={summary?.length || 0}>{currencyTransformator(overallValue)}</Table.Summary.Cell>
+                           <Table.Summary.Cell index={summary?.length || 0}>{currencyTransformator(overallValue/overallStock)}</Table.Summary.Cell>
                        </Table.Summary.Row>
                    )
                }}

inventory-manager/src/utils/CurrencyFormatter.ts

@@ -0,0 +1,11 @@
+const currencyTransformator = (value: number) => {
+    return (new Intl.NumberFormat(
+        "en-US", {
+            style: "currency",
+            currency: "USD",
+            maximumFractionDigits: 2
+        })
+        .format(value));
+}
+
+export default currencyTransformator;