@openmrs/esm-stock-management-app 1.0.1-pre.575 → 1.0.1-pre.586

package/src/stock-operations/add-stock-operation/stock-items-addition-row.component.tsx

@@ -12,6 +12,7 @@ import {
 } from "@carbon/react";
 import { TrashCan } from "@carbon/react/icons";
 import { StockOperationItemFormData } from "../validation-schema";
+import QtyUomSelector from "../qty-uom-selector/qty-uom-selector.component";
 import StockItemSelector from "../stock-item-selector/stock-item-selector.component";
 import {
   Control,
@@ -33,8 +34,11 @@ import { StockItemPackagingUOMDTO } from "../../core/api/types/stockItem/StockIt
 import { StockItemInventory } from "../../core/api/types/stockItem/StockItemInventory";
 import { StockOperationItemDTO } from "../../core/api/types/stockOperation/StockOperationItemDTO";
 import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
-import QtyUomSelector from "../qty-uom-selector/qty-uom-selector.component";
 import BatchNoSelector from "../batch-no-selector/batch-no-selector.component";
+import {
+  getStockItemInventory,
+  StockItemInventoryFilter,
+} from "../stock-operations.resource";
 
 import styles from "./stock-items-addition-row.scss";
 
@@ -46,6 +50,8 @@ interface StockItemsAdditionRowProps {
   requiresBatchUuid?: boolean;
   canUpdateBatchInformation?: boolean;
   canCapturePurchasePrice?: boolean;
+  stockOperationUuid?: string;
+  locationUuid?: string;
   batchNos?: {
     [key: string]: StockBatchDTO[];
   };
@@ -86,19 +92,26 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
   requiresBatchUuid,
   canUpdateBatchInformation,
   canCapturePurchasePrice,
-  batchBalance,
   control,
   setValue,
   errors,
   remove,
   fields,
+  stockOperationUuid,
+  locationUuid,
 }) => {
   const [stockItemUuid, setStockItemUuid] = useState<
     string | null | undefined
   >();
-  const [stockItemExpiry, setStockItemExpiy] = useState<
-    Date | null | undefined
-  >();
+
+  const [batchBalances, setBatchBalances] = useState<{ [key: number]: any }>(
+    {}
+  );
+  const [stockItemExpiries, setStockItemExpiries] = useState<{
+    [key: number]: Date | null | undefined;
+  }>({});
+
+  const [qtyInputErrors, setQtyErrors] = useState({});
 
   const handleStockItemChange = (index: number, data?: StockItemDTO) => {
     if (!data) return;
@@ -125,16 +138,99 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
       item.stockItemPackagingUOMName = null;
 
       item.stockBatchUuid = null;
-      if (requiresBatchUuid) {
-        // handleStockBatchSearch(row, "", data.selectedItem?.uuid);
-      }
+
+      setValue(`stockItems.${index}.stockItemUuid`, item?.stockItemUuid);
+      setValue(`stockItems.${index}.stockItemName`, item?.stockItemName);
+    }
+  };
+
+  const handleFetchBatchBalance = ({
+    stockItemUuid,
+    stockBatchUuid,
+    index,
+    excludeExpired = true,
+  }) => {
+    const filters: StockItemInventoryFilter = {
+      stockBatchUuid,
+      stockItemUuid,
+      stockOperationUuid,
+      excludeExpired,
+      locationUuid,
+      groupBy: "LocationStockItemBatchNo",
+    };
+    if (stockBatchUuid) {
+      getStockItemInventory(filters)
+        .then(({ data }) => data)
+        .then((res: any) => {
+          if ((res as any).error) {
+            return;
+          }
+          const inventory: StockItemInventory = (
+            res?.results as StockItemInventory[]
+          )?.[0];
+
+          const newBatchBalance = inventory
+            ? {
+                quantity: inventory.quantity,
+                quantityUoM: inventory.quantityUoM,
+                quantityUoMUuid: inventory.quantityUoMUuid,
+              }
+            : { quantity: 0, quantityUoM: null };
+
+          setBatchBalances((prevBalances) => ({
+            ...prevBalances,
+            [index]: newBatchBalance,
+          }));
+
+          setValue(
+            `stockItems.${index}.stockItemPackagingUOMUuid`,
+            inventory.quantityUoMUuid
+          );
+
+          setValue(
+            `stockItems.${index}.stockItemPackagingUOMName`,
+            inventory.quantityUoM
+          );
+        })
+        .catch((error: any) => {
+          if ((error as any).error) {
+            return;
+          }
+          return;
+        });
+    } else {
+      setBatchBalances((prevBalances) => ({
+        ...prevBalances,
+        [index]: null,
+      }));
     }
   };
 
+  const handleInputChange = (e: any, index: number) => {
+    const inputValue = e?.target?.value;
+    const maxQuantity = Number(batchBalances[index]?.quantity);
+
+    if (inputValue > maxQuantity) {
+      setQtyErrors((prevErrors) => ({
+        ...prevErrors,
+        [`stockItems.${index}.quantity`]: `Quantity cannot exceed ${maxQuantity}`,
+      }));
+    } else {
+      setQtyErrors((prevErrors) => {
+        const newErrors = { ...prevErrors };
+        delete newErrors[`stockItems.${index}.quantity`];
+        return newErrors;
+      });
+    }
+    setValue(`stockItems.${index}.quantity`, inputValue);
+  };
+
   return (
     <>
       {fields?.map((row, index) => {
         const stockItemId = `stockItems.${index}.stockItemUuid`;
+        const currentBatchBalance = batchBalances[index];
+        const currentStockItemExpiry = stockItemExpiries[index];
         return (
           <TableRow
             className={isDesktop ? styles.desktopRow : styles.tabletRow}
@@ -198,11 +294,27 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                           `stockItems.${index}.batchNo`,
                           item?.batchNo ?? ""
                         );
+
                         setValue(
                           `stockItems.${index}.expiration`,
                           item?.expiration
                         );
-                        setStockItemExpiy(item?.expiration);
+
+                        setValue(
+                          `stockItems.${index}.hasExpiration`,
+                          item?.expiration ? true : false
+                        );
+
+                        setStockItemExpiries((prevExpiries) => ({
+                          ...prevExpiries,
+                          [index]: item?.expiration ?? null,
+                        }));
+
+                        handleFetchBatchBalance({
+                          stockItemUuid: row?.stockItemUuid,
+                          stockBatchUuid: item?.uuid,
+                          index,
+                        });
                       }}
                       placeholder={"Filter..."}
                       invalid={!!errors?.stockItems?.[index]?.stockBatchUuid}
@@ -243,7 +355,9 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                         id={`expiration-input-${row.uuid}`}
                         name="operationDate"
                         placeholder={DATE_PICKER_FORMAT}
-                        defaultValue={formatForDatePicker(row?.expiration)}
+                        defaultValue={formatForDatePicker(
+                          currentStockItemExpiry || row?.expiration
+                        )}
                         invalid={!!errors?.stockItems?.[index]?.expiration}
                       />
                     </DatePicker>
@@ -254,7 +368,7 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                 ) &&
                   !canEdit) ||
                   requiresBatchUuid) &&
-                  formatForDatePicker(row.expiration)}
+                  formatForDatePicker(currentStockItemExpiry || row.expiration)}
               </TableCell>
             )}
             <TableCell>
@@ -263,33 +377,38 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                   className="small-placeholder-text"
                   size="sm"
                   id={`qty-${row?.uuid}`}
+                  min={1}
+                  max={Number(currentBatchBalance?.quantity)}
                   hideSteppers={true}
                   allowEmpty={true}
-                  onChange={(e: any) =>
-                    setValue(`stockItems.${index}.quantity`, e?.target?.value)
-                  }
+                  onChange={(e: any) => handleInputChange(e, index)}
                   value={row?.quantity ?? ""}
-                  invalidText={errors?.stockItems?.[index]?.quantity?.message}
+                  invalidText={
+                    errors?.stockItems?.[index]?.quantity?.message ||
+                    qtyInputErrors[`stockItems.${index}.quantity`]
+                  }
                   placeholder={
                     requiresBatchUuid &&
                     !requiresActualBatchInformation &&
-                    row?.stockBatchUuid in batchBalance
+                    currentBatchBalance
                       ? `Bal: ${
-                          batchBalance[
-                            row?.stockBatchUuid
-                          ]?.quantity?.toLocaleString() ?? ""
-                        } ${
-                          batchBalance[row?.stockBatchUuid]?.quantityUoM ?? ""
-                        }`
+                          currentBatchBalance?.quantity?.toLocaleString() ?? ""
+                        } ${currentBatchBalance?.quantityUoM ?? ""}`
                       : ""
                   }
-                  invalid={!!errors?.stockItems?.[index]?.quantity}
+                  invalid={
+                    !!errors?.stockItems?.[index]?.quantity ||
+                    !!qtyInputErrors[`stockItems.${index}.quantity`]
+                  }
                 />
               )}
               {!canEdit && row?.quantity?.toLocaleString()}
             </TableCell>
+            {/* Qty UoM Cell (Non-editable) */}
             <TableCell>
-              {canEdit && (
+              {canEdit &&
+              row?.uuid.startsWith("new-item") &&
+              !currentBatchBalance?.quantityUoM ? (
                 <QtyUomSelector
                   stockItemUuid={row.stockItemUuid}
                   onStockPackageChanged={(selectedItem) => {
@@ -306,10 +425,15 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                   controllerName={`stockItems.${index}.stockItemPackagingUOMUuid`}
                   name={`stockItems.${index}.stockItemPackagingUOMUuid`}
                 />
+              ) : currentBatchBalance?.quantityUoM ? (
+                currentBatchBalance.quantityUoM
+              ) : (
+                row?.stockItemPackagingUOMName
               )}
+
               {!canEdit && row?.stockItemPackagingUOMName}
             </TableCell>
-            {canCapturePurchasePrice && (
+            {canCapturePurchasePrice ? (
               <TableCell>
                 {canEdit && (
                   <NumberInput
@@ -330,6 +454,8 @@ const StockItemsAdditionRow: React.FC<StockItemsAdditionRowProps> = ({
                 )}
                 {!canEdit && row?.purchasePrice?.toLocaleString()}
               </TableCell>
+            ) : (
+              setValue(`stockItems.${index}.purchasePrice`, null)
             )}
             {canEdit && (
               <TableCell>

package/src/stock-operations/add-stock-operation/stock-items-addition.component.tsx

@@ -241,6 +241,8 @@ const StockItemsAddition: React.FC<StockItemsAdditionProps> = ({
                         { uuid: `new-item-1`, id: `new-item-1` },
                       ]
                     }
+                    stockOperationUuid={model.uuid ?? ""}
+                    locationUuid={model.atLocationUuid ?? ""}
                     batchBalance={batchBalance}
                     batchNos={batchNos}
                     control={control}

package/src/stock-operations/batch-no-selector/batch-no-selector.component.tsx

@@ -59,12 +59,16 @@ const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
     return item;
   });
 
+  const filteredBatches = stockItemBatchesInfo?.filter(
+    (s) => s.quantity !== undefined && s.quantity !== 0
+  );
+
   useEffect(() => {
     if (
       !isLoading &&
       stockItemBatchNos &&
       props.selectedItem &&
-      stockItemBatchNos.length === 0
+      (stockItemBatchNos.length === 0 || filteredBatches.length === 0)
     ) {
       setValidationMessage(
         "No stock batch numbers defined. Do a initial/receipt stock operation first."
@@ -72,7 +76,7 @@ const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
     } else {
       setValidationMessage(null);
     }
-  }, [isLoading, stockItemBatchNos, props.selectedItem]);
+  }, [isLoading, stockItemBatchNos, props.selectedItem, filteredBatches]);
 
   if (isLoading) return <InlineLoading status="active" />;
 
@@ -90,7 +94,7 @@ const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
             controllerName={props.controllerName}
             id={props.name}
             size={"sm"}
-            items={stockItemBatchesInfo || []}
+            items={filteredBatches || []}
             onChange={(data: { selectedItem?: StockBatchDTO }) => {
               setSelectedItem(data.selectedItem || null);
               props.onBatchNoChanged?.(data.selectedItem);
@@ -98,7 +102,7 @@ const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
             }}
             initialSelectedItem={initialSelectedItem}
             itemToString={(s: StockBatchDTO) =>
-              s?.batchNo ? `${s?.batchNo} | Qty: ${s?.quantity ?? ""}` : ""
+              s?.batchNo ? `${s?.batchNo}` : ""
             }
             placeholder={props.placeholder}
             invalid={props.invalid}

package/src/stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component.tsx

@@ -1,68 +1,43 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "@carbon/react";
+import { Edit } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
-import { launchAddOrEditDialog } from "../stock-operation.utils";
 import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
-import { getStockOperation } from "../stock-operations.resource";
+import { launchAddOrEditDialog } from "../stock-operation.utils";
+
 interface EditStockOperationActionMenuProps {
-  operationUuid?: string;
-  operationNumber?: string;
-  model?: StockOperationDTO;
+  model: StockOperationDTO;
   operations: StockOperationType[];
+  operationUuid: string;
+  operationNumber: string;
+  onEdit: (operation: StockOperationDTO) => void;
+  showIcon?: boolean;
+  showprops?: boolean;
 }
+
 const EditStockOperationActionMenu: React.FC<
   EditStockOperationActionMenuProps
-> = ({ operationUuid, operationNumber, model, operations }) => {
+> = ({ model, operations, showIcon = true, showprops = true }) => {
   const { t } = useTranslation();
-  const [operation, setOperation] = useState<StockOperationDTO | null>(null);
 
-  if (operationUuid && !operation) {
-    getStockOperation(operationUuid)
-      .then((res) => setOperation(res.data))
-      .catch((error) =>
-        console.error("Error fetching stock operation:", error)
-      );
-  }
-  const type: StockOperationType = {
-    uuid: "",
-    name: "",
-    description: "",
-    operationType: "",
-    hasSource: false,
-    sourceType: "Location",
-    hasDestination: false,
-    destinationType: "Location",
-    hasRecipient: false,
-    recipientRequired: false,
-    availableWhenReserved: false,
-    allowExpiredBatchNumbers: false,
-    stockOperationTypeLocationScopes: [],
-    creator: undefined,
-    dateCreated: undefined,
-    changedBy: undefined,
-    dateChanged: undefined,
-    dateVoided: undefined,
-    voidedBy: undefined,
-    voidReason: "",
-    voided: false,
+  const handleEdit = () => {
+    const operation = operations.find(
+      (op) => op.uuid === model.operationTypeUuid
+    );
+    launchAddOrEditDialog(t, model, true, operation, operations, false);
   };
 
   return (
-    <>
-      <Button
-        type="button"
-        size="sm"
-        className="submitButton clear-padding-margin"
-        iconDescription={"View"}
-        kind="ghost"
-        onClick={() => {
-          launchAddOrEditDialog(t, model ?? operation, true, type, operations);
-        }}
-      >
-        {operationNumber ? operationNumber : `${model?.operationNumber}`}
-      </Button>
-    </>
+    <Button
+      kind="ghost"
+      size="sm"
+      onClick={handleEdit}
+      iconDescription={t("editStockOperation", "Edit Stock Operation")}
+      renderIcon={showIcon ? Edit : undefined}
+    >
+      {showprops && model.operationNumber}
+    </Button>
   );
 };
 

package/src/stock-operations/party-selector/party-selector.component.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode } from "react";
-import { Concept } from "../../core/api/types/concept/Concept";
+import React, { ReactNode, useEffect } from "react";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { Party } from "../../core/api/types/Party";
 import { ComboBox } from "@carbon/react";
@@ -7,12 +6,12 @@ import { ComboBox } from "@carbon/react";
 interface PartySelectorProps<T> {
   partyUuid?: string;
   parties: Party[];
-  onPartyChange?: (unit: Party) => void;
+  onPartyChange?: (party: Party) => void;
   title?: string;
   placeholder?: string;
   invalid?: boolean;
   invalidText?: ReactNode;
-  filter?: (party: Party) => boolean;
+  filterFunction?: (party: Party) => boolean;
 
   // Control
   controllerName: string;
@@ -25,32 +24,38 @@ const PartySelector = <T,>(props: PartySelectorProps<T>) => {
     <Controller
       name={props.controllerName}
       control={props.control}
-      render={({ field: { onChange, ref } }) => (
-        <ComboBox
-          titleText={props.title}
-          name={props.name}
-          control={props.control}
-          controllerName={props.controllerName}
-          id={props.name}
-          size={"md"}
-          items={props.parties}
-          onChange={(data: { selectedItem: Party }) => {
-            props.onPartyChange?.(data.selectedItem);
-            onChange(data.selectedItem?.uuid);
-          }}
-          initialSelectedItem={
-            props.parties?.find((p) => p.uuid === props.partyUuid) || {}
-          }
-          itemToString={(item?: Concept) =>
-            item && item?.name ? `${item?.name}` : ""
-          }
-          shouldFilterItem={() => true}
-          placeholder={props.placeholder}
-          ref={ref}
-          invalid={props.invalid}
-          invalidText={props.invalidText}
-        />
-      )}
+      render={({ field: { onChange, value, ref } }) => {
+        const selectedParty = props.parties.find(
+          (p) => p.uuid === props.partyUuid
+        );
+
+        if (selectedParty && !value) {
+          onChange(selectedParty.uuid);
+        }
+        return (
+          <ComboBox
+            titleText={props.title}
+            name={props.name}
+            id={props.name}
+            size={"md"}
+            items={props.parties}
+            onChange={(data: { selectedItem: Party }) => {
+              props.onPartyChange?.(data.selectedItem);
+              onChange(data.selectedItem?.uuid);
+            }}
+            initialSelectedItem={selectedParty}
+            selectedItem={props.parties.find((p) => p.uuid === value)}
+            itemToString={(item?: Party) =>
+              item && item?.name ? `${item?.name}` : ""
+            }
+            shouldFilterItem={() => true}
+            placeholder={props.placeholder}
+            ref={ref}
+            invalid={props.invalid}
+            invalidText={props.invalidText}
+          />
+        );
+      }}
     />
   );
 };

package/src/stock-operations/stock-item-selector/stock-item-selector.component.tsx

@@ -68,7 +68,7 @@ const StockItemSelector = <T,>(props: StockItemSelectorProps<T>) => {
 };
 
 function stockItemName(item: StockItemDTO): string {
-  return item.drugName || item.conceptName;
+  return item?.drugName || item?.conceptName;
 }
 
 export default StockItemSelector;

package/src/stock-operations/stock-operation.utils.tsx

@@ -25,10 +25,7 @@ export const addOrEditStockOperation = async (
   t: TFunction,
   stockOperation: StockOperationDTO,
   isEditing: boolean,
-  operation?: StockOperationType,
-  operations?: StockOperationType[],
-  canPrint?: boolean,
-  printEnabled?: boolean
+  operation?: StockOperationType
 ) => {
   const payload = stockOperation;
   try {
@@ -98,15 +95,7 @@ export const launchAddOrEditDialog = (
     <AddStockOperation
       model={stockOperation}
       onSave={(stockOperation) =>
-        addOrEditStockOperation(
-          t,
-          stockOperation,
-          isEditing,
-          operation,
-          operations,
-          canPrint,
-          printEnabled
-        )
+        addOrEditStockOperation(t, stockOperation, isEditing, operation)
       }
       isEditing={isEditing}
       operation={operation}

package/src/stock-operations/stock-operations-table.component.tsx

@@ -130,7 +130,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     selectedStatus.length ||
     selectedOperations.length;
 
-  let operations: StockOperationType[] | null | undefined;
+  const [operations, setOperations] = useState<StockOperationType[]>([]);
 
   const handleOnFilterChange = useCallback((selectedItems, filterType) => {
     if (filterType === StockFilters.SOURCES) {
@@ -157,6 +157,17 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
+  const handleEditClick = (stockOperation, isEditing) => {
+    launchAddOrEditDialog(
+      t,
+      stockOperation,
+      isEditing,
+      operation,
+      operations,
+      false
+    );
+  };
+
   const tableRows = useMemo(() => {
     return items?.map((stockOperation, index) => ({
       ...stockOperation,
@@ -165,8 +176,13 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
       operationTypeName: `${stockOperation?.operationTypeName}`,
       operationNumber: (
         <EditStockOperationActionMenu
-          model={items[index]}
+          model={stockOperation}
           operations={operations}
+          operationUuid={operation.uuid}
+          operationNumber={""}
+          onEdit={() => handleEditClick(stockOperation, true)}
+          showIcon={false}
+          showprops={true}
         />
       ),
       status: `${stockOperation?.status}`,
@@ -297,25 +313,18 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         </div>
       ),
       actions: (
-        <Button
-          kind="ghost"
-          size="md"
-          onClick={() => {
-            launchAddOrEditDialog(
-              t,
-              items[index],
-              true,
-              operation,
-              operations,
-              false
-            );
-          }}
-          iconDescription={t("editStockItem", "Edit Stock Item")}
-          renderIcon={(props) => <Edit size={16} {...props} />}
-        ></Button>
+        <EditStockOperationActionMenu
+          model={stockOperation}
+          operations={operations}
+          operationUuid={operation.uuid}
+          operationNumber={""}
+          onEdit={() => handleEditClick(stockOperation, true)}
+          showIcon={true}
+          showprops={false}
+        />
       ),
     }));
-  }, [items, operation, operations, t]);
+  }, [items, operations, t]);
 
   if (isLoading && !filterApplied) {
     return (
@@ -417,7 +426,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                     );
                   }}
                   onOperationLoaded={(ops) => {
-                    operations = ops;
+                    setOperations(ops);
                   }}
                 />
               </TableToolbarContent>

package/src/stock-operations/stock-operations.resource.ts

@@ -210,7 +210,7 @@ export function getStockOperationItemsCost(filter: StockOperationFilter) {
 export function getStockItemInventory(filter: StockItemInventoryFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockiteminventory${toQueryParams(
     filter
-  )}`;
+  )}&v=default`;
   const abortController = new AbortController();
   return openmrsFetch(apiUrl, {
     method: "GET",