@openmrs/esm-stock-management-app 3.0.1-pre.818 → 3.0.1-pre.827

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

@@ -1,8 +1,7 @@
 import { Button } from '@carbon/react';
+import { launchWorkspace } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../../../core/components/overlay/hook';
-import StockRulesAddOrUpdate from './add-stock-rules.component';
 
 interface AddStockRuleActionButtonProps {
   stockItemUuid: string;
@@ -12,8 +11,11 @@ const AddStockRuleActionButton: React.FC<AddStockRuleActionButtonProps> = ({ sto
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchOverlay('Add Stock Rule', <StockRulesAddOrUpdate stockItemUuid={stockItemUuid} />);
-  }, [stockItemUuid]);
+    launchWorkspace('stock-item-rules-form-workspace', {
+      workspaceTitle: t('addStockRule', 'Add Stock Rule'),
+      stockItemUuid,
+    });
+  }, [stockItemUuid, t]);
 
   return (
     <Button onClick={handleClick} size="md" kind="primary">

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

@@ -1,33 +1,30 @@
 import {
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
   Button,
+  ButtonSet,
+  Checkbox,
+  CheckboxGroup,
   Form,
+  FormGroup,
   Select,
-  TextInput,
   SelectItem,
-  FormGroup,
-  Checkbox,
-  CheckboxGroup,
+  TextInput,
 } from '@carbon/react';
-import React, { type ChangeEvent, useCallback, useState, useEffect } from 'react';
-import styles from './add-stock-rules.scss';
-import { useRoles, useStockTagLocations } from '../../../stock-lookups/stock-lookups.resource';
-import { createOrUpdateStockRule } from './stock-rules.resource';
-import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
-import { showSnackbar } from '@openmrs/esm-framework';
+import { type DefaultWorkspaceProps, showSnackbar } from '@openmrs/esm-framework';
+import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { closeOverlay } from '../../../core/components/overlay/hook';
 import { ResourceRepresentation } from '../../../core/api/api';
+import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
+import { useRoles, useStockTagLocations } from '../../../stock-lookups/stock-lookups.resource';
 import { type StockItemInventoryFilter, useStockItemPackagingUOMs } from '../../stock-items.resource';
+import styles from './add-stock-rules.scss';
+import { createOrUpdateStockRule } from './stock-rules.resource';
 
-interface AddStockRuleProps {
+interface AddStockRuleProps extends Partial<DefaultWorkspaceProps> {
   model?: StockRule;
   stockItemUuid?: string;
 }
 
-const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUuid }) => {
+const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUuid, closeWorkspace }) => {
   const { t } = useTranslation();
 
   const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({
@@ -99,7 +96,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
     const selectedQuantityUnit = dispensingUnits?.results.find((x) => x.uuid === evt.target.value);
     setFormModel({
       ...formModel,
-      stockItemPackagingUOMUuid: selectedQuantityUnit.uuid,
+      stockItemPackagingUOMUuid: selectedQuantityUnit?.uuid,
     });
   };
 
@@ -142,7 +139,7 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
               kind: 'success',
               subtitle: t('stockRuleAddedSuccessfully', 'Stock Rule Added Successfully'),
             });
-            closeOverlay();
+            closeWorkspace?.();
           },
           (error) => {
             showSnackbar({
@@ -155,179 +152,178 @@ const StockRulesAddOrUpdate: React.FC<AddStockRuleProps> = ({ model, stockItemUu
         )
         .catch();
     },
-    [formModel, model, t, stockItemUuid],
+    [formModel, model, t, stockItemUuid, closeWorkspace],
   );
 
   return (
-    <div>
-      <Form onSubmit={onFormSubmit}>
-        <ModalHeader />
-        <ModalBody>
-          <FormGroup>
-            <section className={styles.section}>
-              <section className={styles.section}>
-                <Select
-                  name="location"
-                  className="select-field"
-                  labelText={t('location', 'Location')}
-                  id="location"
-                  value={formModel?.locationUuid ? formModel.locationUuid : ''}
-                  onChange={onLocationChange}
-                >
-                  <SelectItem disabled hidden value="" text={t('chooseLocation', 'Choose the location')} />
-                  {stockLocations?.map((location) => {
-                    return <SelectItem key={location.id} value={location.id} text={location.name} />;
-                  })}
-                </Select>
-              </section>
-
-              <section className={styles.section}>
-                <TextInput
-                  id="name"
-                  type="text"
-                  labelText={t('name', 'Rule Name')}
-                  size="md"
-                  onChange={onNameChanged}
-                  value={model?.name}
-                  placeholder="e.g Panado Alert"
-                />
-              </section>
-
-              <section className={styles.section}>
-                <Select
-                  name="quantityUnit"
-                  className="select-field"
-                  labelText={t('quantityUnit', 'Quantity Unit')}
-                  id="quantityUnit"
-                  value={formModel?.stockItemPackagingUOMUuid ? formModel.stockItemPackagingUOMUuid : ''}
-                  onChange={onQuantityUnitChange}
-                >
-                  <SelectItem disabled hidden value="" text={t('chooseQuantityUnit', 'Choose the Unit of Quantity')} />
-                  {dispensingUnits?.results.map((stockItemPackagingUOMUuid) => {
-                    return (
-                      <SelectItem
-                        key={stockItemPackagingUOMUuid.uuid}
-                        value={stockItemPackagingUOMUuid.uuid}
-                        text={stockItemPackagingUOMUuid.packagingUomName}
-                      />
-                    );
-                  })}
-                </Select>
-              </section>
-
-              <section className={styles.section}>
-                <TextInput
-                  id="quantity"
-                  type="number"
-                  labelText={t('quantity', 'Quantity Threshold')}
-                  size="md"
-                  onChange={onQuantityChanged}
-                  value={model?.quantity}
-                  placeholder="e.g 30 Boxes"
-                />
-              </section>
-            </section>
-          </FormGroup>
-
-          <FormGroup>
+    <Form onSubmit={onFormSubmit} className={styles.formContainer}>
+      <div>
+        <FormGroup>
+          <section className={styles.section}>
             <section className={styles.section}>
               <Select
-                name="alertRole"
+                name="location"
                 className="select-field"
-                labelText={t('alertRole', 'Alert Role')}
-                id="alertRole"
-                value={formModel?.alertRole ? formModel.alertRole : ''}
-                onChange={onAlertRoleChange}
+                labelText={t('location', 'Location')}
+                id="location"
+                value={formModel?.locationUuid ? formModel.locationUuid : ''}
+                onChange={onLocationChange}
               >
-                <SelectItem disabled hidden value="" text={t('chooseAlertRole', 'Choose an Alert Role')} />
-                {rolesData?.results?.map((alertRole) => {
-                  return <SelectItem key={alertRole.display} value={alertRole.display} text={alertRole.display} />;
+                <SelectItem disabled hidden value="" text={t('chooseLocation', 'Choose the location')} />
+                {stockLocations?.map((location) => {
+                  return <SelectItem key={location.id} value={location.id} text={location.name} />;
                 })}
               </Select>
             </section>
+
+            <section className={styles.section}>
+              <TextInput
+                id="name"
+                type="text"
+                labelText={t('name', 'Rule Name')}
+                size="md"
+                onChange={onNameChanged}
+                value={model?.name}
+                placeholder="e.g Panado Alert"
+              />
+            </section>
+
             <section className={styles.section}>
               <Select
-                name="mailRole"
+                name="quantityUnit"
                 className="select-field"
-                labelText={t('mailRole', 'Mail Role')}
-                id="mailRole"
-                value={formModel?.mailRole ? formModel.mailRole : ''}
-                onChange={onMailRoleChange}
+                labelText={t('quantityUnit', 'Quantity Unit')}
+                id="quantityUnit"
+                value={formModel?.stockItemPackagingUOMUuid ? formModel.stockItemPackagingUOMUuid : ''}
+                onChange={onQuantityUnitChange}
               >
-                <SelectItem disabled hidden value="" text={t('chooseMailRole', 'Choose a Mail Role')} />
-                {rolesData?.results?.map((mailRole) => {
-                  return <SelectItem key={mailRole.display} value={mailRole.display} text={mailRole.display} />;
+                <SelectItem disabled hidden value="" text={t('chooseQuantityUnit', 'Choose the Unit of Quantity')} />
+                {dispensingUnits?.results?.map((stockItemPackagingUOMUuid) => {
+                  return (
+                    <SelectItem
+                      key={stockItemPackagingUOMUuid.uuid}
+                      value={stockItemPackagingUOMUuid.uuid}
+                      text={stockItemPackagingUOMUuid.packagingUomName}
+                    />
+                  );
                 })}
               </Select>
             </section>
+
             <section className={styles.section}>
               <TextInput
-                id="evaluationFrequency"
+                id="quantity"
                 type="number"
-                labelText={t('evaluationFrequency', 'Frequency Check (Minutes)')}
+                labelText={t('quantity', 'Quantity Threshold')}
                 size="md"
-                onChange={onEvaluationFrequencyChanged}
-                value={model?.evaluationFrequency}
-                placeholder="e.g 30 Minutes"
-              />
-              <TextInput
-                id="actionFrequency"
-                type="number"
-                labelText={t('actionFrequency', 'Notification Frequency (Minutes)')}
-                size="md"
-                onChange={onActionFrequencyChanged}
-                value={model?.actionFrequency}
-                placeholder="e.g 3600 Minutes"
+                onChange={onQuantityChanged}
+                value={model?.quantity}
+                placeholder="e.g 30 Boxes"
               />
             </section>
-          </FormGroup>
+          </section>
+        </FormGroup>
 
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              justifyContent: 'center',
-            }}
-          >
-            <FormGroup className="clear-margin-bottom">
-              <CheckboxGroup className={styles.checkboxGrid}>
-                <Checkbox
-                  onChange={onEnabledChanged}
-                  checked={formModel?.enabled}
-                  labelText={`Enabled ?`}
-                  value={model?.enabled}
-                  id="chk-ruleEnabled"
-                />
-              </CheckboxGroup>
-            </FormGroup>
-            <FormGroup className="clear-margin-bottom">
-              <CheckboxGroup className={styles.checkboxGrid}>
-                <Checkbox
-                  onChange={onAppliesToChildrenChanged}
-                  name="appliesToChildren"
-                  checked={formModel?.enableDescendants}
-                  value={model?.enableDescendants}
-                  labelText={`Applies to child locations?`}
-                  id="chk-ruleAppliesToChildren"
-                />
-              </CheckboxGroup>
-            </FormGroup>
-          </div>
+        <FormGroup>
+          <section className={styles.section}>
+            <Select
+              name="alertRole"
+              className="select-field"
+              labelText={t('alertRole', 'Alert Role')}
+              id="alertRole"
+              value={formModel?.alertRole ? formModel.alertRole : ''}
+              onChange={onAlertRoleChange}
+            >
+              <SelectItem disabled hidden value="" text={t('chooseAlertRole', 'Choose an Alert Role')} />
+              {rolesData?.results?.map((alertRole) => {
+                return <SelectItem key={alertRole.display} value={alertRole.display} text={alertRole.display} />;
+              })}
+            </Select>
+          </section>
+          <section className={styles.section}>
+            <Select
+              name="mailRole"
+              className="select-field"
+              labelText={t('mailRole', 'Mail Role')}
+              id="mailRole"
+              value={formModel?.mailRole ? formModel.mailRole : ''}
+              onChange={onMailRoleChange}
+            >
+              <SelectItem disabled hidden value="" text={t('chooseMailRole', 'Choose a Mail Role')} />
+              {rolesData?.results?.map((mailRole) => {
+                return <SelectItem key={mailRole.display} value={mailRole.display} text={mailRole.display} />;
+              })}
+            </Select>
+          </section>
+          <section className={styles.section}>
+            <TextInput
+              id="evaluationFrequency"
+              type="number"
+              labelText={t('evaluationFrequency', 'Frequency Check (Minutes)')}
+              size="md"
+              onChange={onEvaluationFrequencyChanged}
+              value={model?.evaluationFrequency}
+              placeholder="e.g 30 Minutes"
+            />
+            <TextInput
+              id="actionFrequency"
+              type="number"
+              labelText={t('actionFrequency', 'Notification Frequency (Minutes)')}
+              size="md"
+              onChange={onActionFrequencyChanged}
+              value={model?.actionFrequency}
+              placeholder="e.g 3600 Minutes"
+            />
+          </section>
+        </FormGroup>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            justifyContent: 'center',
+          }}
+        >
+          <FormGroup className="clear-margin-bottom">
+            <CheckboxGroup className={styles.checkboxGrid}>
+              <Checkbox
+                onChange={onEnabledChanged}
+                checked={formModel?.enabled}
+                labelText={`Enabled ?`}
+                value={model?.enabled}
+                id="chk-ruleEnabled"
+              />
+            </CheckboxGroup>
+          </FormGroup>
+          <FormGroup className="clear-margin-bottom">
+            <CheckboxGroup className={styles.checkboxGrid}>
+              <Checkbox
+                onChange={onAppliesToChildrenChanged}
+                name="appliesToChildren"
+                checked={formModel?.enableDescendants}
+                value={model?.enableDescendants}
+                labelText={`Applies to child locations?`}
+                id="chk-ruleAppliesToChildren"
+              />
+            </CheckboxGroup>
+          </FormGroup>
+        </div>
 
-          <div>
-            This stock rule will be evaluated by checking if the stock quantities have lowered to the threshold or below
-            and a notification will be sent to the personnel with the specified role in the given location. The
-            notification will only be sent once per specified notification frequency.
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary" onClick={closeOverlay}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button type="submit">{t('save', 'Save')}</Button>
-        </ModalFooter>
-      </Form>
-    </div>
+        <div>
+          This stock rule will be evaluated by checking if the stock quantities have lowered to the threshold or below
+          and a notification will be sent to the personnel with the specified role in the given location. The
+          notification will only be sent once per specified notification frequency.
+        </div>
+      </div>
+      <ButtonSet className={styles.buttonSet}>
+        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" className={styles.button}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
   );
 };
 

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

@@ -1,17 +1,25 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
 
-.section {
-  margin: spacing.$spacing-03;
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: layout.$spacing-03;
 }
 
-.sectionTitle {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
 }
 
-.modalBody {
-  padding-bottom: spacing.$spacing-05;
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }

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

@@ -1,10 +1,9 @@
-import React, { useCallback } from 'react';
 import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
+import React, { useCallback } from 'react';
 
+import { launchWorkspace } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../../../core/components/overlay/hook';
-import StockRulesAddOrUpdate from './add-stock-rules.component';
 import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
 
 interface EditStockRulesActionMenuProps {
@@ -15,8 +14,12 @@ interface EditStockRulesActionMenuProps {
 const EditStockRuleActionsMenu: React.FC<EditStockRulesActionMenuProps> = ({ data, stockItemUuid }) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
-    launchOverlay('Edit Stock Rule', <StockRulesAddOrUpdate model={data} stockItemUuid={data.stockItemUuid} />);
-  }, [data]);
+    launchWorkspace('stock-item-rules-form-workspace', {
+      workspaceTitle: t('editStockRule', 'Edit Stock Rule'),
+      stockItemUuid,
+      model: data,
+    });
+  }, [data, t, stockItemUuid]);
 
   return (
     <Button

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Button, Stack, ComboButton, MenuItem } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { useStockItem } from '../../../stock-items.resource';
+import { useStockItem, useStockItemInventory } from '../../../stock-items.resource';
 import { showModal, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../../../config-schema';
 import styles from './printable-transaction.scss';
@@ -13,9 +13,10 @@ type Props = {
   itemUuid: string;
   columns: any;
   data: any;
+  filter?: StockItemInventoryFilter;
 };
 
-const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid }) => {
+const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid, filter }) => {
   const { t } = useTranslation();
 
   const { enablePrintButton } = useConfig<ConfigObject>();
@@ -27,8 +28,66 @@ const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid }) =
     isPatientTransaction: 'true',
   });
 
+  const [stockItemFilter, setStockItemFilter] = useState<StockItemInventoryFilter>({
+    startIndex: 0,
+    v: filter?.v || ResourceRepresentation.Default,
+    limit: 10,
+    q: filter?.q,
+    totalCount: true,
+  });
+
   const { item: stockItem, isLoading: isStockItemLoading } = useStockItem(itemUuid);
   const { items: stockCardData, isLoading: isStockCardLoading, error } = useStockItemTransactions(stockCardItemFilter);
+  const { items: inventoryBalance } = useStockItemInventory(stockItemFilter);
+
+  const [balances, setBalances] = useState<Record<string, { quantity: number; itemName: string }>>({});
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (stockCardData?.results?.length) {
+      setCurrentIndex(0);
+      setBalances({});
+    }
+  }, [stockCardData?.results]);
+
+  useEffect(() => {
+    const currentItem = stockCardData?.results?.[currentIndex];
+    if (currentItem?.stockItemUuid) {
+      setStockItemFilter((prev) => ({
+        ...prev,
+        stockItemUuid: currentItem.stockItemUuid,
+      }));
+    }
+  }, [currentIndex, stockCardData]);
+
+  useEffect(() => {
+    const currentItem = stockCardData?.results?.[currentIndex];
+    const stockItemUuid = currentItem?.stockItemUuid;
+
+    if (inventoryBalance?.total && stockItemUuid) {
+      setBalances((prev) => ({
+        ...prev,
+        [stockItemUuid]: {
+          quantity: Number(inventoryBalance.total),
+          itemName: currentItem.packagingUomName ?? '',
+        },
+      }));
+
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }, [inventoryBalance, currentIndex, stockCardData]);
+
+  const stockCardWithBalance = useMemo(() => {
+    return (
+      stockCardData?.results?.map((transaction) => {
+        const balance = balances[transaction.stockItemUuid];
+        return {
+          ...transaction,
+          balance: `${balance?.quantity ?? ''} ${balance?.itemName ?? ''}`,
+        };
+      }) ?? []
+    );
+  }, [stockCardData?.results, balances]);
 
   const stockCardHeaders = useMemo(
     () => [
@@ -56,6 +115,10 @@ const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid }) =
         key: 'transaction',
         header: 'Transaction',
       },
+      {
+        key: 'balance',
+        header: 'Balance',
+      },
       {
         key: 'totalout',
         header: 'OUT',
@@ -82,7 +145,7 @@ const TransactionsPrintAction: React.FC<Props> = ({ columns, data, itemUuid }) =
       onClose: () => dispose(),
       title: stockItem.drugName || stockItem.conceptName || '',
       columns: stockCardHeaders,
-      data: stockCardData.results,
+      data: stockCardWithBalance,
     });
   };