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

package/src/stock-items/add-stock-item/add-stock-item.component.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import StockItemDetails from "./stock-item-details/stock-item-details.component";
+import StockItemRules from "./stock-item-rules/stock-item-rules.component";
+import { TabItem } from "../../core/components/tabs/types";
+import PackagingUnits from "./packaging-units/packaging-units.component";
+import Transactions from "./transactions/transactions.component";
+import BatchInformation from "./batch-information/batch-information.component";
+import StockQuantities from "./quantities/quantities.component";
+import VerticalTabs from "../../core/components/tabs/vertical-tabs.component";
+import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
+import { SaveStockItem } from "../types";
+
+interface AddStockItemProps {
+  isEditing?: boolean;
+  model?: StockItemDTO;
+  onSave?: SaveStockItem;
+}
+
+const AddEditStockItem: React.FC<AddStockItemProps> = ({
+  isEditing,
+  model,
+  onSave,
+}) => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(0);
+  const handleTabChange = (index: number) => {
+    setSelectedTab(index);
+  };
+  const tabs: TabItem[] = [
+    {
+      name: t("stockItemDetails", "Stock Item Details"),
+      component: (
+        <StockItemDetails
+          handleTabChange={handleTabChange}
+          model={model}
+          onSave={onSave}
+          isEditing={isEditing}
+        />
+      ),
+    },
+    {
+      name: t("packagingUnits", "Packaging Units"),
+      component: (
+        <PackagingUnits
+          isEditing
+          handleTabChange={handleTabChange}
+          stockItemUuid={model.uuid}
+        />
+      ),
+      disabled: !isEditing,
+    },
+    {
+      name: t("transactions", "Transactions"),
+      component: <Transactions stockItemUuid={model.uuid} />,
+      disabled: !isEditing,
+    },
+    {
+      name: t("batchInformation", "Batch Information"),
+      component: <BatchInformation stockItemUuid={model.uuid} />,
+      disabled: !isEditing,
+    },
+    {
+      name: t("quantities", "Quantities"),
+      component: <StockQuantities stockItemUuid={model.uuid} />,
+      disabled: !isEditing,
+    },
+    {
+      name: t("stockRules", "Stock Rules"),
+      component: <StockItemRules stockItemUuid={model.uuid} />,
+      disabled: !isEditing,
+    },
+  ];
+
+  return (
+    <VerticalTabs
+      onChange={handleTabChange}
+      tabs={tabs}
+      selectedIndex={selectedTab}
+    />
+  );
+};
+
+export default AddEditStockItem;

package/src/stock-items/add-stock-item/add-stock-item.resource.tsx

@@ -0,0 +1,36 @@
+import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
+
+export const initialValues: StockItemDTO = {
+  uuid: undefined,
+  isDrug: undefined,
+  drugUuid: undefined,
+  drugName: undefined,
+  conceptUuid: undefined,
+  commonName: undefined,
+  acronym: undefined,
+  conceptName: undefined,
+  hasExpiration: undefined,
+  preferredVendorUuid: undefined,
+  preferredVendorName: undefined,
+  purchasePrice: undefined,
+  purchasePriceUoMUuid: undefined,
+  purchasePriceUoMName: undefined,
+  dispensingUnitName: undefined,
+  dispensingUnitUuid: undefined,
+  dispensingUnitPackagingUoMUuid: undefined,
+  dispensingUnitPackagingUoMName: undefined,
+  defaultStockOperationsUoMUuid: undefined,
+  defaultStockOperationsUoMName: undefined,
+  reorderLevel: undefined,
+  reorderLevelUoMUuid: undefined,
+  reorderLevelUoMName: undefined,
+  dateCreated: undefined,
+  creatorGivenName: undefined,
+  creatorFamilyName: undefined,
+  voided: undefined,
+  packagingUnits: undefined,
+  permission: undefined,
+  categoryUuid: undefined,
+  categoryName: undefined,
+  expiryNotice: undefined,
+};

package/src/stock-items/add-stock-item/add-stock-item.scss

@@ -0,0 +1,5 @@
+.formContainer {
+  max-height: calc(100vh - 100px);
+  overflow: scroll;
+  padding: 0 1rem;
+}

package/src/stock-items/add-stock-item/batch-information/batch-information.component.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ResourceRepresentation } from "../../../core/api/api";
+import { formatDisplayDate } from "../../../core/utils/datetimeUtils";
+import { DataTableSkeleton, Tile } from "@carbon/react";
+import DataList from "../../../core/components/table/table.component";
+import styles from "../../stock-items-table.scss";
+import { useStockItemBatchInformationHook } from "./batch-information.resource";
+
+interface BatchInformationProps {
+  onSubmit?: () => void;
+  stockItemUuid: string;
+}
+
+const BatchInformation: React.FC<BatchInformationProps> = ({
+  stockItemUuid,
+}) => {
+  const {
+    isLoading,
+    items,
+
+    totalCount,
+    setCurrentPage,
+    setStockItemUuid,
+  } = useStockItemBatchInformationHook(ResourceRepresentation.Default);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setStockItemUuid(stockItemUuid);
+  }, [stockItemUuid, setStockItemUuid]);
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: "location",
+        header: t("location", "Location"),
+      },
+      {
+        key: "batch",
+        header: t("batchNumber", "Batch Number"),
+      },
+      {
+        key: "quantity",
+        header: t("quantity", "Quantity"),
+      },
+      {
+        key: "packaging",
+        header: t("packagingUnit", "Packaging Unit"),
+      },
+      {
+        key: "expires",
+        header: t("expires", "Expires"),
+      },
+    ],
+    []
+  );
+
+  const tableRows = useMemo(() => {
+    return items?.map((row, index) => ({
+      ...row,
+      id: `${row.partyUuid}${row.stockBatchUuid}${index}`,
+      key: `${row.partyUuid}${row.stockBatchUuid}${index}`,
+      uuid: `${row.partyUuid}${row.stockBatchUuid}${index}`,
+      expires: formatDisplayDate(row?.expiration),
+      location: row?.partyName,
+      quantity: row?.quantity?.toLocaleString() ?? "",
+      batch: row.batchNumber ?? "",
+      packaging: row.quantityUoM ?? "",
+    }));
+  }, [items]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (items?.length > 0) {
+    return (
+      <DataList
+        columns={tableHeaders}
+        data={tableRows}
+        totalItems={totalCount}
+        goToPage={setCurrentPage}
+        hasToolbar={false}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.tileContainer}>
+      <Tile className={styles.tile}>
+        <p className={styles.content}>
+          {t("batchInfoToDisplay", "No batch information to display")}
+        </p>
+      </Tile>
+    </div>
+  );
+};
+
+export default BatchInformation;

package/src/stock-items/add-stock-item/batch-information/batch-information.resource.tsx

@@ -0,0 +1,71 @@
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useEffect, useMemo, useState } from "react";
+import {
+  StockItemInventoryFilter,
+  useStockItemInventory,
+} from "../../stock-items.resource";
+
+export function useStockItemBatchInformationHook(v?: ResourceRepresentation) {
+  const [stockItemFilter, setStockItemFilter] =
+    useState<StockItemInventoryFilter>({
+      startIndex: 0,
+      v: v || ResourceRepresentation.Default,
+      limit: 10,
+      q: null,
+      totalCount: true,
+      includeBatchNo: true,
+    });
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const [searchString, setSearchString] = useState(null);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [stockItemUuid, setStockItemUuid] = useState<string | null>();
+  const [partyUuid, setPartyUuid] = useState<string | null>();
+  const [locationUuid, setLocationUuid] = useState<string | null>();
+  const [stockBatchUuid, setStockBatchUuid] = useState<string | null>();
+
+  useEffect(() => {
+    setStockItemFilter({
+      startIndex: currentPage - 1,
+      v: ResourceRepresentation.Default,
+      limit: currentPageSize,
+      q: searchString,
+      totalCount: true,
+      stockItemUuid: stockItemUuid,
+      partyUuid: partyUuid,
+      locationUuid: locationUuid,
+      stockBatchUuid: stockBatchUuid,
+      includeBatchNo: true,
+    });
+  }, [
+    searchString,
+    currentPage,
+    currentPageSize,
+    stockItemUuid,
+    partyUuid,
+    locationUuid,
+    stockBatchUuid,
+  ]);
+
+  const { items, isLoading, isError } = useStockItemInventory(stockItemFilter);
+
+  return {
+    items: items.results ?? [],
+    totalCount: items.totalCount,
+    currentPage,
+    currentPageSize,
+    setCurrentPage,
+    setPageSize,
+    pageSizes,
+    isLoading,
+    isError,
+    setSearchString,
+    setStockItemUuid,
+    setLocationUuid,
+    setPartyUuid,
+    setStockBatchUuid,
+  };
+}

package/src/stock-items/add-stock-item/concepts-selector/concepts-selector.component.tsx

@@ -0,0 +1,79 @@
+import React, { ReactNode, useMemo, useState } from "react";
+import { Concept } from "../../../core/api/types/concept/Concept";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { useConcepts } from "../../../stock-lookups/stock-lookups.resource";
+import { ComboBox, TextInputSkeleton } from "@carbon/react";
+
+interface ConceptsSelectorProps<T> {
+  conceptUuid?: string;
+  onConceptUuidChange?: (unit: Concept) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const ConceptsSelector = <T,>(props: ConceptsSelectorProps<T>) => {
+  const {
+    items: { results: concepts },
+    isLoading,
+  } = useConcepts({});
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (value) => {
+    setInputValue(value);
+  };
+
+  const filteredConcepts = useMemo(() => {
+    return inputValue.trim() === ""
+      ? concepts
+      : concepts.filter((concept) =>
+          concept.display
+            .toLowerCase()
+            .includes(inputValue.trim().toLowerCase())
+        );
+  }, [inputValue, concepts]);
+
+  if (isLoading) return <TextInputSkeleton />;
+
+  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={filteredConcepts}
+          onChange={(data: { selectedItem: Concept }) => {
+            props.onConceptUuidChange?.(data.selectedItem);
+            onChange(data.selectedItem.uuid);
+          }}
+          initialSelectedItem={
+            concepts?.find((p) => p.uuid === props.conceptUuid) || {}
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.display ? `${item?.display}` : ""
+          }
+          shouldFilterItem={() => true}
+          onInputChange={(event) => handleInputChange(event)}
+          inputValue={inputValue}
+          placeholder={props.placeholder}
+          ref={ref}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default ConceptsSelector;

package/src/stock-items/add-stock-item/concepts-selector/concepts-selector.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the concepts selector", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<ConceptsSelector />);
+  });
+});

package/src/stock-items/add-stock-item/dispensing-package-measurement/dispensing-package-measurement.component.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode, useState } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { StockItemPackagingUOMDTO } from "../../../core/api/types/stockItem/StockItemPackagingUOM";
+import { Select, SelectItem, SelectSkeleton } from "@carbon/react";
+
+interface DispensingPackageMeasurementProps<T> {
+  dispensingUnitPackagingUoMUuid?: string;
+  onDispensingUnitPackagingUoMUuidChange?: (
+    unit: StockItemPackagingUOMDTO
+  ) => void;
+  isLoading?: boolean;
+  packagingUnits?: StockItemPackagingUOMDTO[];
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const DispensingPackageMeasurement = <T,>(
+  props: DispensingPackageMeasurementProps<T>
+) => {
+  const [item, setItem] = useState("");
+
+  if (props.isLoading) return <SelectSkeleton />;
+
+  if (!(props.packagingUnits && props.packagingUnits.length > 0)) return <></>;
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <Select
+          labelText={props.title}
+          name={props.name}
+          control={props.control}
+          controllerName={props.controllerName}
+          id={props.name}
+          size={"md"}
+          onChange={(data: { selectedItem?: StockItemPackagingUOMDTO }) => {
+            props.onDispensingUnitPackagingUoMUuidChange?.(data?.selectedItem);
+            onChange(data?.selectedItem?.uuid);
+            setItem(data?.selectedItem?.uuid);
+          }}
+          ref={ref}
+          value={item}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        >
+          {!item ? (
+            <SelectItem disabled hidden value={null} text={props.placeholder} />
+          ) : (
+            ""
+          )}
+          {props.packagingUnits?.map((uom, index) => {
+            return (
+              <SelectItem
+                key={`${index}-${uom.uuid}`}
+                value={uom.uuid}
+                text={uom.packagingUomName}
+              >
+                {uom?.packagingUomName}
+              </SelectItem>
+            );
+          })}
+        </Select>
+      )}
+    />
+  );
+};
+
+export default DispensingPackageMeasurement;

package/src/stock-items/add-stock-item/dispensing-unit-selector/dispensing-unit-selector.component.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from "react";
+import { ComboBox, TextInputSkeleton } from "@carbon/react";
+import { useConceptById } from "../../../stock-lookups/stock-lookups.resource";
+import { DISPENSING_UNITS_CONCEPT_ID } from "../../../constants";
+import { Concept } from "../../../core/api/types/concept/Concept";
+import { Control, Controller, FieldValues } from "react-hook-form";
+
+interface DispensingUnitSelectorProps<T> {
+  dispensingUnitUuid?: string;
+  onDispensingUnitChange?: (unit: Concept) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const DispensingUnitSelector = <T,>(props: DispensingUnitSelectorProps<T>) => {
+  const {
+    items: { setMembers: dispensingUnits },
+    isLoading,
+  } = useConceptById(DISPENSING_UNITS_CONCEPT_ID);
+
+  if (isLoading) return <TextInputSkeleton />;
+
+  return (
+    <Controller
+      name={props.controllerName}
+      control={props.control}
+      render={({ field: { onChange, value, ref } }) => (
+        <ComboBox
+          titleText={props.title}
+          name={props.name}
+          control={props.control}
+          controllerName={props.controllerName}
+          id={props.name}
+          size={"md"}
+          items={dispensingUnits || []}
+          onChange={(data: { selectedItem: Concept }) => {
+            props.onDispensingUnitChange?.(data.selectedItem);
+            onChange(data.selectedItem.uuid);
+          }}
+          initialSelectedItem={
+            dispensingUnits?.find((p) => p.uuid === props.dispensingUnitUuid) ||
+            {}
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.display ? `${item?.display}` : ""
+          }
+          shouldFilterItem={() => true}
+          value={dispensingUnits?.find((p) => p.uuid === value)?.display ?? ""}
+          placeholder={props.placeholder}
+          ref={ref}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default DispensingUnitSelector;

package/src/stock-items/add-stock-item/dispensing-unit-selector/dispensing-unit-selector.test.tsx

@@ -0,0 +1,8 @@
+import { cleanup } from "@testing-library/react";
+
+describe("Test the dispensing unit selector", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    // render(<DispensingUnitSelector />);
+  });
+});

package/src/stock-items/add-stock-item/drug-selector/drug-selector.component.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode, useMemo, useState } from "react";
+import { ComboBox, InlineLoading } from "@carbon/react";
+import { Drug } from "../../../core/api/types/concept/Drug";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { useDrugsHook } from "./drug-selector.resource";
+
+interface DrugSelectorProps<T> {
+  placeholder?: string;
+  drugUuid?: string;
+  onDrugChanged?: (drug: Drug) => void;
+  title?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const DrugSelector = <T,>(props: DrugSelectorProps<T>) => {
+  const { isLoading, drugList } = useDrugsHook();
+
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (value) => {
+    setInputValue(value);
+  };
+  const filteredDrugs = useMemo(() => {
+    return inputValue.trim() === ""
+      ? drugList
+      : drugList.filter((drug) =>
+          drug.name.toLowerCase().includes(inputValue.trim().toLowerCase())
+        );
+  }, [inputValue, drugList]);
+
+  return (
+    <div>
+      <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={filteredDrugs || []}
+            initialSelectedItem={
+              drugList?.find((p) => p.uuid === props.drugUuid) ?? ""
+            }
+            itemToString={drugName}
+            onChange={(data: { selectedItem: Drug }) => {
+              props.onDrugChanged?.(data.selectedItem);
+              onChange(data.selectedItem.uuid);
+            }}
+            onInputChange={(event) => handleInputChange(event)}
+            inputValue={inputValue}
+            placeholder={props.placeholder}
+            invalid={props.invalid}
+            invalidText={props.invalidText}
+            ref={ref}
+          />
+        )}
+      />
+      {isLoading && (
+        <InlineLoading
+          status="active"
+          iconDescription="Searching"
+          description="Searching..."
+        />
+      )}
+    </div>
+  );
+};
+function drugName(item: Drug): string {
+  return item
+    ? `${item.name}${item.concept ? ` (${item.concept.display})` : ""}`
+    : "";
+}
+
+export default DrugSelector;

package/src/stock-items/add-stock-item/drug-selector/drug-selector.resource.tsx

@@ -0,0 +1,50 @@
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useEffect, useState } from "react";
+import {
+  ConceptFilterCriteria,
+  useDrugs,
+} from "../../../stock-lookups/stock-lookups.resource";
+import { debounce } from "../../../core/utils/debounce";
+
+export function useDrugsHook(filter?: ConceptFilterCriteria) {
+  const [conceptFilter, setConceptFilter] = useState<ConceptFilterCriteria>(
+    filter || {
+      v: ResourceRepresentation.Default,
+      startIndex: 0,
+    }
+  );
+
+  const {
+    items: { results: drugList },
+    isLoading,
+  } = useDrugs(conceptFilter);
+
+  const [searchString, setSearchString] = useState("");
+
+  // Drug filter type
+  const [limit, setLimit] = useState(filter?.limit || 10);
+  const [representation, setRepresentation] = useState(
+    filter?.v || ResourceRepresentation.Default
+  );
+
+  useEffect(() => {
+    debounce(
+      () =>
+        setConceptFilter({
+          startIndex: 0,
+          v: representation,
+          limit: limit,
+          q: searchString,
+        }),
+      500
+    );
+  }, [searchString, limit, representation]);
+
+  return {
+    drugList,
+    setLimit,
+    setRepresentation,
+    setSearchString,
+    isLoading,
+  };
+}