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

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

@@ -0,0 +1,255 @@
+import React, { useEffect, useMemo } from "react";
+import { useStockItemPackageUnitsHook } from "./packaging-units.resource";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import PackagingUnitsConceptSelector from "../packaging-units-concept-selector/packaging-units-concept-selector.component";
+import ControlledNumberInput from "../../../core/components/carbon/controlled-number-input/controlled-number-input.component";
+import { Save, TrashCan } from "@carbon/react/icons";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PackageUnitFormData, packageUnitSchema } from "./validationSchema";
+import { StockItemPackagingUOMDTO } from "../../../core/api/types/stockItem/StockItemPackagingUOM";
+import {
+  createStockItemPackagingUnit,
+  deleteStockItemPackagingUnit,
+} from "../../stock-items.resource";
+import {
+  showNotification,
+  showSnackbar,
+  showToast,
+} from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import styles from "./packaging-units.scss";
+
+interface PackagingUnitsProps {
+  isEditing?: boolean;
+  onSubmit?: () => void;
+  stockItemUuid: string;
+  handleTabChange: (index) => void;
+}
+
+const PackagingUnits: React.FC<PackagingUnitsProps> = ({
+  isEditing,
+  stockItemUuid,
+  handleTabChange,
+}) => {
+  const { items, isLoading, setStockItemUuid } = useStockItemPackageUnitsHook();
+  useEffect(() => {
+    setStockItemUuid(stockItemUuid);
+  }, [stockItemUuid, setStockItemUuid]);
+
+  const { t } = useTranslation();
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: "packaging",
+        header: t("packagingUnit", "Packaging Unit"),
+        styles: { width: "50%" },
+      },
+      {
+        key: "quantity",
+        header: t("quantity", "Quantity"),
+        styles: { width: "50%" },
+      },
+      {
+        key: "action",
+        header: t("action", "Actions"),
+        styles: { width: "50%" },
+      },
+    ],
+    []
+  );
+
+  const packageUnitForm = useForm<PackageUnitFormData>({
+    defaultValues: {},
+    mode: "all",
+    resolver: zodResolver(packageUnitSchema),
+  });
+
+  const handleSavePackageUnits = () => {
+    const { getValues } = packageUnitForm;
+    const { factor, packagingUomUuid } = getValues();
+    const payload: StockItemPackagingUOMDTO = {
+      factor: factor,
+      packagingUomUuid,
+      stockItemUuid,
+    };
+    createStockItemPackagingUnit(payload).then(
+      () =>
+        showSnackbar({
+          title: t("savePackingUnitTitle", "Package Unit"),
+          subtitle: t(
+            "savePackingUnitMessage",
+            "Package Unit saved successfully"
+          ),
+          kind: "success",
+        }),
+      () => {
+        showSnackbar({
+          title: t("savePackagingUnitErrorTitle", "Package Unit"),
+          subtitle: t(
+            "savePackagingUnitErrorMessage",
+            "Error saving package unit"
+          ),
+          kind: "error",
+        });
+      }
+    );
+    handleTabChange(0);
+  };
+
+  if (isLoading)
+    return (
+      <DataTableSkeleton
+        showHeader={false}
+        rowCount={5}
+        columnCount={5}
+        zebra
+      />
+    );
+
+  return (
+    <FormProvider {...packageUnitForm}>
+      <DataTable
+        rows={[...items, {}]}
+        headers={tableHeaders}
+        isSortable={false}
+        useZebraStyles={true}
+        render={({ headers, getHeaderProps, getTableProps }) => (
+          <TableContainer className={styles.packagingTableContainer}>
+            <Table {...getTableProps()} className={styles.packingTable}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: false,
+                      })}
+                      style={header.styles}
+                      key={header.key}
+                    >
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader style={{ width: "70%" }} />
+                </TableRow>
+              </TableHead>
+              <TableBody className={styles.packingTableBody}>
+                {items?.map((row: StockItemPackagingUOMDTO, index) => (
+                  <PackagingUnitRow row={row} key={`${index}-${row?.uuid}`} />
+                ))}
+                <PackagingUnitRow row={{}} key="bottom-row" isEditing />
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+
+      <Button
+        name="save"
+        type="submit"
+        className="submitButton"
+        onClick={handleSavePackageUnits}
+        kind="primary"
+        renderIcon={Save}
+      >
+        {t("save", "Save")}
+      </Button>
+    </FormProvider>
+  );
+};
+
+export default PackagingUnits;
+
+const PackagingUnitRow: React.FC<{
+  isEditing?: boolean;
+  row: StockItemPackagingUOMDTO;
+  key?: string;
+}> = ({ isEditing, row, key }) => {
+  const { t } = useTranslation();
+
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  const handleDelete = (e) => {
+    e.preventDefault();
+    deleteStockItemPackagingUnit(row.uuid).then(
+      () => {
+        showToast({
+          critical: true,
+          title: t("deletePackagingUnitTitle", `Delete packing item `),
+          kind: "success",
+          description: t(
+            "deletePackagingUnitMesaage",
+            `Stock Item packing unit deleted Successfully`
+          ),
+        });
+      },
+      (error) => {
+        showNotification({
+          title: t(
+            "deletePackingUnitErrorTitle",
+            `Error Deleting a stock item packing unit`
+          ),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      }
+    );
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        {isEditing ? (
+          <PackagingUnitsConceptSelector
+            row={row}
+            controllerName={"packagingUomUuid"}
+            name="packagingUomUuid"
+            control={control}
+            invalid={!!errors.packagingUomUuid}
+          />
+        ) : (
+          (!isEditing || !row.uuid.startsWith("new-item")) &&
+          row?.packagingUomName
+        )}
+      </TableCell>
+      <TableCell>
+        <div className={styles.packingTableCell}>
+          <ControlledNumberInput
+            row={row}
+            controllerName="factor"
+            name="factor"
+            control={control}
+            id={`${row.uuid}-${key}`}
+            invalid={!!errors.factor}
+          />
+
+          <Button
+            type="button"
+            size="sm"
+            className="submitButton clear-padding-margin"
+            iconDescription={"Delete"}
+            kind="ghost"
+            renderIcon={TrashCan}
+            onClick={(e) => handleDelete(e)}
+          />
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useEffect, useState } from "react";
+import {
+  StockItemInventoryFilter,
+  useStockItemPackagingUOMs,
+} from "../../stock-items.resource";
+
+export function useStockItemPackageUnitsHook(v?: ResourceRepresentation) {
+  const [stockItemFilter, setStockItemFilter] =
+    useState<StockItemInventoryFilter>({
+      startIndex: 0,
+      v: v || ResourceRepresentation.Default,
+      q: null,
+      totalCount: true,
+    });
+
+  const [stockItemUuid, setStockItemUuid] = useState<string | null>();
+
+  useEffect(() => {
+    setStockItemFilter({
+      startIndex: 0,
+      v: ResourceRepresentation.Default,
+      totalCount: true,
+      stockItemUuid: stockItemUuid,
+    });
+  }, [stockItemUuid]);
+
+  const { items, isLoading, isError } =
+    useStockItemPackagingUOMs(stockItemFilter);
+
+  return {
+    items: items.results,
+    totalCount: items.totalCount,
+    isLoading,
+    isError,
+    setStockItemUuid,
+  };
+}

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

@@ -0,0 +1,21 @@
+@use '@carbon/styles/scss/colors';
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/type";
+
+.packingTable {
+    min-height: 15rem;
+    display: block;
+}
+
+.packingTableCell {
+    display: flex;
+    align-items: center;
+}
+.packagingTableBody {
+    min-height: spacing.$spacing-13;
+
+}
+.packagingTableContainer {
+    min-height: 15rem;
+    display: block;
+}

package/src/stock-items/add-stock-item/packaging-units/validationSchema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const packageUnitSchema = z.object({
+  id: z.string().nullish(),
+  uuid: z.string().nullish(),
+  stockItemUuid: z.string().nullish(),
+  packagingUomName: z.string().nullish(),
+  packagingUomUuid: z.string().nullish(),
+  factor: z.coerce.number().nullish(),
+  isDefaultStockOperationsUoM: z.boolean().nullish(),
+  isDispensingUnit: z.boolean().nullish(),
+});
+
+export type PackageUnitFormData = z.infer<typeof packageUnitSchema>;

package/src/stock-items/add-stock-item/packaging-units-concept-selector/packaging-units-concept-selector.component.tsx

@@ -0,0 +1,95 @@
+import React, { ReactNode } from "react";
+import { Concept } from "../../../core/api/types/concept/Concept";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { useConceptById } from "../../../stock-lookups/stock-lookups.resource";
+import { PACKAGING_UNITS_CODED_CONCEPT_ID } from "../../../constants";
+import { ComboBox, TextInputSkeleton } from "@carbon/react";
+import { StockItemPackagingUOMDTO } from "../../../core/api/types/stockItem/StockItemPackagingUOM";
+
+interface PackagingUnitsConceptSelectorProps<T> {
+  row?: StockItemPackagingUOMDTO;
+  onPackageUnitChange?: (unit: Concept) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const PackagingUnitsConceptSelector = <T,>(
+  props: PackagingUnitsConceptSelectorProps<T>
+) => {
+  const {
+    items: { answers: dispensingUnits },
+    isLoading,
+  } = useConceptById(PACKAGING_UNITS_CODED_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}-${props.row.id}-${props.row.uuid}`}
+          size="md"
+          items={
+            props.row?.packagingUomUuid !== undefined
+              ? [
+                  ...(dispensingUnits.some(
+                    (x) => x.uuid === props.row?.packagingUomUuid
+                  )
+                    ? []
+                    : [
+                        {
+                          uuid: props.row?.packagingUomUuid,
+                          display: props.row?.packagingUomName,
+                        },
+                      ]),
+                  ...(dispensingUnits ?? []),
+                ]
+              : dispensingUnits || []
+          }
+          onChange={(data: { selectedItem: Concept }) => {
+            props.onPackageUnitChange?.(data?.selectedItem);
+            onChange(data?.selectedItem?.uuid || ""); // Provide a default value if needed
+          }}
+          initialSelectedItem={
+            props.row?.packagingUomUuid !== undefined
+              ? {
+                  uuid: props.row?.packagingUomUuid,
+                  display: props.row?.packagingUomName,
+                }
+              : null
+          }
+          selectedItem={
+            props.row?.packagingUomUuid !== undefined
+              ? {
+                  uuid: props.row?.packagingUomUuid,
+                  display: props.row?.packagingUomName,
+                }
+              : null
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.display ? `${item?.display}` : ""
+          }
+          shouldFilterItem={() => true}
+          placeholder={props.placeholder}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default PackagingUnitsConceptSelector;

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

@@ -0,0 +1,70 @@
+import React, { ReactNode } from "react";
+import { Concept } from "../../../core/api/types/concept/Concept";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { ComboBox, TextInputSkeleton } from "@carbon/react";
+import { useStockSources } from "../../../stock-sources/stock-sources.resource";
+import { ResourceRepresentation } from "../../../core/api/api";
+import { StockSource } from "../../../core/api/types/stockOperation/StockSource";
+
+interface PreferredVendorSelectorProps<T> {
+  preferredVendorUuid?: string;
+  onPreferredVendorChange?: (unit: StockSource) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const PreferredVendorSelector = <T,>(
+  props: PreferredVendorSelectorProps<T>
+) => {
+  const {
+    items: { results: sourcesList },
+    isLoading,
+  } = useStockSources({
+    v: ResourceRepresentation.Default,
+  });
+
+  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={sourcesList || []}
+          onChange={(data: { selectedItem: StockSource }) => {
+            props.onPreferredVendorChange?.(data.selectedItem);
+            onChange(data.selectedItem?.uuid);
+          }}
+          initialSelectedItem={
+            sourcesList?.find((p) => p.uuid === props.preferredVendorUuid) || {}
+          }
+          itemToString={(item?: Concept) =>
+            item && item?.name ? `${item?.name}` : ""
+          }
+          shouldFilterItem={() => true}
+          value={sourcesList?.find((p) => p.uuid === value)?.name ?? ""}
+          placeholder={props.placeholder}
+          ref={ref}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default PreferredVendorSelector;

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

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

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

@@ -0,0 +1,83 @@
+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 { useStockItemQuantitiesHook } from "./quantities.resource";
+
+interface StockQuantitiesProps {
+  onSubmit?: () => void;
+  stockItemUuid: string;
+}
+
+const StockQuantities: React.FC<StockQuantitiesProps> = ({ stockItemUuid }) => {
+  const { isLoading, items, totalCount, setCurrentPage, setStockItemUuid } =
+    useStockItemQuantitiesHook(ResourceRepresentation.Default);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setStockItemUuid(stockItemUuid);
+  }, [stockItemUuid, setStockItemUuid]);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: "location",
+        header: t("location", "Location"),
+      },
+      {
+        key: "quantity",
+        header: t("quantity", "Quantity"),
+      },
+      {
+        key: "packaging",
+        header: t("packagingUnit", "Packaging Unit"),
+      },
+    ],
+    []
+  );
+
+  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("quantityToDisplay", "No quantity to display")}
+        </p>
+      </Tile>
+    </div>
+  );
+};
+
+export default StockQuantities;

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

@@ -0,0 +1,69 @@
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useEffect, useState } from "react";
+import {
+  StockItemInventoryFilter,
+  useStockItemInventory,
+} from "../../stock-items.resource";
+
+export function useStockItemQuantitiesHook(v?: ResourceRepresentation) {
+  const [stockItemFilter, setStockItemFilter] =
+    useState<StockItemInventoryFilter>({
+      startIndex: 0,
+      v: v || ResourceRepresentation.Default,
+      limit: 10,
+      q: null,
+      totalCount: 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,
+    });
+  }, [
+    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,
+  };
+}