View number of the stock item and its availability

openmrs · Nov 12, 2024 · 927fd30 · 927fd30
1 parent 34ef094
commit 927fd30
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/src/stock-operations/add-stock-operation/stock-items-addition-row.component.tsx b/src/stock-operations/add-stock-operation/stock-items-addition-row.component.tsx
@@ -134,6 +134,22 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                 </Link>
               )}
             </TableCell>
+            <TableCell>
+              <div className={styles.cellContent}>
+                {row?.stockItemUuid && (
+                  <>
+                    <div>{`#${row?.stockItemUuid?.toString()?.slice(0, 8)}`}</div>
+                    <div className={styles.availability}>
+                      {batchBalance?.[row?.stockBatchUuid]
+                        ? `Available: ${batchBalance[row?.stockBatchUuid]?.quantity?.toLocaleString() ?? 0} ${
+                            batchBalance[row?.stockBatchUuid]?.quantityUoM ?? ''
+                          }`
+                        : 'No stock available'}
+                    </div>
+                  </>
+                )}
+              </div>
+            </TableCell>
             {showQuantityRequested && (
               <TableCell>
                 <div className={styles.cellContent}>

diff --git a/src/stock-operations/add-stock-operation/stock-items-addition-row.scss b/src/stock-operations/add-stock-operation/stock-items-addition-row.scss
@@ -0,0 +1,5 @@
+.availability {
+  font-size: 0.875rem;
+  color: #525252;
+  margin-top: 0.25rem;
+}
diff --git a/src/stock-operations/add-stock-operation/stock-items-addition.component.tsx b/src/stock-operations/add-stock-operation/stock-items-addition.component.tsx
@@ -107,6 +107,11 @@ const StockItemsAddition: React.FC<StockItemsAdditionProps> = ({
       header: t('item', 'Item'),
       styles: { width: '40% !important' },
     },
+    {
+      key: 'itemDetails',
+      header: t('itemDetails', 'Item Details'),
+      styles: { width: '20% !important' },
+    },
     ...(showQuantityRequested
       ? [
           {