@openmrs/esm-stock-management-app 3.0.1-pre.845 → 3.0.1-pre.848

package/dist/openmrs-esm-stock-management-app.js.buildmanifest.json

@@ -30,9 +30,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1232375,
+      "size": 1232855,
       "sizes": {
-        "javascript": 1232207,
+        "javascript": 1232687,
         "consume-shared": 168
       },
       "names": [],
@@ -46,7 +46,7 @@
       "auxiliaryFiles": [
         "14.js.map"
       ],
-      "hash": "5eb16f802d971fe9",
+      "hash": "e3d190d1b7ec20b4",
       "childrenByOrder": {}
     },
     {
@@ -105,9 +105,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 42269,
+      "size": 42268,
       "sizes": {
-        "javascript": 42269
+        "javascript": 42268
       },
       "names": [],
       "idHints": [],
@@ -121,7 +121,7 @@
       "auxiliaryFiles": [
         "93.js.map"
       ],
-      "hash": "1298703fbfee64be",
+      "hash": "6197ebfe2195c4fc",
       "childrenByOrder": {}
     },
     {
@@ -204,9 +204,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 31420,
+      "size": 31419,
       "sizes": {
-        "javascript": 31420
+        "javascript": 31419
       },
       "names": [],
       "idHints": [],
@@ -220,7 +220,7 @@
       "auxiliaryFiles": [
         "172.js.map"
       ],
-      "hash": "626bc65dbb8904a2",
+      "hash": "910ab2a037928771",
       "childrenByOrder": {}
     },
     {
@@ -228,10 +228,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 5608920,
+      "size": 5609400,
       "sizes": {
         "consume-shared": 210,
-        "javascript": 5587390,
+        "javascript": 5587870,
         "share-init": 210,
         "runtime": 21110
       },
@@ -248,7 +248,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "e391d2ab8f9da3d0",
+      "hash": "4cd3aac1ddd4c0bc",
       "childrenByOrder": {}
     },
     {
@@ -302,9 +302,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 31492,
+      "size": 31491,
       "sizes": {
-        "javascript": 31492
+        "javascript": 31491
       },
       "names": [],
       "idHints": [],
@@ -318,7 +318,7 @@
       "auxiliaryFiles": [
         "290.js.map"
       ],
-      "hash": "b2bc00c61a23d2a0",
+      "hash": "22ba51aad2322773",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"stock-nav-menu","slot":"stock-sidebar-slot","component":"stockNavMenu","online":true,"offline":true},{"name":"overview-db-link","slot":"stock-page-dashboard-slot","component":"stockOverviewLink","meta":{"name":"overview","slot":"overview-dashboard-slot","title":"overview"},"order":0,"online":true,"offline":true},{"name":"stock-overview-db","slot":"overview-dashboard-slot","component":"stockOverview"},{"name":"operations-db-link","slot":"stock-page-dashboard-slot","component":"stockOperationsLink","meta":{"name":"operations","slot":"operations-dashboard-slot","title":"operations"},"order":2,"online":true,"offline":true},{"name":"stock-operations-db","slot":"operations-dashboard-slot","component":"stockOperations"},{"name":"items-db-link","slot":"stock-page-dashboard-slot","component":"stockItemsLink","meta":{"name":"items","slot":"items-dashboard-slot","title":"items"},"order":1,"online":true,"offline":true},{"name":"stock-items-db","slot":"items-dashboard-slot","component":"stockItems"},{"name":"user-scopes-db-link","slot":"stock-page-dashboard-slot","component":"stockUserScopesLink","meta":{"name":"user-scopes","slot":"user-scopes-dashboard-slot","title":"user-scopes"},"order":3,"online":true,"offline":true},{"name":"stock-user-scopes-db","slot":"user-scopes-dashboard-slot","component":"stockUserScopes"},{"name":"sources-db-link","slot":"stock-page-dashboard-slot","component":"stockSourcesLink","meta":{"name":"sources","slot":"sources-dashboard-slot","title":"Sources"},"order":2,"online":true,"offline":true},{"name":"stock-sources-db","slot":"sources-dashboard-slot","component":"stockSources"},{"name":"reports-db-link","slot":"stock-page-dashboard-slot","component":"stockReportsLink","meta":{"name":"reports","slot":"reports-dashboard-slot","title":"Reports"},"order":5,"online":true,"offline":true},{"name":"stock-reports-db","slot":"reports-dashboard-slot","component":"stockReports"},{"name":"settings-db-link","slot":"stock-page-dashboard-slot","component":"stockSettingsLink","meta":{"name":"settings","slot":"settings-dashboard-slot","title":"Settings"},"order":6,"online":true,"offline":true},{"name":"stock-settings-db","slot":"settings-dashboard-slot","component":"stockSettings"},{"name":"stock-management-admin-card-link","slot":"system-admin-page-card-link-slot","component":"stockManagementAdminCardLink"},{"name":"stock-management-app-menu-item","component":"stockManagementAppMenuItem","slot":"app-menu-item-slot","meta":{"name":" Stock Management"}},{"name":"delete-packaging-unit-button","component":"deletePackagingUnitButton"}],"modals":[{"name":"delete-stock-modal","component":"deleteStockModal"},{"name":"delete-stock-user-scope-modal","component":"deleteUserScopeModal"},{"name":"delete-stock-rule-modal","component":"deleteStockRuleModal"},{"name":"delete-packaging-unit-modal","component":"deletePackagingUnitModal"},{"name":"expired-stock-modal","component":"expiredStockModal"},{"name":"import-bulk-stock-items","component":"importBulkStockItemsModal"},{"name":"receiving-stock-modal","component":"receivingStockModal"},{"name":"stock-operation-dialog","component":"stockOperationModal"},{"name":"transactions-print-bincard-preview-modal","component":"transactionBincardPrintPreviewModal"},{"name":"transactions-print-stockcard-preview-modal","component":"transactionStockcardPrintPreviewModal"}],"workspaces":[{"name":"stock-operation-form-workspace","component":"stockOperationFormWorkspace","title":"Stock Operation","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-item-rules-form-workspace","component":"stockItemRulesFormWorkspace","title":"Stock Item Rules","type":"form"},{"name":"stock-item-form-workspace","component":"stockItemFormWorkspace","title":"Stock Items","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-sources-form-workspace","component":"stockSourcesFormWorkspace","title":"Stock Sources","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-location-form-workspace","component":"stockLocationsFormWorkspace","title":"Stock Locations","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-user-role-scopes-form-workspace","component":"stockUserScopesFormWorkspace","title":"User Role Scopes","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-reports-form-workspace","component":"stockReportsFormWorkspace","title":"Reports","type":"form","canMaximize":true,"width":"extra-wide"}],"pages":[{"component":"root","route":"stock-management"}],"version":"3.0.1-pre.845"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"stock-nav-menu","slot":"stock-sidebar-slot","component":"stockNavMenu","online":true,"offline":true},{"name":"overview-db-link","slot":"stock-page-dashboard-slot","component":"stockOverviewLink","meta":{"name":"overview","slot":"overview-dashboard-slot","title":"overview"},"order":0,"online":true,"offline":true},{"name":"stock-overview-db","slot":"overview-dashboard-slot","component":"stockOverview"},{"name":"operations-db-link","slot":"stock-page-dashboard-slot","component":"stockOperationsLink","meta":{"name":"operations","slot":"operations-dashboard-slot","title":"operations"},"order":2,"online":true,"offline":true},{"name":"stock-operations-db","slot":"operations-dashboard-slot","component":"stockOperations"},{"name":"items-db-link","slot":"stock-page-dashboard-slot","component":"stockItemsLink","meta":{"name":"items","slot":"items-dashboard-slot","title":"items"},"order":1,"online":true,"offline":true},{"name":"stock-items-db","slot":"items-dashboard-slot","component":"stockItems"},{"name":"user-scopes-db-link","slot":"stock-page-dashboard-slot","component":"stockUserScopesLink","meta":{"name":"user-scopes","slot":"user-scopes-dashboard-slot","title":"user-scopes"},"order":3,"online":true,"offline":true},{"name":"stock-user-scopes-db","slot":"user-scopes-dashboard-slot","component":"stockUserScopes"},{"name":"sources-db-link","slot":"stock-page-dashboard-slot","component":"stockSourcesLink","meta":{"name":"sources","slot":"sources-dashboard-slot","title":"Sources"},"order":2,"online":true,"offline":true},{"name":"stock-sources-db","slot":"sources-dashboard-slot","component":"stockSources"},{"name":"reports-db-link","slot":"stock-page-dashboard-slot","component":"stockReportsLink","meta":{"name":"reports","slot":"reports-dashboard-slot","title":"Reports"},"order":5,"online":true,"offline":true},{"name":"stock-reports-db","slot":"reports-dashboard-slot","component":"stockReports"},{"name":"settings-db-link","slot":"stock-page-dashboard-slot","component":"stockSettingsLink","meta":{"name":"settings","slot":"settings-dashboard-slot","title":"Settings"},"order":6,"online":true,"offline":true},{"name":"stock-settings-db","slot":"settings-dashboard-slot","component":"stockSettings"},{"name":"stock-management-admin-card-link","slot":"system-admin-page-card-link-slot","component":"stockManagementAdminCardLink"},{"name":"stock-management-app-menu-item","component":"stockManagementAppMenuItem","slot":"app-menu-item-slot","meta":{"name":" Stock Management"}},{"name":"delete-packaging-unit-button","component":"deletePackagingUnitButton"}],"modals":[{"name":"delete-stock-modal","component":"deleteStockModal"},{"name":"delete-stock-user-scope-modal","component":"deleteUserScopeModal"},{"name":"delete-stock-rule-modal","component":"deleteStockRuleModal"},{"name":"delete-packaging-unit-modal","component":"deletePackagingUnitModal"},{"name":"expired-stock-modal","component":"expiredStockModal"},{"name":"import-bulk-stock-items","component":"importBulkStockItemsModal"},{"name":"receiving-stock-modal","component":"receivingStockModal"},{"name":"stock-operation-dialog","component":"stockOperationModal"},{"name":"transactions-print-bincard-preview-modal","component":"transactionBincardPrintPreviewModal"},{"name":"transactions-print-stockcard-preview-modal","component":"transactionStockcardPrintPreviewModal"}],"workspaces":[{"name":"stock-operation-form-workspace","component":"stockOperationFormWorkspace","title":"Stock Operation","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-item-rules-form-workspace","component":"stockItemRulesFormWorkspace","title":"Stock Item Rules","type":"form"},{"name":"stock-item-form-workspace","component":"stockItemFormWorkspace","title":"Stock Items","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-sources-form-workspace","component":"stockSourcesFormWorkspace","title":"Stock Sources","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-location-form-workspace","component":"stockLocationsFormWorkspace","title":"Stock Locations","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-user-role-scopes-form-workspace","component":"stockUserScopesFormWorkspace","title":"User Role Scopes","type":"form","canMaximize":true,"width":"extra-wide"},{"name":"stock-reports-form-workspace","component":"stockReportsFormWorkspace","title":"Reports","type":"form","canMaximize":true,"width":"extra-wide"}],"pages":[{"component":"root","route":"stock-management"}],"version":"3.0.1-pre.848"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-stock-management-app",
-  "version": "3.0.1-pre.845",
+  "version": "3.0.1-pre.848",
   "license": "MPL-2.0",
   "description": "Stock management microfrontend for OpenMRS 3.x",
   "browser": "dist/openmrs-esm-stock-management-app.js",

package/src/core/components/overlay/overlay.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopOverlay {
   position: fixed;

package/src/core/components/privilages-component/privilages.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/type';
 @use '@carbon/layout';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');

package/src/core/components/table/table.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/type';
 @use '@carbon/layout';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
   background-color: $ui-background;

package/src/core/components/tabs/vertical-tabs.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .heading {
   @include type.type-style('productive-heading-02');

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
   margin: layout.$spacing-03;

package/src/stock-items/stock-items-table.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/styles/scss/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
   background-color: $ui-background;
@@ -74,6 +74,8 @@
 .filterContainer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dateAlign {
@@ -82,17 +84,12 @@
 }
 
 .filtersAlign {
-  padding-bottom: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
+  min-width: auto;
+  width: auto;
 
   :global(.cds--list-box__menu) {
     min-width: 15rem;
     z-index: 1;
   }
 }
-
-.filterContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: layout.$spacing-05;
-}

package/src/stock-items/stock-items.component.tsx

@@ -3,7 +3,7 @@ import StockItemsTableComponent from './stock-items-table.component';
 
 const StockItems = () => {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockItemsTableComponent />
     </div>
   );

package/src/stock-locations/stock-locations.component.tsx

@@ -3,7 +3,7 @@ import StockLocationsItems from './stock-locations-table.component';
 
 function StockLocations() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockLocationsItems />
     </div>
   );

package/src/stock-management-header/stock-management-header.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .textHeading {
   font-weight: bold;

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

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { DropdownSkeleton, MultiSelect } from '@carbon/react';
+import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { StockFilters } from '../constants';
 import { StockOperationStatusTypes } from '../core/api/types/stockOperation/StockOperationStatus';
 import styles from '../stock-items/stock-items-table.scss';
 
 interface StockOperationFiltersProps {
   conceptUuid?: string;
-  onFilterChange: (selectedItems: any[], filterType: string) => void;
   filterName: string;
+  onFilterChange: (selectedItems: any[], filterType: string) => void;
 }
 
 const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptUuid, onFilterChange, filterName }) => {
@@ -58,11 +58,12 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
 
   return (
     <MultiSelect
+      autoAlign
       className={styles.filtersAlign}
+      disabled={!dataItems.length}
       id="multiSelect"
       label={filterName}
-      size="md"
-      labelInline={true}
+      labelInline
       items={dataItems}
       itemToString={(item) => (item ? item.display : 'Not Set')}
       onChange={({ selectedItems }) => {
@@ -74,7 +75,6 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
         }
       }}
       placeholder={`Filter by ${filterName}`}
-      style={{ minWidth: 'auto', width: 'auto' }}
     />
   );
 };

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

@@ -1,9 +1,11 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   DataTable,
   DataTableSkeleton,
   DatePicker,
   DatePickerInput,
   InlineLoading,
+  Link,
   Pagination,
   Table,
   TableBody,
@@ -22,22 +24,18 @@ import {
   TableToolbarSearch,
   TabPanel,
   Tile,
-  Link,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
 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 { ResourceRepresentation } from '../core/api/api';
+import { useStockOperationPages } from './stock-operations-table.resource';
 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 StockOperationExpandedRow from './add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component';
 import styles from './stock-operations-table.scss';
 
@@ -47,6 +45,7 @@ interface StockOperationsTableProps {
 
 const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const { t } = useTranslation();
+
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
@@ -96,46 +95,48 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const tableRows = useMemo(() => {
-    return items?.map((stockOperation, index) => {
-      const threshHold = 1;
-      const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
-      const commonNames =
-        stockOperation?.stockOperationItems
-          ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
-          .map((item) => item.commonName)
-          .join(', ') ?? '';
+  const tableRows = useMemo(
+    () =>
+      items?.map((stockOperation, index) => {
+        const threshHold = 1;
+        const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
+        const commonNames =
+          stockOperation?.stockOperationItems
+            ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
+            .map((item) => item.commonName)
+            .join(', ') ?? '';
 
-      return {
-        ...stockOperation,
-        id: stockOperation?.uuid,
-        key: `key-${stockOperation?.uuid}`,
-        operationTypeName: `${stockOperation?.operationTypeName}`,
-        operationNumber: (
-          <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
-        ),
-        stockOperationItems: {
-          commonNames,
-          more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
-        },
-        status: `${stockOperation?.status}`,
-        source: `${stockOperation?.sourceName ?? ''}`,
-        destination: `${stockOperation?.destinationName ?? ''}`,
-        location: (
-          <>
-            {stockOperation?.sourceName ?? ''}
-            {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
-            {stockOperation?.destinationName ?? ''}
-          </>
-        ),
-        responsiblePerson: `${
-          stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
-        } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
-        operationDate: formatDisplayDate(stockOperation?.operationDate),
-        actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
-      };
-    });
-  }, [items]);
+        return {
+          ...stockOperation,
+          id: stockOperation?.uuid,
+          key: `key-${stockOperation?.uuid}`,
+          operationTypeName: `${stockOperation?.operationTypeName}`,
+          operationNumber: (
+            <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
+          ),
+          stockOperationItems: {
+            commonNames,
+            more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
+          },
+          status: `${stockOperation?.status}`,
+          source: `${stockOperation?.sourceName ?? ''}`,
+          destination: `${stockOperation?.destinationName ?? ''}`,
+          location: (
+            <>
+              {stockOperation?.sourceName ?? ''}
+              {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
+              {stockOperation?.destinationName ?? ''}
+            </>
+          ),
+          responsiblePerson: `${
+            stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
+          } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
+          operationDate: formatDisplayDate(stockOperation?.operationDate),
+          actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
+        };
+      }),
+    [items],
+  );
 
   if (isLoading && !filterApplied) {
     return (
@@ -144,26 +145,22 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   }
 
   return (
-    <div className={styles.tableOverride}>
+    <div>
       <TabPanel>{t('stockOperationTrackMovement', 'Stock operations to track movement of stock.')}</TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
       <DataTable
-        rows={tableRows}
         headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
+        isSortable
+        rows={tableRows}
+        useZebraStyles
         render={({
-          rows,
-          headers,
+          expandRow,
+          getExpandedRowProps,
           getHeaderProps,
-          getTableProps,
           getRowProps,
+          getTableProps,
+          headers,
           onInputChange,
-          getExpandedRowProps,
-          expandRow,
+          rows,
         }) => (
           <TableContainer>
             <TableToolbar
@@ -175,34 +172,30 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
             >
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch
-                  className={styles.patientListSearch}
                   expanded
+                  labelText={t('searchStockOperations', 'Search stock operations')}
                   onChange={onInputChange}
-                  placeholder="Filter Table"
-                  size="sm"
+                  placeholder={t('searchStockOperations', 'Search stock operations')}
                 />
-                <div className={styles.filterContainer}>
+                <div className={styles.container}>
                   <DatePicker
-                    className={styles.dateAlign}
+                    className={styles.datePicker}
                     datePickerType="range"
                     dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                    onChange={([startDate, endDate]) => handleDateFilterChange([startDate, endDate])}
                     value={[selectedFromDate, selectedToDate]}
-                    onChange={([startDate, endDate]) => {
-                      handleDateFilterChange([startDate, endDate]);
-                    }}
                   >
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
-                    <DatePickerInput placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('startDate', 'Start date')} placeholder={DATE_PICKER_FORMAT} />
+                    <DatePickerInput labelText={t('endDate', 'End date')} placeholder={DATE_PICKER_FORMAT} />
                   </DatePicker>
-
                   <StockOperationsFilters filterName={StockFilters.SOURCES} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.STATUS} onFilterChange={handleOnFilterChange} />
-
                   <StockOperationsFilters filterName={StockFilters.OPERATION} onFilterChange={handleOnFilterChange} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
 
                 <StockOperationTypesSelector />

package/src/stock-operations/stock-operations-table.scss

@@ -1,7 +1,7 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
   background-color: $ui-02;
@@ -34,23 +34,20 @@
 .toolbarContent {
   display: flex;
   align-items: center;
+  height: layout.$spacing-09;
+  margin-top: layout.$spacing-05;
 }
 
-.filterContainer {
+.container {
   display: flex;
   align-items: center;
-}
-
-.dateAlign {
-  padding-top: layout.$spacing-03;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .filterContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: layout.$spacing-05;
 }
 
 .rowLoadingContainer {
@@ -96,3 +93,15 @@
 .relatedTransactionHeader {
   color: colors.$green-50;
 }
+
+.toolbarMenuAction {
+  max-width: none;
+}
+
+.dataTableSkeleton {
+  margin-top: layout.$spacing-09;
+}
+
+.datePicker {
+  margin-bottom: layout.$spacing-05;
+}

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

@@ -3,7 +3,7 @@ import StockOperations from './stock-operations-table.component';
 
 function StockOperationsComponent() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockOperations />
     </div>
   );

package/src/stock-reports/report-list/stock-reports.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
 @use '@carbon/layout';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
   margin: layout.$spacing-03;

package/src/stock-sources/delete-stock-modal.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyText {
   @include type.type-style('body-long-01');

package/src/stock-sources/stock-sources.component.tsx

@@ -3,7 +3,7 @@ import StockSourcesItems from './stock-sources-items-table.component';
 
 function StockSources() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockSourcesItems />
     </div>
   );

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyText {
   @include type.type-style('body-long-01');

package/src/stock-user-role-scopes/stock-user-role-scopes.component.tsx

@@ -3,7 +3,7 @@ import StockUserRoleScopesItems from './stock-user-role-scopes-items-table.compo
 
 function StockUserScopes() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockUserRoleScopesItems />
     </div>
   );