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

package/src/stock-operations/stock-operations-forms/stock-operation-form-header.component.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import {
+  operationFromString,
+  OperationType,
+  StockOperationType,
+  StockOperationTypeHasPrint,
+} from '../../core/api/types/stockOperation/StockOperationType';
+import StockOperationApprovalButton from '../stock-operations-dialog/stock-operations-approve-button.component';
+import StockOperationApproveDispatchButton from '../stock-operations-dialog/stock-operations-approve-dispatch-button.component';
+import StockOperationCancelButton from '../stock-operations-dialog/stock-operations-cancel-button.component';
+import StockOperationCompleteDispatchButton from '../stock-operations-dialog/stock-operations-completed-dispatch-button.component';
+import StockOperationIssueStockButton from '../stock-operations-dialog/stock-operations-issue-stock-button.component';
+import StockOperationPrintButton from '../stock-operations-dialog/stock-operations-print-button.component';
+import StockOperationRejectButton from '../stock-operations-dialog/stock-operations-reject-button.component';
+import StockOperationReturnButton from '../stock-operations-dialog/stock-operations-return-button.component';
+import { operationStatusColor } from '../stock-operations.resource';
+import useOperationTypePermisions from './hooks/useOperationTypePermisions';
+import useStockOperationLinks from './hooks/useStockOperationLinks';
+import styles from './stock-operation-form.scss';
+import StockOperationRelatedLink from './stock-operation-related-link.component';
+import StockOperationStatusRow from '../stock-operation-status/stock-operation-status-row';
+
+type Props = {
+  stockOperation: StockOperationDTO;
+  stockOperationType: StockOperationType;
+};
+
+const StockOperationFormHeader: React.FC<Props> = ({ stockOperationType, stockOperation }) => {
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const operationType = useMemo(() => {
+    return operationFromString(stockOperationType.operationType);
+  }, [stockOperationType]);
+  const requisitionOperationUuid = useMemo(() => {
+    if (
+      stockOperationType?.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+      stockOperation?.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+      stockOperationType?.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ||
+      stockOperation?.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE
+    ) {
+      return stockOperation.uuid;
+    }
+    return null;
+  }, [stockOperationType, stockOperation]);
+  const { error, isLoading, operationLinks } = useStockOperationLinks(requisitionOperationUuid);
+  const { t } = useTranslation();
+  if (isLoading || error) return null;
+
+  return (
+    <div>
+      <div className={styles.statusBody}>
+        <div className={styles.operationlinkscontainer}>
+          <div className={styles.statusLabel}>
+            <span className={styles.textHeading}>{t('status', 'Status ')}:</span>
+            <span
+              style={{
+                marginLeft: '2px',
+                color: `${operationStatusColor(stockOperation?.status)}`,
+              }}
+            >
+              {stockOperation?.status}
+            </span>
+          </div>
+          <StockOperationStatusRow stockOperation={stockOperation} />
+        </div>
+
+        {((!stockOperation.permission?.canEdit &&
+          (stockOperation.permission?.canApprove || stockOperation.permission?.canReceiveItems)) ||
+          stockOperation.permission?.canEdit ||
+          StockOperationTypeHasPrint(operationType) ||
+          (stockOperation?.permission?.isRequisitionAndCanIssueStock ?? false) ||
+          stockOperation.permission?.isRequisitionAndCanIssueStock) && (
+          <div className={styles.actionBtns}>
+            <>
+              {!stockOperation.permission?.canEdit && stockOperation.permission?.canApprove && (
+                <>
+                  {!operationTypePermision.requiresDispatchAcknowledgement && (
+                    <StockOperationApprovalButton operation={stockOperation} />
+                  )}
+
+                  {operationTypePermision.requiresDispatchAcknowledgement && (
+                    <StockOperationApproveDispatchButton operation={stockOperation} />
+                  )}
+
+                  <StockOperationRejectButton operation={stockOperation} />
+                  <StockOperationReturnButton operation={stockOperation} />
+                  <StockOperationCancelButton operation={stockOperation} />
+                </>
+              )}
+
+              {!stockOperation.permission?.canEdit && stockOperation.permission?.canReceiveItems && (
+                <>
+                  <StockOperationCompleteDispatchButton operation={stockOperation} reason={false} />
+                  <StockOperationReturnButton operation={stockOperation} />
+                </>
+              )}
+
+              {stockOperation.permission?.canEdit && <StockOperationCancelButton operation={stockOperation} />}
+              {stockOperation.permission?.isRequisitionAndCanIssueStock && (
+                <StockOperationIssueStockButton operation={stockOperation} />
+              )}
+              {(stockOperation.permission?.isRequisitionAndCanIssueStock ||
+                stockOperation.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ||
+                stockOperation.operationType === OperationType.REQUISITION_OPERATION_TYPE ||
+                stockOperation.operationType === OperationType.RECEIPT_OPERATION_TYPE ||
+                stockOperation.operationType === OperationType.TRANSFER_OUT_OPERATION_TYPE) && (
+                <StockOperationPrintButton operation={stockOperation} />
+              )}
+            </>
+          </div>
+        )}
+      </div>
+      {operationLinks && operationLinks.length > 0 && (
+        <div className={styles.operationlinkscontainer}>
+          <h6 className={styles.relatedTransactionHeader}>Related Transactions:</h6>
+          {operationLinks.map(
+            (item) =>
+              (stockOperation.uuid === item?.parentUuid || stockOperationType?.uuid === item?.parentUuid) && (
+                <React.Fragment key={item.uuid}>
+                  <span>{item?.childOperationTypeName}</span>
+                  <span className={item?.childVoided ? 'voided' : ''}>
+                    {' '}
+                    {item?.childVoided && item?.childOperationNumber}
+                    {!item?.childVoided && (
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          stockOperationUuid={item?.childUuid}
+                          operationNumber={item?.childOperationNumber}
+                        />
+                      </span>
+                    )}
+                  </span>{' '}
+                  <span>[{item?.childStatus}]</span>
+                </React.Fragment>
+              ),
+          )}
+          <span> </span>
+          {operationLinks.map(
+            (item) =>
+              (stockOperation.uuid === item?.childUuid || stockOperationType.uuid === item?.childUuid) && (
+                <React.Fragment key={item.uuid}>
+                  <span>{item?.parentOperationTypeName}</span>
+                  <span className={item?.parentVoided ? 'voided' : ''}>
+                    {' '}
+                    {item?.parentVoided && item?.parentOperationNumber}
+                    {!item?.parentVoided && (
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          stockOperationUuid={item?.parentUuid}
+                          operationNumber={item?.parentOperationNumber}
+                        />
+                      </span>
+                    )}
+                  </span>{' '}
+                  <span>[{item?.parentStatus}]</span>
+                </React.Fragment>
+              ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StockOperationFormHeader;

package/src/stock-operations/stock-operations-forms/stock-operation-form.component.tsx

@@ -0,0 +1,205 @@
+import { CircleDash } from '@carbon/react/icons';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { parseDate, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo, useState } from 'react';
+import { FieldError, FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject } from '../../config-schema';
+import { today } from '../../constants';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import {
+  operationFromString,
+  OperationType,
+  StockOperationType,
+  StockOperationTypeIsStockIssue,
+} from '../../core/api/types/stockOperation/StockOperationType';
+import { TabItem } from '../../core/components/tabs/types';
+import { otherUser, pick } from '../../core/utils/utils';
+import ReceivedItems from './steps/received-items.component';
+import {
+  getStockOperationFormSchema,
+  getStockOperationItemFormSchema,
+  StockOperationItemDtoSchema,
+} from '../validation-schema';
+import useOperationTypePermisions from './hooks/useOperationTypePermisions';
+import BaseOperationDetailsFormStep from './steps/base-operation-details-form-step';
+import StockOperationItemsFormStep from './steps/stock-operation-items-form-step.component';
+import StockOperationSubmissionFormStep from './steps/stock-operation-submission-form-step.component';
+import StockOperationFormHeader from './stock-operation-form-header.component';
+import StockOperationStepper from './stock-operation-stepper/stock-operation-stepper.component';
+import StockIssueFormInitializerWithRelatedRequisitionOperation from './stock-issue-form-initializer-with-related-requisition-operation.component';
+
+/**
+ * Props interface for the StockOperationForm component
+ * @interface StockOperationFormProps
+ * @property {StockOperationType} [stockOperationType] - The stock operation type being created or edited.
+ * @property {StockOperationDTO} [stockOperation] - The stock operation data transfer object.
+ * @property {string} [stockRequisitionUuid] - Requisition operation uuid used in stock issue stockOperation type
+ * When undefined or null, the form will be in creation mode.
+ */
+type StockOperationFormProps = {
+  stockOperation?: StockOperationDTO;
+  stockOperationType: StockOperationType;
+  stockRequisitionUuid?: string;
+};
+
+const StockOperationForm: React.FC<StockOperationFormProps> = ({
+  stockOperation,
+  stockOperationType,
+  stockRequisitionUuid,
+}) => {
+  const { t } = useTranslation();
+  const operationType = useMemo(() => {
+    return operationFromString(stockOperationType.operationType);
+  }, [stockOperationType]);
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const stockOperationItemFormSchema = useMemo(() => {
+    return getStockOperationItemFormSchema(operationType);
+  }, [operationType]);
+  const formschema = useMemo(() => {
+    return getStockOperationFormSchema(operationType);
+  }, [operationType]);
+  const showReceivedItems = useMemo(() => {
+    return (
+      (StockOperationTypeIsStockIssue(stockOperation?.operationType as OperationType) ||
+        stockOperation?.permission?.canDisplayReceivedItems) &&
+      (stockOperation.status === 'DISPATCHED' || stockOperation.status === 'COMPLETED')
+    );
+  }, [stockOperation]);
+  const steps: TabItem[] = useMemo(() => {
+    return [
+      {
+        name: stockOperation ? `${stockOperationType?.name} Details` : `${stockOperationType?.name} Details`,
+        component: (
+          <BaseOperationDetailsFormStep
+            stockOperation={stockOperation}
+            stockOperationType={stockOperationType}
+            onNext={() => setSelectedIndex(1)}
+          />
+        ),
+        disabled: true,
+      },
+      {
+        name: t('stockItems', 'Stock Items'),
+        component: (
+          <StockOperationItemsFormStep
+            stockOperation={stockOperation}
+            stockOperationType={stockOperationType}
+            onNext={() => setSelectedIndex(2)}
+            onPrevious={() => setSelectedIndex(0)}
+          />
+        ),
+        disabled: true,
+      },
+      {
+        name: operationTypePermision?.requiresDispatchAcknowledgement ? 'Submit/Dispatch' : 'Submit/Complete',
+        component: (
+          <StockOperationSubmissionFormStep
+            stockOperation={stockOperation}
+            stockOperationType={stockOperationType}
+            onPrevious={() => setSelectedIndex(1)}
+            onNext={showReceivedItems ? () => setSelectedIndex(3) : undefined}
+          />
+        ),
+        disabled: true,
+      },
+    ].concat(
+      showReceivedItems
+        ? [
+            {
+              name: t('receivedItems', 'Received Items'),
+              component: <ReceivedItems stockOperation={stockOperation} onPrevious={() => setSelectedIndex(2)} />,
+              disabled: true,
+            },
+          ]
+        : [],
+    ) as TabItem[];
+  }, [stockOperation, stockOperationType, t, operationTypePermision, showReceivedItems]);
+  const {
+    user: { uuid: defaultLoggedUserUuid },
+  } = useSession();
+  const { autoPopulateResponsiblePerson } = useConfig<ConfigObject>();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const form = useForm<StockOperationItemDtoSchema>({
+    // defaultValues: operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE ? issueStockOperation : model,
+    defaultValues: {
+      responsiblePersonUuid:
+        stockOperation?.responsiblePersonUuid ?? // if person uuid exist, make it default
+        (stockOperation?.responsiblePersonOther ? otherUser.uuid : undefined) ?? // if other resp person exist, default other user uuid
+        (autoPopulateResponsiblePerson ? defaultLoggedUserUuid : undefined), //Else default login user if configured
+      operationDate: stockOperation?.operationDate ? parseDate(stockOperation!.operationDate as any) : today(),
+      remarks: stockOperation?.remarks ?? '',
+
+      operationTypeUuid: stockOperation?.operationTypeUuid ?? stockOperationType?.uuid,
+      reasonUuid: stockOperation?.reasonUuid ?? '',
+      responsiblePersonOther: stockOperation?.responsiblePersonOther ?? '',
+      stockOperationItems:
+        stockOperation?.stockOperationItems?.map((item) =>
+          pick(
+            { ...item, expiration: item.expiration ? parseDate(item.expiration as any) : undefined },
+            stockOperationItemFormSchema.keyof().options,
+          ),
+        ) ?? [],
+      sourceUuid: stockOperation?.sourceUuid ?? '',
+      destinationUuid: stockOperation?.destinationUuid ?? '',
+    },
+    mode: 'all',
+    resolver: zodResolver(formschema),
+  });
+
+  useEffect(() => {
+    // Show error snackbar
+    Object.entries(form.formState.errors ?? {}).forEach(([key, val]) => {
+      if (['stockOperationItems', 'operationTypeUuid'].includes(key)) {
+        showSnackbar({ kind: 'error', title: key, subtitle: (val[key] as FieldError)?.message });
+      }
+    });
+    // Navigate to step where the error is
+    const fieldSteps = [
+      [
+        'responsiblePersonUuid',
+        'operationDate',
+        'remarks',
+        'sourceUuid',
+        'destinationUuid',
+        'reasonUuid',
+        'responsiblePersonOther',
+      ],
+      ['stockOperationItems'],
+    ];
+    for (let step = 0; step < fieldSteps.length; step++) {
+      const hasError = fieldSteps[step].some((field) => field in form.formState.errors);
+      if (hasError) {
+        setSelectedIndex(step);
+        break;
+      }
+    }
+  }, [form.formState.errors]);
+
+  return (
+    <FormProvider {...form}>
+      {stockOperation && (
+        <StockOperationFormHeader stockOperationType={stockOperationType} stockOperation={stockOperation} />
+      )}
+      {stockOperationType.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE && (
+        <StockIssueFormInitializerWithRelatedRequisitionOperation
+          stockRequisitionUuid={stockRequisitionUuid as string}
+          stockOperationType={stockOperationType}
+        />
+      )}
+      <StockOperationStepper
+        steps={steps.map((tab, index) => ({
+          title: tab.name,
+          component: tab.component,
+          disabled: tab.disabled,
+          // subTitle: `Subtitle  for ${tab.name}`,
+          icon: <CircleDash />,
+        }))}
+        selectedIndex={selectedIndex}
+        onChange={setSelectedIndex}
+      />
+    </FormProvider>
+  );
+};
+
+export default StockOperationForm;

package/src/stock-operations/stock-operations-forms/stock-operation-form.scss

@@ -0,0 +1,111 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.grid {
+  margin: layout.$spacing-05 layout.$spacing-05;
+  padding: layout.$spacing-05 0 0 0;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  min-width: 100%;
+}
+
+.title {
+  @include type.type-style('heading-02');
+  padding: layout.$spacing-03;
+}
+
+.heading {
+  text-align: left;
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: layout.$spacing-03 0 layout.$spacing-03 0;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.btnSet {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.relatedLink {
+  margin-left: layout.$spacing-02;
+  color: colors.$blue-60;
+}
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusLabel {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: layout.$spacing-05;
+}
+
+.statusBody {
+  display: flex;
+  justify-content: space-between;
+  margin: layout.$spacing-02;
+}
+
+.actionBtns {
+  margin: layout.$spacing-03;
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+  height: fit-content;
+}
+
+.operationlinkscontainer {
+  margin: layout.$spacing-05;
+}
+
+.relatedTransactionHeader {
+  color: colors.$green-50;
+}

package/src/stock-operations/stock-operations-forms/stock-operation-related-link.component.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import { useStockOperationAndItems } from '../stock-operations.resource';
+
+interface StockOperationRelatedLinkProps {
+  stockOperationUuid: string;
+  operationNumber: string;
+}
+
+const StockOperationRelatedLink: React.FC<StockOperationRelatedLinkProps> = ({
+  stockOperationUuid,
+  operationNumber,
+}) => {
+  const { error, isLoading, types } = useStockOperationTypes();
+  const {
+    error: stockOperationError,
+    isLoading: isStockOperationLoading,
+    items: stockOperation,
+  } = useStockOperationAndItems(stockOperationUuid);
+  const { t } = useTranslation();
+
+  const handleEdit = useCallback(() => {
+    const operationType = types?.results?.find((op) => op?.uuid === stockOperation?.operationTypeUuid);
+    if (!operationType) {
+      return;
+    }
+    launchStockoperationAddOrEditDialog(
+      t,
+      operationType,
+      stockOperation,
+      stockOperation?.requisitionStockOperationUuid,
+    );
+  }, [types, stockOperation, t]);
+
+  if (isLoading || error || stockOperationError || isStockOperationLoading) return null;
+  return (
+    <span onClick={handleEdit} style={{ cursor: 'pointer', textDecoration: 'underline' }}>
+      {operationNumber}
+    </span>
+  );
+};
+
+export default StockOperationRelatedLink;

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stepper.scss

@@ -0,0 +1,41 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.layer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}
+
+.stepperContainer {
+  display: flex;
+  gap: layout.$spacing-03;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+}
+
+.stepperItem {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+  padding: layout.$spacing-03;
+  border-top: layout.$spacing-01 solid colors.$gray-30;
+}
+
+.stepperItemActive {
+  border-top: layout.$spacing-02 solid var(--brand-03);
+}
+
+.subtTitle {
+  color: colors.$gray-50;
+  @include type.type-style('body-01');
+}
+
+.title {
+  @include type.type-style('heading-02');
+}

package/src/stock-operations/stock-operations-forms/stock-operation-stepper/stock-operation-stepper.component.tsx

@@ -0,0 +1,52 @@
+import { Layer } from '@carbon/react';
+import React from 'react';
+import styles from './stepper.scss';
+export type Step = {
+  title: string;
+  subTitle?: string;
+  icon?: React.ReactNode;
+  component: React.ReactElement;
+  disabled?: boolean;
+};
+
+type StockOperationStepperProps = {
+  steps: Step[];
+  title?: string;
+  hasContainer?: boolean;
+  selectedIndex?: number;
+  onChange?: (index: number) => void;
+};
+const StockOperationStepper: React.FC<StockOperationStepperProps> = ({
+  steps,
+  hasContainer,
+  onChange,
+  selectedIndex,
+  title,
+}) => {
+  return (
+    <Layer className={styles.layer}>
+      <ol className={styles.stepperContainer}>
+        {steps.map(({ title, subTitle, icon, disabled }, index) => {
+          const active = selectedIndex >= index;
+          return (
+            <li
+              role="button"
+              className={`${styles.stepperItem} ${active ? styles.stepperItemActive : ''}`}
+              key={index}
+              onClick={!disabled ? () => onChange?.(index) : undefined}
+            >
+              {icon}
+              <div>
+                <p className={styles.title}>{title}</p>
+                <p className={styles.subtTitle}>{subTitle}</p>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      <Layer>{steps[selectedIndex].component}</Layer>
+    </Layer>
+  );
+};
+
+export default StockOperationStepper;

package/src/stock-operations/stock-operations-forms/stock-operations-form-utils.ts

@@ -0,0 +1,32 @@
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import { OperationType } from '../../core/api/types/stockOperation/StockOperationType';
+
+export function mapIssueStockLocations(stockOperation) {
+  /** Since we are using requisition information to issue stock,
+      please note that the locations will be inverted: the destination listed on the requisition will become the issuing location.
+  */
+  const { sourceUuid, sourceName, destinationUuid, destinationName } = stockOperation;
+  return {
+    ...stockOperation,
+    sourceUuid: destinationUuid,
+    sourceName: destinationName,
+    destinationUuid: sourceUuid,
+    destinationName: sourceName,
+  };
+}
+
+export const getStockOperationLocationByOperationType = (
+  operationType: OperationType,
+  stockOperation?: StockOperationDTO,
+) => {
+  if (operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE)
+    return {
+      sourceUuid: stockOperation?.destinationUuid ?? '',
+      destinationUuid: stockOperation?.sourceUuid ?? '',
+    };
+
+  return {
+    sourceUuid: stockOperation?.sourceUuid ?? '',
+    destinationUuid: stockOperation?.destinationUuid ?? '',
+  };
+};