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

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 ?? '',
+  };
+};

package/src/stock-operations/stock-operations-table.component.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { useStockOperationPages } from './stock-operations-table.resource';
-import { ResourceRepresentation } from '../core/api/api';
 import {
   DataTable,
-  TabPanel,
   DataTableSkeleton,
+  DatePicker,
+  DatePickerInput,
+  InlineLoading,
   Pagination,
   Table,
   TableBody,
@@ -17,30 +16,29 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
+  TableToolbarMenu,
   TableToolbarSearch,
+  TabPanel,
   Tile,
-  DatePickerInput,
-  DatePicker,
-  TableToolbarMenu,
-  TableToolbarAction,
-  InlineLoading,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
-import { launchAddOrEditDialog } from './stock-operation.utils';
-import { initialStockOperationValue } from '../core/utils/utils';
-import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
-import StockOperationsFilters from './stock-operations-filters.component';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, StockFilters } from '../constants';
+import { ResourceRepresentation } from '../core/api/api';
+import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import { handleMutate } from '../utils';
+import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
+import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
+import StockOperationsFilters from './stock-operations-filters.component';
+import { useStockOperationPages } from './stock-operations-table.resource';
 
 import styles from './stock-operations-table.scss';
-import StockOperationStatus from './add-stock-operation/stock-operation-status.component';
+import StockOperationStatusRow from './stock-operation-status/stock-operation-status-row';
 
 interface StockOperationsTableProps {
   status?: string;
@@ -98,8 +96,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const filterApplied =
     selectedFromDate || selectedToDate || selectedSources.length || selectedStatus.length || selectedOperations.length;
 
-  const [operations, setOperations] = useState<StockOperationType[]>([]);
-
   const handleOnFilterChange = useCallback((selectedItems, filterType) => {
     if (filterType === StockFilters.SOURCES) {
       setSelectedSources(selectedItems);
@@ -125,13 +121,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const handleEditClick = useCallback(
-    (stockOperation, isEditing) => {
-      launchAddOrEditDialog(t, stockOperation, isEditing, operation, operations, false);
-    },
-    [t, operation, operations],
-  );
-
   const tableRows = useMemo(() => {
     return items?.map((stockOperation, index) => {
       const commonNames = stockOperation?.stockOperationItems
@@ -144,15 +133,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         key: `key-${stockOperation?.uuid}`,
         operationTypeName: `${stockOperation?.operationTypeName}`,
         operationNumber: (
-          <EditStockOperationActionMenu
-            model={stockOperation}
-            operations={operations}
-            operationUuid={operation.uuid}
-            operationNumber={''}
-            onEdit={() => handleEditClick(stockOperation, true)}
-            showIcon={false}
-            showprops={true}
-          />
+          <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
         ),
         stockOperationItems: commonNames,
         status: `${stockOperation?.status}`,
@@ -169,20 +150,10 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
           stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
         } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
         operationDate: formatDisplayDate(stockOperation?.operationDate),
-        actions: (
-          <EditStockOperationActionMenu
-            model={stockOperation}
-            operations={operations}
-            operationUuid={operation.uuid}
-            operationNumber={''}
-            onEdit={() => handleEditClick(stockOperation, true)}
-            showIcon={true}
-            showprops={false}
-          />
-        ),
+        actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
       };
     });
-  }, [items, operations, handleEditClick, operation]);
+  }, [items]);
 
   if (isLoading && !filterApplied) {
     return (
@@ -243,14 +214,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                   <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
                 </TableToolbarMenu>
 
-                <StockOperationTypesSelector
-                  onOperationTypeSelected={(operation) => {
-                    launchAddOrEditDialog(t, initialStockOperationValue(), false, operation, operations, false);
-                  }}
-                  onOperationLoaded={(ops) => {
-                    setOperations(ops);
-                  }}
-                />
+                <StockOperationTypesSelector />
               </TableToolbarContent>
             </TableToolbar>
             <Table {...getTableProps()}>
@@ -289,7 +253,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                       </TableExpandRow>
                       {row.isExpanded ? (
                         <TableExpandedRow colSpan={headers.length + 2}>
-                          <StockOperationStatus model={items[index]} />
+                          <StockOperationStatusRow stockOperation={items[index]} />
                         </TableExpandedRow>
                       ) : (
                         <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />

package/src/stock-operations/stock-operations.resource.ts

@@ -2,9 +2,12 @@ import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework
 import useSWR from 'swr';
 import { ResourceFilterCriteria, toQueryParams } from '../core/api/api';
 import { PageableResult } from '../core/api/types/PageableResult';
-import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
-import { StopOperationAction } from '../core/api/types/stockOperation/StockOperationAction';
 import { InventoryGroupBy } from '../core/api/types/stockItem/StockItem';
+import { StopOperationAction } from '../core/api/types/stockOperation/StockOperationAction';
+import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationItemDtoSchema } from './validation-schema';
+import { StockOperationItemCost } from '../core/api/types/stockOperation/StockOperationItemCost';
+import { StockItemInventory } from '../core/api/types/stockItem/StockItemInventory';
 
 export interface StockOperationFilter extends ResourceFilterCriteria {
   status?: string | null | undefined;
@@ -63,7 +66,7 @@ export function useStockOperation(id: string | null) {
   const apiUrl = id ? `${restBaseUrl}/stockmanagement/stockoperation/${id}` : null;
   const { data, error, isLoading } = useSWR<{ data: StockOperationDTO }, Error>(apiUrl, apiUrl ? openmrsFetch : null);
   return {
-    items: data?.data || {},
+    items: data?.data,
     isLoading,
     error,
   };
@@ -83,7 +86,7 @@ export function useStockOperationAndItems(id: string) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${id}?v=full`;
   const { data, error, isLoading } = useSWR<{ data: StockOperationDTO }, Error>(apiUrl, openmrsFetch);
   return {
-    items: data.data ? data.data : {},
+    items: data?.data,
     isLoading,
     error,
   };
@@ -124,30 +127,30 @@ export function deleteStockOperationItem(id: string) {
 }
 
 // createStockOperation
-export function createStockOperation(item: StockOperationDTO) {
+export function createStockOperation(data: StockOperationItemDtoSchema) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockOperationDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     signal: abortController.signal,
-    body: item,
+    body: data,
   });
 }
 
 // updateStockOperation
-export function updateStockOperation(item: StockOperationDTO) {
-  const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${item.uuid}`;
+export function updateStockOperation(stockOperation: StockOperationDTO, data: StockOperationItemDtoSchema) {
+  const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${stockOperation.uuid}`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockOperationDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     signal: abortController.signal,
-    body: item,
+    body: data,
   });
 }
 
@@ -183,7 +186,7 @@ export function updateStockOperationBatchNumbers(item: StockOperationDTO, uuid:
 export function getStockOperationItemsCost(filter: StockOperationFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperationitemcost?v=default&stockOperationUuid=${filter}`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<{ results: Array<StockOperationItemCost> }>(apiUrl, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -195,7 +198,7 @@ export function getStockOperationItemsCost(filter: StockOperationFilter) {
 export function getStockItemInventory(filter: StockItemInventoryFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockiteminventory${toQueryParams(filter)}&v=default`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<{ results: Array<StockItemInventory> }>(apiUrl, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',

package/src/stock-operations/validation-schema.ts

@@ -114,9 +114,49 @@ export const stockOperationSchema = z.object({
   dispatchedByGivenName: z.string().nullish(),
   dispatchedByFamilyName: z.string().nullish(),
   dispatchedDate: z.coerce.date(),
-  requisitionStockOperationUuid: z.string(),
+  requisitionStockOperationUuid: z.string().uuid().nullish(),
+});
+export const baseStockOperationItemSchema = z.object({
+  uuid: z.string().min(1, 'Required'),
+  stockItemUuid: z.string().min(1, { message: 'Required' }),
+  stockItemPackagingUOMUuid: z.string().min(1, { message: 'Required' }),
+  batchNo: z.string().min(1, { message: 'Required' }),
+  stockBatchUuid: z.string().optional(),
+  expiration: z.coerce.date({ required_error: 'Required' }),
+  quantity: z.coerce.number().min(1, { message: 'Required' }),
+  purchasePrice: z.coerce.number().nullish(),
+  hasExpiration: z.boolean().nullish(),
 });
 
+export type BaseStockOperationItemFormData = z.infer<typeof baseStockOperationItemSchema>;
+
+export const getStockOperationItemFormSchema = (operationType: OperationType) => {
+  switch (operationType) {
+    case OperationType.RECEIPT_OPERATION_TYPE:
+    case OperationType.OPENING_STOCK_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({ stockBatchUuid: true });
+    case OperationType.REQUISITION_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({
+        batchNo: true,
+        stockBatchUuid: true,
+        expiration: true,
+        purchasePrice: true,
+      });
+    case OperationType.ADJUSTMENT_OPERATION_TYPE:
+    case OperationType.DISPOSED_OPERATION_TYPE:
+    case OperationType.RETURN_OPERATION_TYPE:
+    case OperationType.STOCK_ISSUE_OPERATION_TYPE:
+    case OperationType.STOCK_TAKE_OPERATION_TYPE:
+    case OperationType.TRANSFER_OUT_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({
+        batchNo: true,
+        expiration: true,
+        purchasePrice: true,
+      });
+    default:
+      return baseStockOperationItemSchema;
+  }
+};
 export const stockOperationItemDtoSchema = z.object({
   operationDate: z.coerce.date(),
   sourceUuid: z.string({ required_error: 'Location Required' }).min(1, {
@@ -137,47 +177,65 @@ export const stockOperationItemDtoSchema = z.object({
     }),
   responsiblePersonOther: z.string().nullish(),
   remarks: z.string().nullish(),
+  operationTypeUuid: z.string().min(1, 'Operation type required').uuid('Invalid operation type'),
+  stockOperationItems: baseStockOperationItemSchema.array().nonempty('You must add atleast one stock item'),
+  requisitionStockOperationUuid: z.string().uuid().optional(), // Suplied only for stock issue operation
 });
 
 export type StockOperationItemDtoSchema = z.infer<typeof stockOperationItemDtoSchema>;
 
 export type StockOperationFormData = z.infer<typeof stockOperationSchema>;
 
-export const operationSchema = (operation: OperationType): z.Schema => {
+export const getStockOperationFormSchema = (operation: OperationType): z.Schema => {
   switch (operation) {
     case OperationType.OPENING_STOCK_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({
-        destinationUuid: true,
-        reasonUuid: true,
-      });
+      return stockOperationItemDtoSchema
+        .omit({
+          destinationUuid: true,
+          reasonUuid: true,
+        })
+        .merge(
+          z.object({
+            stockOperationItems: getStockOperationItemFormSchema(operation)
+              .array()
+              .nonempty('You must add atleast one stock item'),
+          }),
+        );
     case OperationType.STOCK_TAKE_OPERATION_TYPE:
     case OperationType.ADJUSTMENT_OPERATION_TYPE:
     case OperationType.DISPOSED_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({ destinationUuid: true });
+      return stockOperationItemDtoSchema.omit({ destinationUuid: true }).merge(
+        z.object({
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
+        }),
+      );
     case OperationType.TRANSFER_OUT_OPERATION_TYPE:
     case OperationType.STOCK_ISSUE_OPERATION_TYPE:
       return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
         z.object({
+          // Merged to overid initial one with error message having  location instead of destination
           destinationUuid: z.string({ required_error: 'Destination Required' }).min(1, {
             message: 'Destination Required',
           }),
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
         }),
       );
     case OperationType.RETURN_OPERATION_TYPE:
     case OperationType.REQUISITION_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
-        z.object({
-          sourceUuid: z.string({ required_error: 'Source Required' }).min(1, {
-            message: 'Source Required',
-          }),
-        }),
-      );
     case OperationType.RECEIPT_OPERATION_TYPE:
       return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
         z.object({
+          // Merged to overid initial one with error message having location instead of source
           sourceUuid: z.string({ required_error: 'Source Required' }).min(1, {
             message: 'Source Required',
           }),
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
         }),
       );
   }