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

package/src/stock-operations/add-stock-operation/add-stock-operation.utils.tsx

@@ -0,0 +1,241 @@
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import { initialStockOperationValue } from "../../core/utils/utils";
+import { MAIN_STORE_LOCATION_TAG, today } from "../../constants";
+import {
+  operationFromString,
+  OperationType,
+  StockOperationType,
+  StockOperationTypeCanCapturePurchasePrice,
+  StockOperationTypeHasPrint,
+  StockOperationTypeIsNegativeQtyAllowed,
+  StockOperationTypeIsQuantityOptional,
+  StockOperationTypeRequiresActualBatchInformation,
+  StockOperationTypeRequiresBatchUuid,
+  StockOperationTypeRequiresDispatchAcknowledgement,
+  StockOperationTypeRequiresStockAdjustmentReason,
+} from "../../core/api/types/stockOperation/StockOperationType";
+import { StockOperationItemDTO } from "../../core/api/types/stockOperation/StockOperationItemDTO";
+import { InitializeResult } from "./types";
+import {
+  LocationTypeLocation,
+  LocationTypeOther,
+} from "../../core/api/types/stockOperation/LocationType";
+import {
+  getParties,
+  getStockOperationTypes,
+} from "../../stock-lookups/stock-lookups.resource";
+import { Party } from "../../core/api/types/Party";
+
+export async function initializeNewStockOperation(
+  currentStockOperationType: StockOperationType,
+  // urlQueryParams?: URLSearchParams,
+  stockOperation?: StockOperationDTO,
+  stockOperationTypes?: StockOperationType[]
+): Promise<InitializeResult> {
+  let model: StockOperationDTO;
+  const isNew = !!stockOperation;
+  const newItemsToCopy: StockOperationItemDTO[] = [];
+  const showQuantityRequested = false;
+
+  let operationTypes = stockOperationTypes;
+  const canIssueStock =
+    stockOperation?.permission?.isRequisitionAndCanIssueStock ?? false;
+  const sourceTags =
+    currentStockOperationType?.stockOperationTypeLocationScopes
+      ?.filter((p) => currentStockOperationType?.hasSource && p.isSource)
+      .map((p) => p.locationTag) ?? [];
+  const shouldLockSource =
+    sourceTags.length === 1 && sourceTags[0] === MAIN_STORE_LOCATION_TAG;
+
+  const destinationTags =
+    currentStockOperationType?.stockOperationTypeLocationScopes
+      ?.filter(
+        (p) => currentStockOperationType?.hasDestination && p.isDestination
+      )
+      .map((p) => p.locationTag) ?? [];
+  const shouldLockDestination =
+    destinationTags.length === 1 &&
+    destinationTags[0] === MAIN_STORE_LOCATION_TAG;
+  let location: string | null | undefined = null;
+  let sourcePartyList: Party[] | null | undefined;
+  let destinationPartyList: Party[] | null | undefined;
+
+  if (isNew) {
+    model = structuredClone(initialStockOperationValue());
+    model = Object.assign(model, {
+      operationDate: today(),
+      operationTypeName: currentStockOperationType?.name,
+      operationTypeUuid: currentStockOperationType?.uuid,
+      operationType: currentStockOperationType?.operationType,
+    });
+
+    if (
+      currentStockOperationType.operationType ==
+      OperationType.STOCK_ISSUE_OPERATION_TYPE
+    ) {
+      // requisition = urlQueryParams?.get("requisition");
+      // if (requisition) {
+      //   const response = await getStockOperation(requisition);
+      //   if (!response.ok) {
+      //     return;
+      //   }
+      //
+      //   const requisitionStockOperation = response.data;
+      //
+      //   if (
+      //     !requisitionStockOperation.responsiblePersonUuid &&
+      //     requisitionStockOperation.responsiblePersonOther
+      //   ) {
+      //     requisitionStockOperation.responsiblePersonUuid = "Other";
+      //   }
+      //
+      //   if (
+      //     requisitionStockOperation &&
+      //     requisitionStockOperation.stockOperationItems
+      //   ) {
+      //     let hasQtyRequested = false;
+      //     requisitionStockOperation.stockOperationItems.forEach((si) => {
+      //       if (si.quantity && si.stockItemPackagingUOMName) {
+      //         hasQtyRequested = true;
+      //       }
+      //
+      //       const itemId = `new-item-${getStockOperationUniqueId()}`;
+      //       si.id = itemId;
+      //       si.uuid = itemId;
+      //       newItemsToCopy.push({
+      //         ...si,
+      //         quantityRequested: si.quantity,
+      //         quantityRequestedPackagingUOMUuid: si.stockItemPackagingUOMUuid,
+      //         quantityRequestedPackagingUOMName: si.stockItemPackagingUOMName,
+      //       });
+      //     });
+      //     if (hasQtyRequested) {
+      //       showQuantityRequested = true;
+      //     }
+      //   }
+      //   newItemsToCopy.push({ uuid: `new-item-1`, id: `new-item-1` });
+      //   model.destinationUuid = requisitionStockOperation.sourceUuid;
+      //   model.destinationName = requisitionStockOperation.sourceName;
+      //   model.responsiblePersonUuid =
+      //     requisitionStockOperation.responsiblePersonUuid;
+      //   model.responsiblePersonOther =
+      //     requisitionStockOperation.responsiblePersonOther;
+      //   model.responsiblePersonFamilyName =
+      //     requisitionStockOperation.responsiblePersonFamilyName;
+      //   model.responsiblePersonGivenName =
+      //     requisitionStockOperation.responsiblePersonGivenName;
+      //   model.remarks = requisitionStockOperation.remarks;
+      // }
+    }
+    const partyList = await getParties();
+    if (!partyList.ok) throw Error("Error loading parties");
+
+    sourcePartyList = partyList?.data?.results?.filter(
+      (p) =>
+        (p.locationUuid &&
+          currentStockOperationType?.sourceType === LocationTypeLocation &&
+          (sourceTags.length === 0 ||
+            (p.tags && sourceTags.some((x) => p.tags.includes(x))))) ||
+        (p.stockSourceUuid &&
+          currentStockOperationType?.sourceType === LocationTypeOther)
+    );
+    if (currentStockOperationType?.hasSource) {
+      if (isNew && shouldLockSource && sourcePartyList?.length > 0) {
+        const party = sourcePartyList[0];
+        model.sourceUuid = party.uuid;
+        model.sourceName = party.name;
+        location = party?.locationUuid;
+      }
+    }
+
+    if (currentStockOperationType?.hasDestination) {
+      destinationPartyList = partyList?.data?.results?.filter(
+        (p) =>
+          (p.locationUuid &&
+            currentStockOperationType?.destinationType ===
+              LocationTypeLocation &&
+            (destinationTags.length === 0 ||
+              (p.tags && destinationTags.some((x) => p.tags.includes(x))))) ||
+          (p.stockSourceUuid &&
+            currentStockOperationType?.destinationType === LocationTypeOther)
+      );
+
+      if (isNew && shouldLockDestination && destinationPartyList?.length > 0) {
+        const party = destinationPartyList[0];
+        model.destinationUuid = party.uuid;
+        model.destinationName = party.name;
+      }
+    }
+  } else {
+    const response = await getStockOperationTypes();
+    if (response.ok) {
+      operationTypes = response.data.results;
+    } else {
+      throw Error("Error loading operation types");
+    }
+  }
+
+  const opType = operationFromString(currentStockOperationType.operationType);
+  return {
+    batchBalance: {},
+    batchNos: {},
+    itemUoM: {},
+    requisition: "",
+    showQuantityRequested: false,
+    dto: model,
+    stockItems: newItemsToCopy,
+    // showQuantityRequested,
+    // requisition,
+    isNegativeQuantityAllowed: StockOperationTypeIsNegativeQtyAllowed(opType),
+    requiresBatchUuid: StockOperationTypeRequiresBatchUuid(opType),
+    requiresActualBatchInfo:
+      StockOperationTypeRequiresActualBatchInformation(opType),
+    isQuantityOptional: StockOperationTypeIsQuantityOptional(opType),
+    canCaptureQuantityPrice: StockOperationTypeCanCapturePurchasePrice(opType),
+    requiresStockAdjustmentReason:
+      StockOperationTypeRequiresStockAdjustmentReason(opType),
+    requiresDispatchAcknowledgement:
+      StockOperationTypeRequiresDispatchAcknowledgement(opType),
+    allowExpiredBatchNumbers:
+      currentStockOperationType?.allowExpiredBatchNumbers ?? false,
+    canEditModel: stockOperation?.permission?.canEdit ?? false,
+    canViewModel: stockOperation?.permission?.canView ?? false,
+    canApproveModel: stockOperation?.permission?.canApprove ?? false,
+    canIssueStock,
+    canReceiveItems: stockOperation?.permission?.canReceiveItems ?? false,
+    canDisplayReceivedItems:
+      stockOperation?.permission?.canDisplayReceivedItems ?? false,
+    canUpdateItemsBatchInformation:
+      stockOperation?.permission?.canUpdateBatchInformation ?? false,
+    canPrint: canIssueStock || StockOperationTypeHasPrint(opType),
+    sourceTags,
+    destinationTags,
+    shouldLockDestination,
+    shouldLockSource,
+    sourcePartyListFilter: (p) => {
+      return (
+        (p.locationUuid &&
+          currentStockOperationType?.sourceType === LocationTypeLocation &&
+          (sourceTags.length === 0 ||
+            (p.tags && sourceTags.some((x) => p.tags.includes(x))))) ||
+        (p.stockSourceUuid &&
+          currentStockOperationType?.sourceType === LocationTypeOther)
+      );
+    },
+    destinationPartyListFilter: (p) => {
+      return (
+        (p.locationUuid &&
+          currentStockOperationType?.destinationType === LocationTypeLocation &&
+          (destinationTags.length === 0 ||
+            (p.tags && destinationTags.some((x) => p.tags.includes(x))))) ||
+        (p.stockSourceUuid &&
+          currentStockOperationType?.destinationType === LocationTypeOther)
+      );
+    },
+    location,
+    sourcePartyList,
+    destinationPartyList,
+    stockOperationTypes: operationTypes,
+    hasQtyRequested: showQuantityRequested,
+  };
+}

package/src/stock-operations/add-stock-operation/add-stock-utils.ts

@@ -0,0 +1,110 @@
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import { OperationType } from "../../core/api/types/stockOperation/StockOperationType";
+
+const OPERATION_TYPES_FOR_DESTINATION_NAME_DELETION = [
+  OperationType.ADJUSTMENT_OPERATION_TYPE,
+  OperationType.RECEIPT_OPERATION_TYPE,
+  OperationType.STOCK_ISSUE_OPERATION_TYPE,
+  OperationType.STOCK_TAKE_OPERATION_TYPE,
+  OperationType.RETURN_OPERATION_TYPE,
+  OperationType.DISPOSED_OPERATION_TYPE,
+  OperationType.OPENING_STOCK_OPERATION_TYPE,
+  OperationType.TRANSFER_OUT_OPERATION_TYPE,
+];
+
+const OPERATION_TYPES_FOR_DESTINATION_UUID_DELETION = [
+  OperationType.ADJUSTMENT_OPERATION_TYPE,
+  OperationType.DISPOSED_OPERATION_TYPE,
+  OperationType.STOCK_TAKE_OPERATION_TYPE,
+  OperationType.OPENING_STOCK_OPERATION_TYPE,
+];
+
+export function getRequisitionStockOperations(
+  items: Array<StockOperationDTO> = []
+) {
+  // Extract stock issued requisition UUIDs
+  const stockIssuedRequisitionUuids =
+    items
+      ?.filter(
+        (item) =>
+          item.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE
+      )
+      .map((item) => item.requisitionStockOperationUuid) ?? [];
+
+  // Filter requisition stock operations
+  const requisitionStockOperations =
+    items?.filter(
+      (item) =>
+        item.operationType === OperationType.REQUISITION_OPERATION_TYPE &&
+        !stockIssuedRequisitionUuids.includes(item.uuid)
+    ) ?? [];
+
+  return requisitionStockOperations;
+}
+
+function deleteProperties(req, properties) {
+  properties.forEach((prop) => {
+    delete req[prop];
+  });
+}
+
+function shouldDeleteDestinationName(operationType) {
+  return OPERATION_TYPES_FOR_DESTINATION_NAME_DELETION.includes(operationType);
+}
+
+function shouldDeleteDestinationUuid(operationType) {
+  return OPERATION_TYPES_FOR_DESTINATION_UUID_DELETION.includes(operationType);
+}
+
+export function createBaseOperationPayload(model, item, operationType) {
+  const req = Object.assign(model, item);
+
+  const propertiesToDelete = [
+    "submitted",
+    "cancelledByFamilyName",
+    "atLocationName",
+    "completedByGivenName",
+    "cancelledBy",
+    "submittedByFamilyName",
+    "operationOrder",
+    "dispatchedByGivenName",
+    "submittedByGivenName",
+    "returnedByGivenName",
+    "operationNumber",
+    "responsiblePersonFamilyName",
+    "returnReason",
+    "atLocationUuid",
+    "cancelReason",
+    "rejectedByGivenName",
+    "reasonName",
+    "submittedBy",
+    "creator",
+    "completedByFamilyName",
+    "operationTypeName",
+    "rejectedByFamilyName",
+    "responsiblePerson",
+    "creatorFamilyName",
+    "returnedByFamilyName",
+    "cancelledByGivenName",
+    "operationType",
+    "responsiblePersonGivenName",
+    "sourceName",
+    "rejectionReason",
+    "completedBy",
+    "creatorGivenName",
+    "dispatchedByFamilyName",
+    "uuid",
+  ];
+
+  deleteProperties(req, propertiesToDelete);
+
+  if (shouldDeleteDestinationName(operationType)) {
+    delete req.destinationName;
+  }
+
+  if (shouldDeleteDestinationUuid(operationType)) {
+    delete req.destinationUuid;
+  }
+
+  return req;
+}

package/src/stock-operations/add-stock-operation/base-operation-details.component.tsx

@@ -0,0 +1,352 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOperationDTO";
+import { SaveStockOperation } from "../../stock-items/types";
+import {
+  operationFromString,
+  OperationType,
+  StockOperationType,
+} from "../../core/api/types/stockOperation/StockOperationType";
+import {
+  DATE_PICKER_CONTROL_FORMAT,
+  DATE_PICKER_FORMAT,
+  formatForDatePicker,
+  today,
+} from "../../constants";
+import {
+  Button,
+  DatePicker,
+  DatePickerInput,
+  InlineLoading,
+  TextInput,
+  ComboBox,
+} from "@carbon/react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { operationSchema, StockOperationFormData } from "../validation-schema";
+import { ArrowRight } from "@carbon/react/icons";
+import PartySelector from "../party-selector/party-selector.component";
+import UsersSelector from "../users-selector/users-selector.component";
+import { otherUser } from "../../core/utils/utils";
+import ControlledTextInput from "../../core/components/carbon/controlled-text-input/controlled-text-input.component";
+import StockOperationReasonSelector from "../stock-operation-reason-selector/stock-operation-reason-selector.component";
+import ControlledTextArea from "../../core/components/carbon/controlled-text-area/controlled-text-area.component";
+import { InitializeResult } from "./types";
+import rootStyles from "../../root.scss";
+import { ResourceRepresentation } from "../../core/api/api";
+import { useStockOperationPages } from "../stock-operations-table.resource";
+import { useStockOperationContext } from "./stock-operation-context/useStockOperationContext";
+import {
+  createBaseOperationPayload,
+  getRequisitionStockOperations,
+} from "./add-stock-utils";
+
+interface BaseOperationDetailsProps {
+  isEditing?: boolean;
+  canEdit?: boolean;
+  model?: StockOperationDTO;
+  onSave?: SaveStockOperation;
+  operation: StockOperationType;
+  setup: InitializeResult;
+}
+
+const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
+  model,
+  onSave,
+  operation,
+  canEdit,
+  isEditing,
+  setup: {
+    requiresStockAdjustmentReason: showReason,
+    shouldLockSource: lockSource,
+    shouldLockDestination: lockDestination,
+    sourcePartyList,
+    destinationPartyList,
+  },
+}) => {
+  const { t } = useTranslation();
+  const { setFormContext } = useStockOperationContext();
+  const { isLoading, items } = useStockOperationPages({
+    v: ResourceRepresentation.Full,
+    totalCount: true,
+  });
+  const requisitionStockOperations = getRequisitionStockOperations(items);
+  const operationType = operationFromString(operation.operationType);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+    setValue,
+  } = useForm<StockOperationFormData>({
+    defaultValues: model,
+    mode: "all",
+    resolver: zodResolver(operationSchema(operationType)),
+  });
+
+  const [isOtherUser, setIsOtherUser] = useState<boolean | null>();
+  const [isSaving, setIsSaving] = useState(false);
+  if (isLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description="Loading data..."
+      />
+    );
+  }
+
+  const handleSave = async (item: StockOperationDTO) => {
+    try {
+      setIsSaving(true);
+      const payload = createBaseOperationPayload(model, item, operationType);
+      await onSave(payload);
+    } catch (e) {
+      // Show notification
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return (
+    <div style={{ margin: "10px" }}>
+      <form
+        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
+      >
+        {operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE && (
+          <Controller
+            control={control}
+            name="requisitionStockOperationUuid"
+            render={({ field }) => (
+              <ComboBox
+                id="requisitionStockOperationUuid"
+                items={requisitionStockOperations}
+                onChange={(data: { selectedItem: StockOperationDTO }) => {
+                  field.onChange(data.selectedItem.uuid);
+                  Object.assign(
+                    model.stockOperationItems,
+                    data.selectedItem.stockOperationItems
+                  );
+                  setFormContext({
+                    stockItems: data.selectedItem.stockOperationItems,
+                  });
+                }}
+                itemToString={(item) => `${item?.operationNumber}` ?? ""}
+                titleText={t("requisitionStockOperation", "Requisition")}
+                invalid={!!errors.requisitionStockOperationUuid}
+                invalidText={errors.requisitionStockOperationUuid?.message}
+                placeholder={t("chooseARequisition", "Choose a requisition")}
+              />
+            )}
+          />
+        )}
+
+        {canEdit && (
+          <Controller
+            control={control}
+            render={({ field: { onChange } }) => (
+              <DatePicker
+                datePickerType="single"
+                maxDate={formatForDatePicker(today())}
+                locale="en"
+                dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                onChange={onChange}
+              >
+                <DatePickerInput
+                  invalid={!!errors.operationDate}
+                  invalidText={errors?.operationDate?.message}
+                  id="operationDate"
+                  name="operationDate"
+                  placeholder={DATE_PICKER_FORMAT}
+                  labelText={t("operationDate", "Operation Date")}
+                  value={formatForDatePicker(model?.operationDate)}
+                />
+              </DatePicker>
+            )}
+            name="operationDate"
+          />
+        )}
+
+        {!canEdit && (
+          <>
+            <TextInput
+              id="operationDateLbl"
+              value={formatForDatePicker(model?.operationDate)}
+              readOnly={true}
+              labelText="Operation Date"
+            />
+          </>
+        )}
+
+        {isEditing && model?.operationNumber && (
+          <TextInput
+            id="operationNoLbl"
+            value={model?.operationNumber}
+            readOnly={true}
+            labelText={"Operation Number:"}
+          />
+        )}
+
+        {canEdit && !lockSource && operation?.hasSource && (
+          <PartySelector
+            controllerName="sourceUuid"
+            name="sourceUuid"
+            control={control}
+            title={
+              operation?.hasDestination
+                ? t("from:", "From:")
+                : t("location:", "Location:")
+            }
+            placeholder={
+              operation.hasDestination
+                ? t("chooseASource", "Choose a source")
+                : t("chooseALocation", "Choose a location")
+            }
+            invalid={!!errors.sourceUuid}
+            invalidText={errors.sourceUuid && errors?.sourceUuid?.message}
+            parties={sourcePartyList || []}
+          />
+        )}
+
+        {(!canEdit || isEditing || lockSource) && (
+          <TextInput
+            id="sourceUuidLbl"
+            value={model?.sourceName ?? ""}
+            readOnly={true}
+            labelText={operation?.hasDestination ? "From:" : "From:"}
+          />
+        )}
+        {canEdit && !lockDestination && operation?.hasDestination && (
+          <PartySelector
+            controllerName="destinationUuid"
+            name="destinationUuid"
+            control={control}
+            title={operation?.hasSource ? "To:" : "Location:"}
+            placeholder={
+              operation?.hasSource
+                ? t("chooseADestination", "Choose a destination")
+                : "Location"
+            }
+            invalid={!!errors.destinationUuid}
+            invalidText={
+              errors.destinationUuid && errors?.destinationUuid?.message
+            }
+            parties={destinationPartyList || []}
+          />
+        )}
+
+        {(!canEdit || isEditing || lockDestination) && (
+          <TextInput
+            id="destinationUuidLbl"
+            value={model?.destinationName ?? ""}
+            readOnly={true}
+            labelText={operation?.hasSource ? "To:" : "To:"}
+          />
+        )}
+
+        {canEdit && (
+          <UsersSelector
+            controllerName="responsiblePersonUuid"
+            name="responsiblePersonUuid"
+            control={control}
+            title={t("responsiblePerson:", "Responsible Person:")}
+            placeholder={t("filter", "Filter ...")}
+            invalid={!!errors.responsiblePersonUuid}
+            invalidText={
+              errors.responsiblePersonUuid &&
+              errors?.responsiblePersonUuid?.message
+            }
+            onUserChanged={(user) => {
+              if (user?.uuid === otherUser.uuid) {
+                setIsOtherUser(true);
+              }
+            }}
+          />
+        )}
+
+        {isOtherUser && (
+          <ControlledTextInput
+            id="responsiblePersonOther"
+            name="responsiblePersonOther"
+            control={control}
+            controllerName="responsiblePersonOther"
+            maxLength={255}
+            size={"md"}
+            value={`${model?.responsiblePersonOther ?? ""}`}
+            labelText={t("responsiblePerson", "Responsible Person:")}
+            placeholder={t("pleaseSpecify", "Please Specify:")}
+            invalid={!!errors.responsiblePersonOther}
+            invalidText={
+              errors.responsiblePersonOther &&
+              errors?.responsiblePersonOther?.message
+            }
+          />
+        )}
+
+        {!canEdit && (
+          <TextInput
+            id="responsiblePersonLbl"
+            value={
+              (model?.responsiblePersonUuid &&
+              model?.responsiblePersonUuid !== otherUser.uuid
+                ? `${model?.responsiblePersonFamilyName} ${model?.responsiblePersonGivenName}`
+                : model?.responsiblePersonOther) ?? ""
+            }
+            readOnly={true}
+            labelText={"Responsible Person"}
+          />
+        )}
+
+        {showReason && canEdit && (
+          <StockOperationReasonSelector
+            controllerName="reasonUuid"
+            name="reasonUuid"
+            control={control}
+            placeholder={t("chooseAReason", "Choose a reason")}
+            title={t("reason", "Reason:")}
+            invalid={!!errors.reasonUuid}
+            invalidText={errors.reasonUuid && errors?.reasonUuid?.message}
+            onReasonChange={(reason) => {
+              setValue("reasonUuid", reason.uuid);
+            }}
+          />
+        )}
+
+        {showReason && !canEdit && (
+          <TextInput
+            id="reasonUuidLbl"
+            value={model?.reasonName ?? ""}
+            readOnly={true}
+            labelText={"Reason:"}
+          />
+        )}
+
+        <ControlledTextArea
+          id="remarks"
+          name="remarks"
+          control={control}
+          controllerName="remarks"
+          maxLength={255}
+          value={`${model?.remarks ?? ""}`}
+          labelText={t("remarks:", "Remarks:")}
+          invalid={!!errors.remarks}
+          invalidText={errors.remarks && errors?.remarks?.message}
+        />
+
+        <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+          <Button
+            name="save"
+            type="button"
+            className="submitButton"
+            onClick={handleSubmit(handleSave)}
+            kind="primary"
+            renderIcon={ArrowRight}
+          >
+            {isSaving ? <InlineLoading /> : t("next", "Next")}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default BaseOperationDetails;