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

package/src/stock-operations/stock-operations-forms/stock-item-form/stock-item-form.workspace.tsx

@@ -0,0 +1,197 @@
+import {
+  Button,
+  ButtonSet,
+  Column,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  NumberInput,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, formatForDatePicker, today } from '../../../constants';
+import { operationFromString, StockOperationType } from '../../../core/api/types/stockOperation/StockOperationType';
+import { useStockItem } from '../../../stock-items/stock-items.resource';
+import { BaseStockOperationItemFormData, getStockOperationItemFormSchema } from '../../validation-schema';
+import useOperationTypePermisions from '../hooks/useOperationTypePermisions';
+import BatchNoSelector from '../input-components/batch-no-selector.component';
+import QtyUomSelector from '../input-components/quantity-uom-selector.component';
+import styles from './stock-item-form.scss';
+import UniqueBatchNoEntryInput from '../input-components/unique-batch-no-entry-input.component';
+
+export interface StockItemFormProps {
+  stockOperationType: StockOperationType;
+  stockOperationItem: BaseStockOperationItemFormData;
+  onSave?: (data: BaseStockOperationItemFormData) => void;
+}
+
+interface Props extends DefaultWorkspaceProps, StockItemFormProps {}
+const StockItemForm: React.FC<Props> = ({ closeWorkspace, stockOperationType, stockOperationItem, onSave }) => {
+  const operationType = useMemo(() => {
+    return operationFromString(stockOperationType.operationType);
+  }, [stockOperationType]);
+  const formschema = useMemo(() => {
+    return getStockOperationItemFormSchema(operationType);
+  }, [operationType]);
+  const operationTypePermision = useOperationTypePermisions(stockOperationType);
+
+  const fields = formschema.keyof().options;
+  const form = useForm<z.infer<typeof formschema>>({
+    resolver: zodResolver(formschema),
+    defaultValues: stockOperationItem,
+    mode: 'all',
+  });
+  const { t } = useTranslation();
+  const { item } = useStockItem(form.getValues('stockItemUuid'));
+  const onSubmit = (data: z.infer<typeof formschema>) => {
+    onSave?.(data);
+    closeWorkspace();
+    // Implementation of adding or updating itsms in items table
+  };
+  return (
+    <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        {item?.commonName && <p className={styles.title}>{item?.commonName}</p>}
+
+        {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
+          fields.includes('batchNo' as any) && (
+            <Column>
+              <Controller
+                control={form.control}
+                defaultValue={stockOperationItem?.batchNo}
+                name={'batchNo' as any}
+                render={({ field, fieldState: { error } }) => (
+                  <UniqueBatchNoEntryInput
+                    defaultValue={field.value}
+                    onValueChange={field.onChange}
+                    stockItemUuid={stockOperationItem.stockItemUuid}
+                    error={error?.message}
+                    stockOperationItemUuid={stockOperationItem.uuid}
+                  />
+                )}
+              />
+            </Column>
+          )}
+
+        {operationTypePermision.requiresBatchUuid && !operationTypePermision.requiresActualBatchInfo && (
+          <Column>
+            <Controller
+              control={form.control}
+              name={'stockBatchUuid' as any}
+              render={({ field, fieldState: { error } }) => (
+                <BatchNoSelector
+                  initialValue={stockOperationItem?.stockBatchUuid}
+                  onValueChange={field.onChange}
+                  stockItemUuid={stockOperationItem.stockItemUuid}
+                  error={error?.message}
+                />
+              )}
+            />
+          </Column>
+        )}
+        {(operationTypePermision.requiresActualBatchInfo || operationTypePermision.requiresBatchUuid) &&
+          fields.includes('expiration' as any) && (
+            <Column>
+              <Controller
+                control={form.control}
+                name={'expiration' as any}
+                render={({ field, fieldState: { error } }) => (
+                  <DatePicker
+                    id={`expiration`}
+                    datePickerType="single"
+                    minDate={formatForDatePicker(today())}
+                    locale="en"
+                    className={styles.datePickerInput}
+                    dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    {...field}
+                    onChange={([newDate]) => {
+                      field.onChange(newDate);
+                    }}
+                  >
+                    <DatePickerInput
+                      autoComplete="off"
+                      id={`expiration-input`}
+                      name="operationDate"
+                      placeholder={DATE_PICKER_FORMAT}
+                      labelText={t('expiriation', 'Expiration Date')}
+                      invalid={error?.message}
+                    />
+                  </DatePicker>
+                )}
+              />
+            </Column>
+          )}
+
+        <Column>
+          <Controller
+            control={form.control}
+            name="quantity"
+            render={({ field, fieldState: { error } }) => (
+              <NumberInput
+                allowEmpty
+                className="small-placeholder-text"
+                disableWheel
+                hideSteppers
+                id={`qty`}
+                {...field}
+                label={t('qty', 'Qty')}
+                invalidText={error?.message}
+                invalid={error?.message}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name={'stockItemPackagingUOMUuid'}
+            render={({ field, fieldState: { error } }) => (
+              <QtyUomSelector
+                stockItemUuid={stockOperationItem?.stockItemUuid}
+                intiallvalue={field.value}
+                error={error?.message}
+                onValueChange={field.onChange}
+              />
+            )}
+          />
+        </Column>
+
+        {operationTypePermision?.canCaptureQuantityPrice && fields.includes('purchasePrice' as any) && (
+          <Column>
+            <Controller
+              control={form.control}
+              name={'purchasePrice' as any}
+              render={({ field, fieldState: { error } }) => (
+                <TextInput
+                  {...field}
+                  labelText={t('purchasePrice', 'Purchase Price')}
+                  invalid={error?.message}
+                  invalidText={error?.message}
+                  id={`purchaseprice`}
+                  placeholder={t('purchasePrice', 'Purchase Price')}
+                />
+              )}
+            />
+          </Column>
+        )}
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default StockItemForm;

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,200 @@
+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 '../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 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)}
+          />
+        ),
+        disabled: true,
+      },
+    ].concat(
+      StockOperationTypeIsStockIssue(stockOperation?.operationType as OperationType) ||
+        stockOperation?.permission?.canDisplayReceivedItems
+        ? stockOperation.status === 'DISPATCHED' || stockOperation.status === 'COMPLETED'
+          ? [
+              {
+                name: t('receivedItems', 'Received Items'),
+                component: <ReceivedItems model={stockOperation} />,
+                disabled: true,
+              },
+            ]
+          : []
+        : [],
+    ) as TabItem[];
+  }, [stockOperation, stockOperationType, t, operationTypePermision]);
+  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;
+}