@openmrs/esm-stock-management-app 1.0.1-pre.783 → 1.0.1-pre.785

package/src/stock-operations/stock-operations-forms/steps/base-operation-details-form-step.tsx

@@ -0,0 +1,241 @@
+import { Button, Column, ComboBox, DatePicker, DatePickerInput, InlineLoading, Stack, TextArea } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import React, { ChangeEvent, FC, useEffect, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, MAIN_STORE_LOCATION_TAG } from '../../../constants';
+import { Party } from '../../../core/api/types/Party';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import { OperationType, StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { StockOperationItemDtoSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import useParties from '../hooks/useParties';
+import StockOperationReasonSelector from '../input-components/stock-operation-reason-selector.component';
+import UsersSelector from '../input-components/users-selector.component';
+import styles from '../stock-operation-form.scss';
+import { TextInput } from '@carbon/react';
+
+type BaseOperationDetailsFormStepProps = {
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+  onNext?: () => void;
+};
+
+const BaseOperationDetailsFormStep: FC<BaseOperationDetailsFormStepProps> = ({
+  stockOperation,
+  stockOperationType,
+  onNext,
+}) => {
+  const { t } = useTranslation();
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const {
+    destinationParties,
+    sourceParties,
+    isLoading: isPartiesLoading,
+    error: patiesError,
+    sourceTags,
+    destinationTags,
+  } = useParties(stockOperationType);
+  const form = useFormContext<StockOperationItemDtoSchema>();
+  const isStockIssueOperation = useMemo(
+    () => OperationType.STOCK_ISSUE_OPERATION_TYPE === stockOperationType.operationType,
+    [stockOperationType],
+  );
+  // initialize location fields
+  useEffect(() => {
+    // Prefill default locaton with current location if is a new operation
+    if (!stockOperation) {
+      if (stockOperationType?.hasSource) {
+        const shouldLockSource = sourceTags.length === 1 && sourceTags[0] === MAIN_STORE_LOCATION_TAG;
+        if (shouldLockSource && sourceParties?.length) {
+          const party = sourceParties[0];
+          form.setValue('sourceUuid', party.uuid);
+        }
+      }
+
+      if (stockOperationType?.hasDestination) {
+        const shouldLockDestination = destinationTags.length === 1 && destinationTags[0] === MAIN_STORE_LOCATION_TAG;
+        if (shouldLockDestination && destinationParties?.length) {
+          const party = destinationParties[0];
+          form.setValue('destinationUuid', party.uuid);
+        }
+      }
+    }
+  }, [sourceParties, destinationParties, stockOperation, stockOperationType, form, destinationTags, sourceTags]);
+
+  if (isPartiesLoading)
+    return (
+      <InlineLoading
+        status="active"
+        role="progressbar"
+        iconDescription="Loading"
+        description={t('loadingData', 'Loading data...')}
+      />
+    );
+
+  if (patiesError)
+    return (
+      <ErrorState error={patiesError} headerTitle={t('partieserror', 'Error launching base operation details form')} />
+    );
+
+  return (
+    <Stack gap={4} className={styles.grid}>
+      <div className={styles.heading}>
+        <h4>{`${stockOperationType.name} ${t('details', 'Details')}`}</h4>
+        <div className={styles.btnSet}>
+          {typeof onNext === 'function' && (
+            <Button kind="primary" onClick={onNext} role="button">
+              {t('next', 'Next')}
+            </Button>
+          )}
+        </div>
+      </div>
+      <Column>
+        <Controller
+          control={form.control}
+          name="operationDate"
+          render={({ field, fieldState: { error } }) => (
+            <DatePicker
+              readOnly={field.disabled}
+              id={`operationDate`}
+              datePickerType="single"
+              locale="en"
+              className={styles.datePickerInput}
+              {...field}
+              value={field.value}
+              dateFormat={DATE_PICKER_CONTROL_FORMAT}
+              onChange={([newDate]) => {
+                field.onChange(newDate);
+              }}
+            >
+              <DatePickerInput
+                autoComplete="off"
+                id={`operationDate-input`}
+                name="operationDate-input"
+                placeholder={DATE_PICKER_FORMAT}
+                labelText={t('operationDate', 'Operation Date')}
+                invalid={error?.message}
+                invalidText={error?.message}
+                size="xl"
+              />
+            </DatePicker>
+          )}
+        />
+      </Column>
+      {stockOperation?.operationNumber && (
+        <TextInput
+          id="operationNoLbl"
+          value={stockOperation?.operationNumber}
+          readOnly={true}
+          labelText={t('operationNumber', 'Operation Number')}
+        />
+      )}
+      <Column>
+        <Controller
+          control={form.control}
+          name="sourceUuid"
+          render={({ field, fieldState: { error } }) => (
+            <ComboBox
+              titleText={
+                isStockIssueOperation
+                  ? t('destination', 'destination')
+                  : stockOperationType?.hasDestination || stockOperation?.destinationUuid
+                  ? t('from', 'From')
+                  : t('location', 'Location')
+              }
+              readOnly={field.disabled}
+              name={'sourceUuid'}
+              id={'sourceUuid'}
+              size={'xl'}
+              items={sourceParties}
+              onChange={(data: { selectedItem: Party }) => {
+                field.onChange(data.selectedItem?.uuid);
+              }}
+              initialSelectedItem={sourceParties.find((p) => p.uuid === field.value)}
+              selectedItem={sourceParties.find((p) => p.uuid === field.value)}
+              itemToString={(item?: Party) => (item && item?.name ? `${item?.name}` : '')}
+              shouldFilterItem={() => true}
+              placeholder={
+                stockOperationType.hasDestination || stockOperation?.destinationUuid
+                  ? t('chooseASource', 'Choose a source')
+                  : t('chooseALocation', 'Choose a location')
+              }
+              ref={field.ref}
+              invalid={error?.message}
+              invalidText={error?.message}
+            />
+          )}
+        />
+      </Column>
+      {(stockOperationType.hasDestination || stockOperation?.destinationUuid) && (
+        <Column>
+          <Controller
+            control={form.control}
+            name="destinationUuid"
+            render={({ field, fieldState: { error } }) => (
+              <ComboBox
+                readOnly={field.disabled}
+                titleText={
+                  isStockIssueOperation
+                    ? t('source', 'Source')
+                    : stockOperationType?.hasSource || stockOperation?.atLocationUuid
+                    ? t('to', 'To')
+                    : t('location', 'Location')
+                }
+                name={'destinationUuid'}
+                id={'destinationUuid'}
+                size={'xl'}
+                items={destinationParties}
+                onChange={(data: { selectedItem: Party }) => {
+                  field.onChange(data.selectedItem?.uuid);
+                }}
+                initialSelectedItem={destinationParties.find((p) => p.uuid === field.value)}
+                selectedItem={destinationParties.find((p) => p.uuid === field.value)}
+                itemToString={(item?: Party) => (item && item?.name ? `${item?.name}` : '')}
+                shouldFilterItem={() => true}
+                placeholder={
+                  stockOperationType?.hasSource || stockOperation?.atLocationUuid
+                    ? t('chooseADestination', 'Choose a destination')
+                    : t('location', 'Location')
+                }
+                ref={field.ref}
+                invalid={error?.message}
+                invalidText={error?.message}
+              />
+            )}
+          />
+        </Column>
+      )}
+      <UsersSelector />
+      {operationTypePermision.requiresStockAdjustmentReason && (
+        <Column>
+          <StockOperationReasonSelector />
+        </Column>
+      )}
+      <Column>
+        <Controller
+          control={form.control}
+          name="remarks"
+          render={({ field, fieldState: { error } }) => (
+            <TextArea
+              {...field}
+              readOnly={field.disabled}
+              disabled={false}
+              maxCount={250}
+              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                field.onChange(e.target.value);
+              }}
+              placeholder={t('enterRemarks', 'Enter remarks') + ' ...'}
+              id={'remarks'}
+              labelText={t('remarks', 'Remarks')}
+              invalid={error?.message}
+              invalidText={error?.message}
+            />
+          )}
+        />
+      </Column>
+    </Stack>
+  );
+};
+
+export default BaseOperationDetailsFormStep;

package/src/stock-operations/stock-operations-forms/steps/quantity-uom-cell.component.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo } from 'react';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type QuantityUomCellProps = {
+  stockItemPackagingUOMUuid: string;
+  stockItemUuid: string;
+};
+
+const QuantityUomCell: React.FC<QuantityUomCellProps> = ({ stockItemPackagingUOMUuid, stockItemUuid }) => {
+  const { isLoading, error, item } = useStockItem(stockItemUuid);
+  const { t } = useTranslation();
+  const uomName = useMemo(() => {
+    return item?.packagingUnits?.find((unit) => unit.uuid === stockItemPackagingUOMUuid)?.packagingUomName;
+  }, [item, stockItemPackagingUOMUuid]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('packagingUomError', 'Error loading stockItemPackagingUOM name'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+  return <>{uomName}</>;
+};
+
+export default QuantityUomCell;

package/src/stock-operations/stock-operations-forms/steps/stock-availability-cell.component.tsx

@@ -0,0 +1,51 @@
+import { InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
+import styles from './stock-operation-items-form-step.scc.scss';
+const StockAvailability: React.FC<{ stockItemUuid: string }> = ({ stockItemUuid }) => {
+  const { items, isLoading, error } = useStockItemBatchInformationHook({
+    stockItemUuid: stockItemUuid,
+    includeBatchNo: true,
+  });
+  const { t } = useTranslation();
+
+  const totalQuantity = useMemo(() => {
+    if (!items?.length) return 0;
+    return items.reduce((total, batch) => {
+      return total + (Number(batch.quantity) || 0);
+    }, 0);
+  }, [items]);
+  const commonUOM = useMemo(() => {
+    if (!items?.length) return '';
+    return items[0]?.quantityUoM || '';
+  }, [items]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockAvailabilityError', 'Error loading stock availability'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+
+  return (
+    <div className={styles.availability}>
+      {totalQuantity > 0 ? (
+        <span>
+          Available: {totalQuantity.toLocaleString()} {commonUOM}
+        </span>
+      ) : (
+        <span className={styles.outOfStock}>Out of Stock</span>
+      )}
+    </div>
+  );
+};
+
+export default StockAvailability;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-batch-no-cell.component.tsx

@@ -0,0 +1,40 @@
+import { InlineLoading } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+
+type StockOperationitemBatchNoCellProps = {
+  operation: StockOperationType;
+  stockBatchUuid?: string;
+  batchNo?: string;
+  stockItemUuid: string;
+};
+
+const StockOperationItemBatchNoCell: React.FC<StockOperationitemBatchNoCellProps> = ({
+  operation,
+  batchNo,
+  stockBatchUuid,
+  stockItemUuid,
+}) => {
+  const operationTypePermision = useOperationTypePermisions(operation);
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNumbers(stockItemUuid);
+  const { t } = useTranslation();
+  const _batchno = useMemo(
+    () => stockItemBatchNos?.find((item) => item.uuid === stockBatchUuid)?.batchNo,
+    [stockItemBatchNos, stockBatchUuid],
+  );
+
+  if (isLoading) <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading')} />;
+
+  if (operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo)
+    return <p>{_batchno ?? '--'}</p>;
+
+  if (operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid)
+    return <p>{batchNo ?? '--'}</p>;
+
+  return <p>--</p>;
+};
+
+export default StockOperationItemBatchNoCell;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-cell.component.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useEffect } from 'react';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { InlineLoading } from '@carbon/react';
+import { StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
+import { URL_STOCK_ITEM } from '../../../constants';
+import { Link } from 'react-router-dom';
+
+type StockOperationItemCellProps = {
+  stockItemUuid: string;
+};
+
+const StockOperationItemCell: React.FC<StockOperationItemCellProps> = ({ stockItemUuid }) => {
+  const { isLoading, error, item } = useStockItem(stockItemUuid);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockItemError', 'Error loading stock item'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <InlineLoading status="active" iconDescription="Loading" />;
+  if (error) return <>--</>;
+
+  return (
+    <Link target={'_blank'} to={URL_STOCK_ITEM(stockItemUuid)}>
+      {(item as StockItemDTO)?.commonName || 'No name available'}
+    </Link>
+  );
+};
+
+export default StockOperationItemCell;

package/src/stock-operations/stock-operations-forms/steps/stock-operation-item-expiry-cell.component.tsx

@@ -0,0 +1,41 @@
+import { InlineLoading } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatForDatePicker } from '../../../constants';
+import { StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+
+type StockoperationItemExpiryCellProps = {
+  operation: StockOperationType;
+  stockBatchUuid?: string;
+  expiration?: Date;
+  stockItemUuid: string;
+};
+
+const StockoperationItemExpiryCell: React.FC<StockoperationItemExpiryCellProps> = ({
+  operation,
+  stockItemUuid,
+  expiration,
+  stockBatchUuid,
+}) => {
+  const operationTypePermision = useOperationTypePermisions(operation);
+  const { isLoading, stockItemBatchNos } = useStockItemBatchNumbers(stockItemUuid);
+  const { t } = useTranslation();
+  const _expiration = useMemo(
+    () => stockItemBatchNos?.find((item) => item.uuid === stockBatchUuid)?.expiration,
+    [stockItemBatchNos, stockBatchUuid],
+  );
+
+  if (isLoading) <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading')} />;
+
+  if (operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo)
+    return <p>{_expiration ? formatForDatePicker(_expiration) : '--'}</p>;
+
+  if (operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid)
+    return <p>{expiration ? formatForDatePicker(expiration) : '--'}</p>;
+
+  return <p>--</p>;
+};
+
+export default StockoperationItemExpiryCell;