From 4cf395c06f2ee41afcd0d36f6b4d83f1ef740054 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 28 May 2024 17:01:21 +1000
Subject: [PATCH] Add new "available" badge to stock page (#7368)

---
 src/frontend/src/pages/stock/StockDetail.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
index 4aaecfa54f13..d4795cc37695 100644
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -501,6 +501,9 @@ export default function StockDetail() {
   );
 
   const stockBadges: ReactNode[] = useMemo(() => {
+    let available = (stockitem?.quantity ?? 0) - (stockitem?.allocated ?? 0);
+    available = Math.max(0, available);
+
     return instanceQuery.isLoading
       ? []
       : [
@@ -521,6 +524,12 @@ export default function StockDetail() {
             visible={!stockitem.serial}
             key="quantity"
           />,
+          <DetailsBadge
+            color="yellow"
+            label={t`Available` + `: ${available}`}
+            visible={!stockitem.serial && available != stockitem.quantity}
+            key="available"
+          />,
           <DetailsBadge
             color="blue"
             label={t`Batch Code` + `: ${stockitem.batch}`}