diff --git a/inventory-manager/src/components/page-content/segment3-table/segment/InventoryTable.tsx b/inventory-manager/src/components/page-content/segment3-table/segment/InventoryTable.tsx index 2cdf6de..4569838 100644 --- a/inventory-manager/src/components/page-content/segment3-table/segment/InventoryTable.tsx +++ b/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', diff --git a/inventory-manager/src/components/page-content/segment4-metrics/InventoryMetricsTable.tsx b/inventory-manager/src/components/page-content/segment4-metrics/InventoryMetricsTable.tsx index 79608a3..e3dcaf9 100644 --- a/inventory-manager/src/components/page-content/segment4-metrics/InventoryMetricsTable.tsx +++ b/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 = () => { Overall {overallStock} - {overallValue} - {overallValue/overallStock} + {currencyTransformator(overallValue)} + {currencyTransformator(overallValue/overallStock)} ) }} diff --git a/inventory-manager/src/utils/CurrencyFormatter.ts b/inventory-manager/src/utils/CurrencyFormatter.ts new file mode 100644 index 0000000..b78615d --- /dev/null +++ b/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; \ No newline at end of file