@openmrs/esm-stock-management-app 1.0.1-pre.420 → 1.0.1-pre.435

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

@@ -49,34 +49,21 @@ const StockQuantities: React.FC<StockQuantitiesProps> = ({ stockItemUuid }) => {
       location: row?.partyName,
       quantity: row?.quantity?.toLocaleString() ?? "",
       batch: row.batchNumber ?? "",
-      packaging: row.quantityUoM ?? "",
+      packaging: `${row.quantityUoM ?? ""} of ${row.quantityFactor ?? ""}`,
     }));
   }, [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>
+    <DataList
+      columns={tableHeaders}
+      data={tableRows}
+      totalItems={totalCount}
+      goToPage={setCurrentPage}
+      hasToolbar={false}
+    />
   );
 };
 

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

@@ -67,7 +67,10 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({
     isLoading: loadingRoles,
   } = useRoles({ v: ResourceRepresentation.Default });
 
-  const [formModel, setFormModel] = useState<StockRule>();
+  const [formModel, setFormModel] = useState<StockRule>({
+    enabled: true,
+    ...model,
+  });
 
   useEffect(() => {
     if (model != null && Object.keys(model).length != 0) {
@@ -190,7 +193,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({
         )
         .catch();
     },
-    [formModel, model, t]
+    [formModel, model, t, stockItemUuid]
   );
 
   return (

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

@@ -34,6 +34,7 @@ const StockItemUnitsEdit: React.FC<StockItemUnitsEditProps> = ({
   return (
     <>
       <DispensingPackageMeasurement
+        dispensingUnitPackagingUoMUuid={stockItem?.purchasePriceUoMUuid}
         name="dispensingUnitPackagingUoMUuid"
         controllerName="dispensingUnitPackagingUoMUuid"
         control={control}
@@ -51,6 +52,7 @@ const StockItemUnitsEdit: React.FC<StockItemUnitsEditProps> = ({
         }
       />
       <DispensingPackageMeasurement
+        dispensingUnitPackagingUoMUuid={stockItem?.purchasePriceUoMUuid}
         name="defaultStockOperationsUoMUuid"
         controllerName="defaultStockOperationsUoMUuid"
         control={control}
@@ -84,6 +86,7 @@ const StockItemUnitsEdit: React.FC<StockItemUnitsEditProps> = ({
         />
       )}
       <DispensingPackageMeasurement
+        dispensingUnitPackagingUoMUuid={stockItem?.purchasePriceUoMUuid}
         name="reorderLevelUoMUuid"
         controllerName="reorderLevelUoMUuid"
         control={control}
@@ -113,6 +116,7 @@ const StockItemUnitsEdit: React.FC<StockItemUnitsEditProps> = ({
         />
       )}
       <DispensingPackageMeasurement
+        dispensingUnitPackagingUoMUuid={stockItem?.purchasePriceUoMUuid}
         name="purchasePriceUoMUuid"
         controllerName="purchasePriceUoMUuid"
         control={control}

package/src/stock-items/add-stock-item/transactions/transaction-filters/transaction-locations-filter.component.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from "react";
+import { ComboBox } from "@carbon/react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useStockTagLocations } from "../../../../stock-lookups/stock-lookups.resource";
+
+interface TransactionsLocationsFilterProps<T> {
+  onLocationIdChange?: (location: string) => void;
+  title?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: ReactNode;
+
+  // Control
+  controllerName: string;
+  name: string;
+  control: Control<FieldValues, T>;
+}
+
+const TransactionsLocationsFilter = <T,>(
+  props: TransactionsLocationsFilterProps<T>
+) => {
+  const { t } = useTranslation();
+  const { stockLocations } = useStockTagLocations();
+
+  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={stockLocations ?? []}
+          onChange={(data: { selectedItem }) => {
+            props.onLocationIdChange?.(data?.selectedItem?.id ?? "");
+            onChange(data?.selectedItem?.name || "");
+          }}
+          initialSelectedItem={`${stockLocations[0]?.name}`}
+          itemToString={(item) => t("location", `${item?.name}`)}
+          shouldFilterItem={() => true}
+          placeholder={props.placeholder}
+          ref={ref}
+          value={value}
+          invalid={props.invalid}
+          invalidText={props.invalidText}
+        />
+      )}
+    />
+  );
+};
+
+export default TransactionsLocationsFilter;

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

@@ -1,14 +1,26 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } 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 {
+  DataTableSkeleton,
+  Tile,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import {
+  DATE_PICKER_CONTROL_FORMAT,
+  DATE_PICKER_FORMAT,
+  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";
+import TransactionsLocationsFilter from "./transaction-filters/transaction-locations-filter.component";
+import { useForm } from "react-hook-form";
+import { StockItemInventoryFilter } from "../../stock-items.resource";
+import { useTranslation } from "react-i18next";
 
 interface TransactionsProps {
   onSubmit?: () => void;
@@ -16,20 +28,29 @@ interface TransactionsProps {
 }
 
 const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
+  const { t } = useTranslation();
+
+  const [stockItemFilter, setStockItemFilter] =
+    useState<StockItemInventoryFilter>();
   const {
     isLoading,
     items,
     tableHeaders,
-
     totalCount,
     setCurrentPage,
     setStockItemUuid,
-  } = useStockItemsTransactions(ResourceRepresentation.Default);
+    setLocationUuid,
+  } = useStockItemsTransactions(stockItemFilter);
+
+  const [selectedFromDate, setSelectedFromDate] = useState(null);
+  const [selectedToDate, setSelectedToDate] = useState(null);
 
   useEffect(() => {
     setStockItemUuid(stockItemUuid);
   }, [stockItemUuid, setStockItemUuid]);
 
+  const { control } = useForm({});
+
   let operations: StockOperationType[] | null | undefined;
   const tableRows = useMemo(() => {
     return items?.map((stockItemTransaction) => ({
@@ -112,13 +133,13 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
         stockItemTransaction?.quantity >= 0
           ? `${stockItemTransaction?.quantity?.toLocaleString()} ${
               stockItemTransaction?.packagingUomName ?? ""
-            }`
+            } of ${stockItemTransaction.packagingUomFactor}`
           : "",
       out:
         stockItemTransaction?.quantity < 0
           ? `${(-1 * stockItemTransaction?.quantity)?.toLocaleString()} ${
               stockItemTransaction?.packagingUomName ?? ""
-            }`
+            } of ${stockItemTransaction.packagingUomFactor}`
           : "",
     }));
   }, [items, operations]);
@@ -127,24 +148,43 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (items?.length != undefined) {
-    return (
-      <DataList
-        columns={tableHeaders}
-        data={tableRows}
-        totalItems={totalCount}
-        goToPage={setCurrentPage}
-        hasToolbar={false}
-      />
-    );
-  }
+  const handleDateFilterChange = ([startDate, endDate]) => {
+    if (startDate) {
+      setSelectedFromDate(startDate);
+      if (selectedToDate && startDate && selectedToDate < startDate) {
+        setSelectedToDate(startDate);
+      }
+    }
+    if (endDate) {
+      setSelectedToDate(endDate);
+      if (selectedFromDate && endDate && selectedFromDate > endDate) {
+        setSelectedFromDate(endDate);
+      }
+    }
+  };
 
   return (
-    <div className={styles.tileContainer}>
-      <Tile className={styles.tile}>
-        <p className={styles.content}>No transactions to display</p>
-      </Tile>
-    </div>
+    <DataList
+      children={() => (
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <TransactionsLocationsFilter
+            onLocationIdChange={(q) => {
+              setLocationUuid(q);
+              setStockItemFilter({ ...stockItemFilter, locationUuid: q });
+            }}
+            name={"TransactionLocationUuid"}
+            placeholder={t("filterByLocation", "Filter by Location")}
+            control={control}
+            controllerName="TransactionLocationUuid"
+          />
+        </div>
+      )}
+      columns={tableHeaders}
+      data={tableRows}
+      totalItems={totalCount}
+      goToPage={setCurrentPage}
+      hasToolbar={true}
+    />
   );
 };
 

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

@@ -5,13 +5,13 @@ import {
   useStockItemTransactions,
 } from "../../stock-items.resource";
 
-export function useStockItemsTransactions(v?: ResourceRepresentation) {
+export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
   const [stockItemFilter, setStockItemFilter] =
     useState<StockItemInventoryFilter>({
       startIndex: 0,
-      v: v || ResourceRepresentation.Default,
+      v: filter?.v || ResourceRepresentation.Default,
       limit: 10,
-      q: null,
+      q: filter?.q,
       totalCount: true,
     });
 
@@ -21,10 +21,16 @@ export function useStockItemsTransactions(v?: ResourceRepresentation) {
 
   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>();
+  const [stockItemUuid, setStockItemUuid] = useState<string | null>(
+    filter?.stockItemUuid
+  );
+  const [partyUuid, setPartyUuid] = useState<string | null>(filter?.partyUuid);
+  const [locationUuid, setLocationUuid] = useState<string | null>(
+    filter?.locationUuid
+  );
+  const [stockBatchUuid, setStockBatchUuid] = useState<string | null>(
+    filter?.stockBatchUuid
+  );
 
   useEffect(() => {
     setStockItemFilter({

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

@@ -17,9 +17,11 @@ import {
   TableToolbarSearch,
   Tile,
   Tooltip,
+  TableToolbarAction,
+  TableToolbarMenu,
 } from "@carbon/react";
 import { Edit } from "@carbon/react/icons";
-import { isDesktop } from "@openmrs/esm-framework";
+import { isDesktop, restBaseUrl } from "@openmrs/esm-framework";
 import React, { useMemo, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { ResourceRepresentation } from "../core/api/api";
@@ -31,6 +33,7 @@ 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";
 import { useDebounce } from "../core/hooks/debounce-hook";
+import { handleMutate } from "../utils";
 
 interface StockItemsTableProps {
   from?: string;
@@ -40,6 +43,10 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState("");
 
+  const handleRefresh = () => {
+    handleMutate(`${restBaseUrl}/stockmanagement/stockitem`);
+  };
+
   const {
     isLoading,
     items,
@@ -201,6 +208,11 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                   changeFilterType={setDrug}
                 />
                 <AddStockItemsBulktImportActionButton />
+                <TableToolbarMenu>
+                  <TableToolbarAction onClick={handleRefresh}>
+                    Refresh
+                  </TableToolbarAction>
+                </TableToolbarMenu>
                 <AddStockItemActionButton />
               </TableToolbarContent>
             </TableToolbar>

package/src/stock-items/stock-items-table.scss

@@ -2,89 +2,98 @@
 @use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 @import '../root.scss';
+
 .headerBtnContainer {
-    background-color: $ui-background;
-    padding: spacing.$spacing-05;
-    text-align: right;
-  }
+  background-color: $ui-background;
+  padding: spacing.$spacing-05;
+  text-align: right;
+}
 
-  .tileContainer {
-    background-color: $ui-02;
-    border-top: 1px solid $ui-03;
-    padding: 5rem 0;
-  }
-  
-  .tile {
-    margin: auto;
-    width: fit-content;
-  }
-  
-  .tileContent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .content {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-    margin-bottom: 0.5rem;
-  }
-  
-  .helper {
-    @include type.type-style('body-compact-01');
-    color: $text-02;
-  }
-  
-  .separator {
-    @include type.type-style('body-compact-02');
-    color: $text-02;
-    width: 80%;
-    margin: 1.5rem auto;
-    overflow: hidden;
-    text-align: center;
-  
-    &::before,
-    &::after {
-      background-color: $text-03;
-      content: '';
-      display: inline-block;
-      height: 1px;
-      position: relative;
-      vertical-align: middle;
-      width: 50%;
-    }
-  
-    &::before {
-      right: 0.5rem;
-      margin-left: -50%;
-    }
-  
-    &::after {
-      left: 0.5rem;
-      margin-right: -50%;
-    }
-  }
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
 
-  .toolbarContent {
-    display: flex;
-    align-items: center;
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: $text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
   }
 
-  .filterContainer{
-    display: flex;
-    align-items: center;
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
   }
-  .dateAlign{
-    padding-top: 8px;
-    height: 100%;
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
   }
-  .filtersAlign{
-    padding-bottom: 8px;
+}
+
+.toolbarContent {
+  display: flex;
+  align-items: center;
+}
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dateAlign {
+  padding-top: spacing.$spacing-03;
+  height: 100%;
+}
+
+.filtersAlign {
+  padding-bottom: spacing.$spacing-03;
 
-    :global(.cds--list-box__menu) {
-      min-width: 15rem;
-      z-index: 1;
-    }
+  :global(.cds--list-box__menu) {
+    min-width: 15rem;
+    z-index: 1;
   }
-  
+}
 
+.filterContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: spacing.$spacing-05;
+}

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

@@ -321,12 +321,6 @@ export function useStockRules(filter: StockRuleFilter) {
     Error
   >(apiUrl, openmrsFetch);
 
-  // return {
-  //   items: data.data ? data.data : [],
-  //   isLoading,
-  //   isError: error,
-  // };
-
   return {
     items: data?.data || <PageableResult<StockRule>>{},
     isLoading,

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

@@ -15,6 +15,8 @@ import { useTranslation } from "react-i18next";
 import { mutate } from "swr";
 import NewLocationForm from "./add-locations-form.component";
 import { Add } from "@carbon/react/icons";
+import { handleMutate } from "../utils";
+import { restBaseUrl } from "@openmrs/esm-framework";
 
 interface StockLocationsTableProps {
   status?: string;
@@ -30,7 +32,7 @@ const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
   });
 
   const handleRefresh = () => {
-    // search.refetch()
+    handleMutate(`${restBaseUrl}/Location?_summary=data`);
   };
 
   const createStockLocation = () => {

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

@@ -32,9 +32,8 @@ const BatchNoSelector = <T,>(props: BatchNoSelectorProps<T>) => {
       ) ?? "",
     [stockItemBatchNos, props.batchUuid]
   );
-  const { items, setStockItemUuid } = useStockItemBatchInformationHook(
-    ResourceRepresentation.Default
-  );
+
+  const { items, setStockItemUuid } = useStockItemBatchInformationHook();
 
   useEffect(() => {
     setStockItemUuid(props.stockItemUuid);

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

@@ -28,6 +28,8 @@ import {
   OverflowMenuItem,
   DatePickerInput,
   DatePicker,
+  TableToolbarMenu,
+  TableToolbarAction,
 } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
 import { formatDisplayDate } from "../core/utils/datetimeUtils";
@@ -64,6 +66,9 @@ interface StockOperationsTableProps {
 
 const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const { t } = useTranslation();
+  const handleRefresh = () => {
+    handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
+  };
   const operation: StockOperationType = useMemo(
     () => ({
       uuid: "",
@@ -434,6 +439,11 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                     onFilterChange={handleOnFilterChange}
                   />
                 </div>
+                <TableToolbarMenu>
+                  <TableToolbarAction onClick={handleRefresh}>
+                    Refresh
+                  </TableToolbarAction>
+                </TableToolbarMenu>
 
                 <StockOperationTypesSelector
                   onOperationTypeSelected={(operation) => {

package/src/stock-reports/report-list/stock-reports.component.tsx

@@ -18,8 +18,10 @@ import {
   Tile,
   Button,
   InlineLoading,
+  TableToolbarMenu,
+  TableToolbarAction,
 } from "@carbon/react";
-import { isDesktop } from "@openmrs/esm-framework";
+import { isDesktop, restBaseUrl } from "@openmrs/esm-framework";
 import NewReportActionButton from "./new-report-button.component";
 import styles from "./stock-reports.scss";
 import { useGetReports } from "../stock-reports.resource";
@@ -41,9 +43,14 @@ import {
   View,
   WarningAltFilled,
 } from "@carbon/react/icons";
+import { handleMutate } from "../../utils";
 
 const StockReports: React.FC = () => {
   const { t } = useTranslation();
+
+  const handleRefresh = () => {
+    handleMutate(`${restBaseUrl}/stockmanagement/report?v=default`);
+  };
   const {
     reports,
     isLoading,
@@ -237,6 +244,11 @@ const StockReports: React.FC = () => {
             >
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch persistent onChange={onInputChange} />
+                <TableToolbarMenu>
+                  <TableToolbarAction onClick={handleRefresh}>
+                    Refresh
+                  </TableToolbarAction>
+                </TableToolbarMenu>
                 <NewReportActionButton />
               </TableToolbarContent>
             </TableToolbar>