@openmrs/esm-stock-management-app 1.0.1-pre.327

package/src/stock-operations/add-stock-operation/stock-operation-submission.component.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import {
+  SaveStockOperation,
+  SaveStockOperationAction,
+} from "../../stock-items/types";
+import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+import { InitializeResult } from "./types";
+import {
+  Button,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  TextInput,
+} from "@carbon/react";
+import {
+  Departure,
+  ListChecked,
+  Save,
+  SendFilled,
+  Undo,
+} from "@carbon/react/icons";
+
+interface StockOperationSubmissionProps {
+  isEditing?: boolean;
+  model?: StockOperationDTO;
+  onSave?: SaveStockOperation;
+  operation: StockOperationType;
+  setup: InitializeResult;
+  canEdit?: boolean;
+  locked?: boolean;
+  requiresDispatchAcknowledgement?: boolean;
+  actions: {
+    onGoBack: () => void;
+    onSave?: SaveStockOperation;
+    onComplete: SaveStockOperationAction;
+    onSubmit: SaveStockOperationAction;
+    onDispatch: SaveStockOperationAction;
+  };
+}
+
+const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
+  canEdit,
+  locked,
+  model,
+  requiresDispatchAcknowledgement,
+  actions,
+}) => {
+  const { t } = useTranslation();
+  const [isSaving, setIsSaving] = useState(false);
+  const [approvalRequired, setApprovalRequired] = useState<boolean | null>(
+    null
+  );
+
+  const handleRadioButtonChange = (selectedItem: boolean) => {
+    setApprovalRequired(selectedItem);
+  };
+
+  return (
+    <div style={{ margin: "10px" }}>
+      {canEdit && !locked && (
+        <div style={{ margin: "10px" }}>
+          <RadioButtonGroup
+            name="rbgApprovelRequired"
+            legendText={t(
+              "doesThisTransactionRequireApproval",
+              "Does the transaction require approval ?"
+            )}
+            onChange={handleRadioButtonChange}
+            defaultSelected={approvalRequired}
+          >
+            <RadioButton
+              value={true}
+              id="rbgApprovelRequired-true"
+              labelText={t("yes", "Yes")}
+            />
+            <RadioButton
+              value={false}
+              id="rbgApprovelRequired-false"
+              labelText={t("no", "No")}
+            />
+          </RadioButtonGroup>
+        </div>
+      )}
+      {!canEdit && (
+        <>
+          <TextInput
+            style={{ margin: "5px" }}
+            id="rbgApproveRequiredLbl"
+            value={approvalRequired ? t("yes", "Yes") : t("no", "No")}
+            readOnly={true}
+            labelText={t(
+              "doesThisTransactionRequireApproval",
+              "Does the transaction require approval ?"
+            )}
+          />
+        </>
+      )}
+
+      {canEdit && !locked && (
+        <div className="stkpg-form-buttons" style={{ margin: "10px" }}>
+          {approvalRequired != null && (
+            <>
+              {!requiresDispatchAcknowledgement && !approvalRequired && (
+                <Button
+                  name="complete"
+                  type="button"
+                  style={{ margin: "4px" }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={async () => {
+                    delete model?.dateCreated;
+                    model.status = "COMPLETED";
+                    setIsSaving(true);
+                    await actions.onComplete(model);
+                    setIsSaving(false);
+                  }}
+                  renderIcon={ListChecked}
+                >
+                  {t("complete", "Complete")}
+                </Button>
+              )}
+              {requiresDispatchAcknowledgement && !approvalRequired && (
+                <Button
+                  name="dispatch"
+                  type="button"
+                  style={{ margin: "4px" }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={actions.onDispatch}
+                  renderIcon={Departure}
+                >
+                  {t("dispatch", "Dispatch")}
+                </Button>
+              )}
+              {approvalRequired && (
+                <Button
+                  name="submit"
+                  type="button"
+                  style={{ margin: "4px" }}
+                  className="submitButton"
+                  kind="primary"
+                  onClick={actions.onSubmit}
+                  renderIcon={SendFilled}
+                >
+                  {t("submit", "Submit For Review")}
+                </Button>
+              )}
+            </>
+          )}
+          <Button
+            name="save"
+            type="button"
+            className="submitButton"
+            style={{ margin: "4px" }}
+            disabled={isSaving}
+            onClick={async () => {
+              delete model?.dateCreated;
+              delete model?.status;
+              setIsSaving(true);
+              await actions.onSave(model);
+              setIsSaving(false);
+            }}
+            kind="secondary"
+            renderIcon={Save}
+          >
+            {isSaving ? <InlineLoading /> : t("save", "Save")}
+          </Button>
+          {!isSaving && (
+            <Button
+              type="button"
+              style={{ margin: "4px" }}
+              className="cancelButton"
+              kind="tertiary"
+              onClick={actions.onGoBack}
+              renderIcon={Undo}
+            >
+              {t("goBack", "Go Back")}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StockOperationSubmission;

package/src/stock-operations/add-stock-operation/types.ts

@@ -0,0 +1,55 @@
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import { StockOperationItemDTO } from "../../core/api/types/stockOperation/StockOperationItemDTO";
+import { Party } from "../../core/api/types/Party";
+import { StockOperationType } from "../../core/api/types/stockOperation/StockOperationType";
+import { SaveStockOperation } from "../../stock-items/types";
+import { StockBatchDTO } from "../../core/api/types/stockItem/StockBatchDTO";
+import { StockItemPackagingUOMDTO } from "../../core/api/types/stockItem/StockItemPackagingUOM";
+import { StockItemInventory } from "../../core/api/types/stockItem/StockItemInventory";
+
+export interface InitializeResult {
+  dto?: StockOperationDTO;
+  requisition?: string;
+  stockItems?: StockOperationItemDTO[];
+  showQuantityRequested?: boolean;
+  isNegativeQuantityAllowed: boolean;
+  requiresBatchUuid: boolean;
+  requiresActualBatchInfo: boolean;
+  isQuantityOptional: boolean;
+  canCaptureQuantityPrice: boolean;
+  requiresStockAdjustmentReason: boolean;
+  requiresDispatchAcknowledgement: boolean;
+  allowExpiredBatchNumbers: boolean;
+  canEditModel: boolean;
+  canViewModel: boolean;
+  canApproveModel: boolean;
+  canIssueStock: boolean;
+  canReceiveItems: boolean;
+  canDisplayReceivedItems: boolean;
+  canUpdateItemsBatchInformation: boolean;
+  canPrint: boolean;
+  sourceTags: string[];
+  destinationTags: string[];
+  shouldLockSource: boolean;
+  shouldLockDestination: boolean;
+  sourcePartyListFilter?: (p: Party) => boolean;
+  destinationPartyListFilter?: (p: Party) => boolean;
+  location?: string;
+  sourcePartyList?: Party[];
+  destinationPartyList?: Party[];
+  stockOperationTypes: StockOperationType[];
+  hasQtyRequested: boolean;
+  batchNos?: { [key: string]: StockBatchDTO[] };
+  itemUoM?: { [key: string]: StockItemPackagingUOMDTO[] };
+  batchBalance?: { [key: string]: StockItemInventory };
+}
+
+export interface AddStockOperationProps {
+  isEditing?: boolean;
+  model?: StockOperationDTO;
+  onSave?: SaveStockOperation;
+  operation: StockOperationType;
+  operations?: StockOperationType[];
+  canPrint?: boolean;
+  canEdit?: boolean;
+}

package/src/stock-operations/add-stock-operation/validationSchema.ts

@@ -0,0 +1,45 @@
+import { z } from "zod";
+
+export const baseStockOperationSchema = {
+  stockItemUuid: z.string().min(1, { message: "Required" }),
+  stockItemName: z.string().min(1).nullish(),
+  stockItemPackagingUOMUuid: z.string().min(1, { message: "Required" }),
+  stockItemPackagingUOMName: z.string().min(1).nullish(),
+  batchNo: z.string().min(1, { message: "Required" }),
+  stockBatchUuid: z.string().optional(),
+  expiration: z.coerce.date({ required_error: "Required" }),
+  quantity: z.coerce.number().min(1, { message: "Required" }),
+  purchasePrice: z.coerce.number().nullish(),
+  hasExpiration: z.boolean().nullish(),
+};
+
+export const stockItemTableSchema = z.object(baseStockOperationSchema);
+
+export const stockItemTableSchemaWithNoExpiration = stockItemTableSchema.omit({
+  expiration: true,
+});
+
+export const stockOperationItemsSchema = z.object({
+  stockItems: z.array(stockItemTableSchema),
+});
+
+export type StockOperationItemsFormData = z.infer<
+  typeof stockOperationItemsSchema
+>;
+
+export type StockOperationItemFormData = z.infer<
+  typeof stockOperationItemsSchema
+>["stockItems"][number];
+
+export function useValidationSchema(operationType?: string) {
+  if (operationType === "requisition") {
+    const customSchema = stockItemTableSchema.omit({
+      batchNo: true,
+      expiration: true,
+    });
+    return z.object({
+      stockItems: z.array(customSchema),
+    });
+  }
+  return stockOperationItemsSchema;
+}

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

@@ -0,0 +1,100 @@
+import React, { ReactNode, useEffect, useMemo } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { ComboBox, InlineLoading } from "@carbon/react";
+import { useStockItemBatchNos } from "./batch-no-selector.resource";
+import { StockBatchDTO } from "../../core/api/types/stockItem/StockBatchDTO";
+import { useStockItemBatchInformationHook } from "../../stock-items/add-stock-item/batch-information/batch-information.resource";
+import { ResourceRepresentation } from "../../core/api/api";
+
+interface BatchNoSelectorProps<T> {
+  placeholder?: string;
+  stockItemUuid: string;
+  batchUuid?: string;
+  onBatchNoChanged?: (item: StockBatchDTO) => void;
+  title?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNos(
+    props.stockItemUuid
+  );
+  const initialSelectedItem = useMemo(
+    () =>
+      stockItemBatchNos?.find(
+        (stockItem) => stockItem.uuid === props.batchUuid
+      ) ?? "",
+    [stockItemBatchNos, props.batchUuid]
+  );
+  const { items, setStockItemUuid } = useStockItemBatchInformationHook(
+    ResourceRepresentation.Default
+  );
+
+  useEffect(() => {
+    setStockItemUuid(props.stockItemUuid);
+  }, [props.stockItemUuid, setStockItemUuid]);
+
+  const stockItemBatchesInfo = stockItemBatchNos?.map((item) => {
+    const matchingBatch = items?.find(
+      (batch) => batch.batchNumber === item.batchNo
+    );
+    if (matchingBatch) {
+      return {
+        ...item,
+        quantity: matchingBatch.quantity ?? "",
+      };
+    }
+    return item;
+  });
+
+  if (isLoading) return <InlineLoading status="active" />;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+      }}
+    >
+      <Controller
+        name={props.controllerName}
+        control={props.control}
+        render={({ field: { onChange, ref } }) => (
+          <ComboBox
+            style={{
+              flexGrow: "1",
+            }}
+            titleText={props.title}
+            name={props.name}
+            control={props.control}
+            controllerName={props.controllerName}
+            id={props.name}
+            size={"sm"}
+            items={stockItemBatchesInfo || []}
+            onChange={(data: { selectedItem?: StockBatchDTO }) => {
+              props.onBatchNoChanged?.(data.selectedItem);
+              onChange(data.selectedItem?.uuid);
+            }}
+            initialSelectedItem={initialSelectedItem}
+            itemToString={(s: StockBatchDTO) =>
+              s?.batchNo ? `${s?.batchNo} | Qty: ${s?.quantity ?? ""}` : ""
+            }
+            placeholder={props.placeholder}
+            invalid={props.invalid}
+            invalidText={props.invalidText}
+            ref={ref}
+          />
+        )}
+      />
+      {isLoading && <InlineLoading status="active" />}
+    </div>
+  );
+};
+
+export default BatchNoSelector;

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

@@ -0,0 +1,46 @@
+import {
+  StockBatchFilter,
+  useStockBatches,
+} from "../../stock-items/stock-items.resource";
+import { useEffect, useState } from "react";
+import { ResourceRepresentation } from "../../core/api/api";
+
+export function useStockItemBatchNos(stockItemUuid: string) {
+  const [conceptFilter, setConceptFilter] = useState<StockBatchFilter>({
+    v: ResourceRepresentation.Default,
+    limit: 10,
+    startIndex: 0,
+    stockItemUuid,
+  });
+
+  const {
+    items: { results: stockItemBatchNos },
+    isLoading,
+  } = useStockBatches(conceptFilter);
+
+  const [searchString, setSearchString] = useState(null);
+
+  // Drug filter type
+  const [limit, setLimit] = useState(10);
+  const [representation, setRepresentation] = useState(
+    ResourceRepresentation.Default
+  );
+
+  useEffect(() => {
+    setConceptFilter({
+      startIndex: 0,
+      v: representation,
+      limit: limit,
+      q: searchString,
+      stockItemUuid,
+    });
+  }, [searchString, limit, representation, stockItemUuid]);
+
+  return {
+    stockItemBatchNos,
+    setLimit,
+    setRepresentation,
+    setSearchString,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+import BatchNoSelector from "./batch-no-selector.component";
+
+describe("Test the batch no selector", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<BatchNoSelector />);
+  });
+});

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

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Button } from "@carbon/react";
+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";
+interface EditStockOperationActionMenuProps {
+  operationUuid?: string;
+  operationNumber?: string;
+  model?: StockOperationDTO;
+  operations: StockOperationType[];
+}
+const EditStockOperationActionMenu: React.FC<
+  EditStockOperationActionMenuProps
+> = ({ operationUuid, operationNumber, model, operations }) => {
+  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,
+  };
+
+  return (
+    <>
+      <Button
+        type="button"
+        size="sm"
+        className="submitButton clear-padding-margin"
+        iconDescription={"View"}
+        kind="ghost"
+        onClick={() => {
+          launchAddOrEditDialog(
+            model ?? operation,
+            true,
+            type,
+            operations,
+            false
+          );
+        }}
+      >
+        {operationNumber ? operationNumber : `${model?.operationNumber}`}
+      </Button>
+    </>
+  );
+};
+
+export default EditStockOperationActionMenu;

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

@@ -0,0 +1,58 @@
+import React, { ReactNode } from "react";
+import { Concept } from "../../core/api/types/concept/Concept";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { Party } from "../../core/api/types/Party";
+import { ComboBox } from "@carbon/react";
+
+interface PartySelectorProps<T> {
+  partyUuid?: string;
+  parties: Party[];
+  onPartyChange?: (unit: Party) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+  filter?: (party: Party) => boolean;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const PartySelector = <T,>(props: PartySelectorProps<T>) => {
+  return (
+    <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}
+        />
+      )}
+    />
+  );
+};
+
+export default PartySelector;

package/src/stock-operations/qty-uom-selector/qty-uom-selector.component.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useMemo } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { StockItemPackagingUOMDTO } from "../../core/api/types/stockItem/StockItemPackagingUOM";
+import { ComboBox, SkeletonText } from "@carbon/react";
+import { useStockItem } from "../../stock-items/stock-items.resource";
+
+interface QtyUomSelectorProps<T> {
+  placeholder?: string;
+  stockItemUuid: string;
+  stockItemPackagingUOMUuid?: string;
+  onStockPackageChanged?: (item: StockItemPackagingUOMDTO) => void;
+  title?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const QtyUomSelector = <T,>(props: QtyUomSelectorProps<T>) => {
+  const { isLoading, isError, item } = useStockItem(props.stockItemUuid);
+  const initialSelectedItem = useMemo<StockItemPackagingUOMDTO | null>(
+    () => (item?.packagingUnits?.length > 0 ? item.packagingUnits[0] : null),
+    [item?.packagingUnits]
+  );
+
+  if (isLoading || isError) return <SkeletonText />;
+
+  return (
+    <div>
+      <Controller
+        name={props.controllerName}
+        control={props.control}
+        defaultValue={initialSelectedItem.uuid ?? ""}
+        render={({ field: { onChange, ref } }) => (
+          <ComboBox
+            titleText={props.title}
+            name={props.name}
+            control={props.control}
+            controllerName={props.controllerName}
+            id={props.name}
+            size={"sm"}
+            items={item?.packagingUnits ?? []}
+            onChange={(data: { selectedItem?: StockItemPackagingUOMDTO }) => {
+              props.onStockPackageChanged?.(data.selectedItem);
+              onChange(data.selectedItem?.uuid);
+            }}
+            initialSelectedItem={initialSelectedItem}
+            itemToString={(s: StockItemPackagingUOMDTO) =>
+              s.packagingUomName ?? ""
+            }
+            placeholder={props.placeholder}
+            invalid={props.invalid}
+            invalidText={props.invalidText}
+            ref={ref}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export default QtyUomSelector;

package/src/stock-operations/qty-uom-selector/qty-uom-selector.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+import QtyUomSelector from "./qty-uom-selector.component";
+
+describe("Test the qty uom selector", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<QtyUomSelector />);
+  });
+});