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

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

@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo } from "react";
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useStockItemsTransactions } from "./transactions.resource";
+import { DataTableSkeleton, Link, Tile } from "@carbon/react";
+import { formatDisplayDate } from "../../../core/utils/datetimeUtils";
+import { ArrowLeft } from "@carbon/react/icons";
+import DataList from "../../../core/components/table/table.component";
+import styles from "../../stock-items-table.scss";
+import { URL_STOCK_OPERATION } from "../../../constants";
+import { StockOperationType } from "../../../core/api/types/stockOperation/StockOperationType";
+import EditStockOperationActionMenu from "../../../stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component";
+
+interface TransactionsProps {
+  onSubmit?: () => void;
+  stockItemUuid: string;
+}
+
+const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
+  const {
+    isLoading,
+    items,
+    tableHeaders,
+
+    totalCount,
+    setCurrentPage,
+    setStockItemUuid,
+  } = useStockItemsTransactions(ResourceRepresentation.Default);
+
+  useEffect(() => {
+    setStockItemUuid(stockItemUuid);
+  }, [stockItemUuid, setStockItemUuid]);
+
+  let operations: StockOperationType[] | null | undefined;
+  const tableRows = useMemo(() => {
+    return items?.map((stockItemTransaction) => ({
+      ...stockItemTransaction,
+      id: stockItemTransaction?.uuid,
+      key: `key-${stockItemTransaction?.uuid}`,
+      uuid: `${stockItemTransaction?.uuid}`,
+      date: formatDisplayDate(stockItemTransaction?.dateCreated),
+      location:
+        stockItemTransaction.operationSourcePartyName &&
+        stockItemTransaction.operationDestinationPartyName ? (
+          stockItemTransaction.operationSourcePartyName ===
+          stockItemTransaction?.partyName ? (
+            stockItemTransaction.quantity > 0 ? (
+              <>
+                <span className="transaction-location">
+                  {stockItemTransaction.operationSourcePartyName}
+                </span>
+                <ArrowLeft size={16} />{" "}
+                {stockItemTransaction.operationDestinationPartyName}
+              </>
+            ) : (
+              <>
+                <span className="transaction-location">
+                  {stockItemTransaction.operationSourcePartyName}
+                </span>
+                <ArrowLeft size={16} />{" "}
+                {stockItemTransaction.operationDestinationPartyName}
+              </>
+            )
+          ) : stockItemTransaction.operationDestinationPartyName ===
+            stockItemTransaction?.partyName ? (
+            stockItemTransaction.quantity > 0 ? (
+              <>
+                <span className="transaction-location">
+                  {stockItemTransaction.operationDestinationPartyName}
+                </span>
+                <ArrowLeft size={16} />{" "}
+                {stockItemTransaction.operationSourcePartyName}
+              </>
+            ) : (
+              <>
+                <span className="transaction-location">
+                  {stockItemTransaction.operationDestinationPartyName}
+                </span>
+                <ArrowLeft size={16} />{" "}
+                {stockItemTransaction.operationSourcePartyName}
+              </>
+            )
+          ) : (
+            stockItemTransaction?.partyName
+          )
+        ) : (
+          stockItemTransaction?.partyName
+        ),
+      transaction: stockItemTransaction?.isPatientTransaction
+        ? "Patient Dispense"
+        : stockItemTransaction.stockOperationTypeName,
+      quantity: `${stockItemTransaction?.quantity?.toLocaleString()} ${
+        stockItemTransaction?.packagingUomName ?? ""
+      }`,
+      batch: stockItemTransaction.stockBatchNo
+        ? `${stockItemTransaction.stockBatchNo}${
+            stockItemTransaction.expiration
+              ? ` (${formatDisplayDate(stockItemTransaction.expiration)})`
+              : ""
+          }`
+        : "",
+      reference: stockItemTransaction?.stockOperationUuid ? (
+        <EditStockOperationActionMenu
+          operationUuid={stockItemTransaction?.stockOperationUuid}
+          operationNumber={stockItemTransaction?.stockOperationNumber}
+          operations={operations}
+        />
+      ) : (
+        <></>
+      ),
+      status: stockItemTransaction?.stockOperationStatus ?? "",
+      in:
+        stockItemTransaction?.quantity >= 0
+          ? `${stockItemTransaction?.quantity?.toLocaleString()} ${
+              stockItemTransaction?.packagingUomName ?? ""
+            }`
+          : "",
+      out:
+        stockItemTransaction?.quantity < 0
+          ? `${(-1 * stockItemTransaction?.quantity)?.toLocaleString()} ${
+              stockItemTransaction?.packagingUomName ?? ""
+            }`
+          : "",
+    }));
+  }, [items, operations]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (items?.length != undefined) {
+    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}>No transactions to display</p>
+      </Tile>
+    </div>
+  );
+};
+
+export default Transactions;

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

@@ -0,0 +1,109 @@
+import { ResourceRepresentation } from "../../../core/api/api";
+import { useEffect, useMemo, useState } from "react";
+import {
+  StockItemInventoryFilter,
+  useStockItemTransactions,
+} from "../../stock-items.resource";
+
+export function useStockItemsTransactions(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 } =
+    useStockItemTransactions(stockItemFilter);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        key: "date",
+        header: "Date",
+      },
+      {
+        key: "location",
+        header: "Location",
+      },
+      {
+        key: "transaction",
+        header: "Transaction",
+      },
+      {
+        key: "in",
+        header: "IN",
+      },
+      {
+        key: "out",
+        header: "OUT",
+      },
+      {
+        key: "batch",
+        header: "Batch",
+      },
+      {
+        key: "reference",
+        header: "Reference",
+      },
+      {
+        key: "status",
+        header: "Status",
+      },
+    ],
+    []
+  );
+
+  return {
+    items: items.results,
+    totalCount: items.totalCount,
+    currentPage,
+    currentPageSize,
+    setCurrentPage,
+    setPageSize,
+    pageSizes,
+    isLoading,
+    isError,
+    setSearchString,
+    tableHeaders,
+    setStockItemUuid,
+    setLocationUuid,
+    setPartyUuid,
+    setStockBatchUuid,
+  };
+}

package/src/stock-items/components/filter-stock-items/filter-stock-items.component.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { RadioButton, RadioButtonGroup } from "@carbon/react";
+import styles from "./filter-stock-items.scss";
+
+interface FilterStockItemsProps {
+  filterType: string;
+  changeFilterType: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const FilterStockItems: React.FC<FilterStockItemsProps> = ({
+  filterType,
+  changeFilterType,
+}) => {
+  return (
+    <RadioButtonGroup
+      name="is-drug"
+      defaultSelected={filterType}
+      onChange={changeFilterType}
+      className={styles.spacing}
+    >
+      <RadioButton labelText="All" value="" id="is-drug-all" />
+      <RadioButton labelText="Drugs" value="true" id="is-drug-drug" />
+      <RadioButton labelText="Other" value="false" id="is-drug-other" />
+    </RadioButtonGroup>
+  );
+};
+
+export default FilterStockItems;

package/src/stock-items/components/filter-stock-items/filter-stock-items.scss

@@ -0,0 +1,3 @@
+.spacing{
+    margin: 0 16px
+  }

package/src/stock-items/edit-stock-item/edit-stock-item-action-menu.component.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { StockItemDTO } from "../../core/api/types/stockItem/StockItem";
+import { launchAddOrEditDialog } from "../stock-item.utils";
+
+interface EditStockItemActionsMenuProps {
+  data: StockItemDTO;
+}
+
+const EditStockItemActionsMenu: React.FC<EditStockItemActionsMenuProps> = ({
+  data,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Button
+      kind="ghost"
+      size="md"
+      onClick={() => {
+        data.isDrug = !!data.drugUuid;
+        launchAddOrEditDialog(data, true);
+      }}
+      iconDescription={t("editStockItem", "Edit Stock Item")}
+    >
+      {`${data?.drugName ?? data.conceptName}`}
+    </Button>
+  );
+};
+export default EditStockItemActionsMenu;

package/src/stock-items/stock-item.utils.tsx

@@ -0,0 +1,62 @@
+import { closeOverlay, launchOverlay } from "../core/components/overlay/hook";
+import { StockItemDTO } from "../core/api/types/stockItem/StockItem";
+import React from "react";
+import AddEditStockItem from "./add-stock-item/add-stock-item.component";
+import {
+  FetchResponse,
+  showNotification,
+  showToast,
+} from "@openmrs/esm-framework";
+import { createStockItem, updateStockItem } from "./stock-items.resource";
+
+export const addOrEditStockItem = async (
+  stockItem: StockItemDTO,
+  isEditing = false
+) => {
+  try {
+    const response: FetchResponse<StockItemDTO> = await (isEditing
+      ? updateStockItem
+      : createStockItem)(stockItem);
+
+    if (response?.data) {
+      showToast({
+        critical: true,
+        title: `${isEditing ? "Edit" : "Add"} Stock Item`,
+        kind: "success",
+        description: `Stock Item ${
+          isEditing ? "Edited" : "Added"
+        } Successfully`,
+      });
+
+      if (!isEditing) {
+        closeOverlay();
+
+        // launch edit dialog
+        const item = response.data;
+        item.isDrug = !!item.drugUuid;
+        launchAddOrEditDialog(item, true);
+      }
+    }
+  } catch (error) {
+    showNotification({
+      title: `Error ${isEditing ? "edit" : "add"}ing a stock item`,
+      kind: "error",
+      critical: true,
+      description: error?.responseBody?.error?.message,
+    });
+  }
+};
+
+export const launchAddOrEditDialog = (
+  stockItem: StockItemDTO,
+  isEditing = false
+) => {
+  launchOverlay(
+    `${isEditing ? "Edit" : "Add"} ${stockItem?.drugName || ""}`,
+    <AddEditStockItem
+      model={stockItem}
+      onSave={(stockItem) => addOrEditStockItem(stockItem, isEditing)}
+      isEditing={isEditing}
+    />
+  );
+};

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

@@ -0,0 +1,266 @@
+import {
+  Button,
+  TabPanel,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBatchActions,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+  Tooltip,
+} from "@carbon/react";
+import { Edit } from "@carbon/react/icons";
+import { isDesktop } from "@openmrs/esm-framework";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ResourceRepresentation } from "../core/api/api";
+import AddStockItemActionButton from "./add-stock-item/add-stock-action-button.component";
+import FilterStockItems from "./components/filter-stock-items/filter-stock-items.component";
+import { launchAddOrEditDialog } from "./stock-item.utils";
+import { useStockItemsPages } from "./stock-items-table.resource";
+import styles from "./stock-items-table.scss";
+import AddStockItemsBulktImportActionButton from "./add-bulk-stock-item/add-stock-items-bulk-import-action-button.component";
+import EditStockItemActionsMenu from "./edit-stock-item/edit-stock-item-action-menu.component";
+
+interface StockItemsTableProps {
+  from?: string;
+}
+
+const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
+  const { t } = useTranslation();
+
+  const {
+    isLoading,
+    items,
+    totalCount,
+    currentPageSize,
+    pageSizes,
+    currentPage,
+    setCurrentPage,
+    isDrug,
+    setDrug,
+  } = useStockItemsPages(ResourceRepresentation.Full);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t("type", "Type"),
+        key: "type",
+      },
+      {
+        id: 1,
+        header: t("genericName", "Generic Name"),
+        key: "genericName",
+      },
+      {
+        id: 2,
+        header: t("commonName", "Common Name"),
+        key: "commonName",
+      },
+      {
+        id: 3,
+        header: t("tradeName", "Trade Name"),
+        key: "tradeName",
+      },
+      {
+        id: 4,
+        header: t("dispensingUnitName", "Dispensing UoM"),
+        key: "dispensingUnitName",
+      },
+      {
+        id: 5,
+        header: t("defaultStockOperationsUoMName", "Bulk Packaging"),
+        key: "defaultStockOperationsUoMName",
+      },
+      {
+        id: 6,
+        header: t("reorderLevel", "Reorder Level"),
+        key: "reorderLevel",
+      },
+      {
+        id: 7,
+        key: "actions",
+        header: "Actions",
+      },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return items?.map((stockItem, index) => ({
+      ...stockItem,
+      id: stockItem?.uuid,
+      key: `key-${stockItem?.uuid}`,
+      uuid: `${stockItem?.uuid}`,
+      type: stockItem?.drugUuid ? t("drug", "Drug") : t("other", "Other"),
+      genericName: <EditStockItemActionsMenu data={items[index]} />,
+      commonName: stockItem?.commonName,
+      tradeName: stockItem?.drugUuid ? stockItem?.conceptName : "",
+      preferredVendorName: stockItem?.preferredVendorName,
+      dispensingUoM: stockItem?.defaultStockOperationsUoMName,
+      dispensingUnitName: stockItem?.dispensingUnitName,
+      defaultStockOperationsUoMName: stockItem?.defaultStockOperationsUoMName,
+      reorderLevel:
+        stockItem?.reorderLevelUoMName && stockItem?.reorderLevel
+          ? `${stockItem?.reorderLevel?.toLocaleString()} ${
+              stockItem?.reorderLevelUoMName
+            }`
+          : "",
+      actions: (
+        <Tooltip align="bottom" label="Edit Stock Item">
+          <Button
+            kind="ghost"
+            size="md"
+            onClick={() => {
+              stockItem.isDrug = !!stockItem.drugUuid;
+              launchAddOrEditDialog(stockItem, true);
+            }}
+            iconDescription={t("editStockItem", "Edit Stock Item")}
+            renderIcon={(props) => <Edit size={16} {...props} />}
+          ></Button>
+        </Tooltip>
+      ),
+    }));
+  }, [items, t]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <>
+      <TabPanel>
+        {t(
+          "panelDescription",
+          "Drugs and other stock items managed by the system."
+        )}
+      </TabPanel>
+
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        isSortable
+        useZebraStyles
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          getBatchActionProps,
+          onInputChange,
+        }) => (
+          <TableContainer>
+            <TableToolbar
+              style={{
+                position: "static",
+                overflow: "visible",
+                backgroundColor: "color",
+              }}
+            >
+              <TableBatchActions {...getBatchActionProps()}></TableBatchActions>
+              <TableToolbarContent
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <TableToolbarSearch persistent onChange={onInputChange} />
+                <FilterStockItems
+                  filterType={isDrug}
+                  changeFilterType={setDrug}
+                />
+                <AddStockItemsBulktImportActionButton />
+                <AddStockItemActionButton />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header) =>
+                      header.key !== "details" && (
+                        <TableHeader
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
+                          className={
+                            isDesktop
+                              ? styles.desktopHeader
+                              : styles.tabletHeader
+                          }
+                          key={`${header.key}`}
+                          isSortable={header.key !== "name"}
+                        >
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      )
+                  )}
+                  <TableHeader></TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow
+                        className={
+                          isDesktop ? styles.desktopRow : styles.tabletRow
+                        }
+                        {...getRowProps({ row })}
+                        key={row.id}
+                      >
+                        {row.cells.map(
+                          (cell) =>
+                            cell?.info?.header !== "details" && (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            )
+                        )}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t("noItemsToDisplay", "No Stock Items to display")}
+                    </p>
+                    <p className={styles.helper}>
+                      {t("checkFilters", "Check the filters above")}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      ></DataTable>
+
+      <Pagination
+        page={currentPage}
+        pageSize={currentPageSize}
+        pageSizes={pageSizes}
+        totalItems={totalCount}
+        onChange={({ page }) => setCurrentPage(page)}
+        className={styles.paginationOverride}
+      />
+    </>
+  );
+};
+
+export default StockItemsTableComponent;