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

package/src/core/components/card/metrics-card-component.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { useTranslation } from 'react-i18next';
-import { Tile } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import styles from './metrics-card.scss';
+import { isEmpty } from 'lodash-es';
+import { Tile } from '@carbon/react';
 import { ConfigurableLink } from '@openmrs/esm-framework';
-import isEmpty from 'lodash-es/isEmpty';
-import dayjs from 'dayjs';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import styles from './metrics-card.scss';
+
 dayjs.extend(isSameOrBefore);
 
 interface MetricsCardProps {
@@ -16,8 +17,8 @@ interface MetricsCardProps {
   children?: React.ReactNode;
   view: string;
   count?: { expiry6months: Array<any> };
-  outofstockCount?: { itemsbelowmin: Array<any>; itemsabovemax: Array<any> };
-  disposedCount?: { expired: Array<any>; poorquality: Array<any> };
+  outOfStockCount?: { itemsBelowMin: Array<any>; itemsAboveMax: Array<any> };
+  disposedCount?: { expired: Array<any>; poorQuality: Array<any> };
 }
 const MetricsCard: React.FC<MetricsCardProps> = ({
   label,
@@ -26,7 +27,7 @@ const MetricsCard: React.FC<MetricsCardProps> = ({
   children,
   view,
   count,
-  outofstockCount,
+  outOfStockCount,
   disposedCount,
 }) => {
   const { t } = useTranslation();
@@ -40,8 +41,8 @@ const MetricsCard: React.FC<MetricsCardProps> = ({
         </div>
         {view && (
           <ConfigurableLink className={styles.link} to={`\${openmrsSpaBase}/stock-management/orders`}>
-            <span style={{ fontSize: '0.825rem', marginRight: '0.325rem' }}>{t('view', 'View')}</span>{' '}
-            <ArrowRight size={16} className={styles.viewListBtn} />
+            <span>{t('view', 'View')}</span>
+            <ArrowRight size={16} />
           </ConfigurableLink>
         )}
       </div>
@@ -52,24 +53,26 @@ const MetricsCard: React.FC<MetricsCardProps> = ({
         </div>
         {!isEmpty(count) && (
           <div className={styles.countGrid}>
-            <span style={{ color: '#DA1E28' }}>{t('in6Months', 'In 6 months')}</span>
-            <p style={{ color: '#DA1E28' }}>{count.expiry6months?.length}</p>
+            <span />
+            <span className={styles.in6MonthsLabel}>{t('in6Months', 'In 6 months')}</span>
+            <p />
+            <p className={styles.in6MonthsValue}>{count.expiry6months?.length}</p>
           </div>
         )}
-        {!isEmpty(outofstockCount) && (
+        {!isEmpty(outOfStockCount) && (
           <div className={styles.countGrid}>
-            <span style={{ color: '#DA1E28' }}>{t('itemsBelowMin', 'Items Below Min')}</span>
-            <span style={{ color: '#319227' }}>{t('itemsAboveMax', 'Items Above Max')}</span>
-            <p style={{ color: '#DA1E28' }}>{outofstockCount.itemsbelowmin?.length}</p>
-            <p style={{ color: '#319227' }}>{outofstockCount.itemsabovemax?.length}</p>
+            <span className={styles.belowMinLabel}>{t('itemsBelowMin', 'Items Below Min')}</span>
+            <span className={styles.aboveMaxLabel}>{t('itemsAboveMax', 'Items Above Max')}</span>
+            <p className={styles.belowMinValue}>{outOfStockCount.itemsBelowMin?.length}</p>
+            <p className={styles.aboveMaxValue}>{outOfStockCount.itemsAboveMax?.length}</p>
           </div>
         )}
         {!isEmpty(disposedCount) && (
           <div className={styles.countGrid}>
-            <span style={{ color: '#DA1E28' }}>{t('expired', 'Expired')}</span>
-            <span style={{ color: '#FABA5F' }}>{t('poorquality', 'Poor Quality')}</span>
-            <p style={{ color: '#DA1E28' }}>{disposedCount.expired?.length}</p>
-            <p style={{ color: '#FABA5F' }}>{disposedCount.poorquality?.length}</p>
+            <span className={styles.expiredLabel}>{t('expired', 'Expired')}</span>
+            <span className={styles.poorQualityLabel}>{t('poorQuality', 'Poor Quality')}</span>
+            <p className={styles.expiredValue}>{disposedCount.expired?.length}</p>
+            <p className={styles.poorQualityValue}>{disposedCount.poorQuality?.length}</p>
           </div>
         )}
       </div>

package/src/core/components/card/metrics-card.scss

@@ -1,36 +1,41 @@
+@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 {
-  border: 0.0625rem solid $ui-03;
-  flex-grow: 1;
-  height: 7.875rem;
-  padding: 0 layout.$spacing-04;
   background-color: colors.$white;
+  border: 1px solid $ui-03;
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
+  height: 7.875rem;
   justify-content: space-between;
-  margin-bottom: 20px;
+  padding: layout.$spacing-05;
 }
+
 .tileHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: layout.$spacing-03;
 }
+
 .headerLabel {
   @include type.type-style('label-02');
   color: colors.$gray-70;
 }
+
 .totalsLabel {
   @include type.type-style('label-01');
   color: $text-02;
 }
+
 .totalsValue {
   @include type.type-style('heading-04');
   color: $ui-05;
 }
+
 .headerLabelContainer {
   display: flex;
   align-items: center;
@@ -38,26 +43,59 @@
   justify-content: space-between;
   width: 100%;
 }
+
 .link {
   text-decoration: none;
   display: flex;
   align-items: flex-end;
+  color: $interactive-01;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
 }
+
 .metricsGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  align-items: center;
 }
+
 .countGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-self: flex-end;
   column-gap: layout.$spacing-03;
+  align-items: center;
+
   & > span {
     font-size: 0.625rem !important;
     margin: 0;
-    color: colors.$gray-70;
   }
+
   & > p {
     margin: 0;
   }
 }
+
+.in6MonthsLabel,
+.belowMinLabel,
+.expiredLabel {
+  color: colors.$red-60;
+}
+
+.in6MonthsValue,
+.belowMinValue,
+.expiredValue {
+  color: colors.$red-60;
+}
+
+.aboveMaxLabel,
+.aboveMaxValue {
+  color: #319227;
+}
+
+.poorQualityLabel,
+.poorQualityValue {
+  color: #faba5f;
+}

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/dashboard/home-dashboard.scss

@@ -12,10 +12,6 @@
   margin: 0;
   margin-left: 16rem;
   background-color: colors.$gray-10;
-
-  & a {
-    width: 100%;
-  }
 }
 
 .dashboardContainerTablet {

package/src/index.ts

@@ -1,13 +1,11 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink';
+import appMenu from './stock-app-menu-item/item.component';
+import deletePackagingUnitModalButtonComponent from './stock-items/add-stock-item/packaging-units/packaging-units-delete-modal-button.component';
 import Root from './root.component';
 import SideMenu from './side-menu/side-menu.component';
-import appMenu from './stock-app-menu-item/item.component';
 import StockHomeLandingPage from './stock-home/stock-home-landing-page-component';
-import deletePackagingUnitModalButtonComponent from './stock-items/add-stock-item/packaging-units/packaging-units-delete-modal-button.component';
-import TransactionsBincardPrintPreview from './stock-items/add-stock-item/transactions/printout/transactions-print-bincard-preview.modal';
-import TransactionsStockcardPrintPreview from './stock-items/add-stock-item/transactions/printout/transactions-print-stockcard-preview.modal';
 import StockItems from './stock-items/stock-items.component';
 import StockLocations from './stock-locations/stock-locations.component';
 import stockManagementAdminCardLinkComponent from './stock-management-admin-card-link.component';
@@ -17,6 +15,8 @@ import StockReports from './stock-reports/report-list/stock-reports.component';
 import StockSettings from './stock-settings/stock-settings.component';
 import StockSources from './stock-sources/stock-sources.component';
 import StockUserScopes from './stock-user-role-scopes/stock-user-role-scopes.component';
+import TransactionsBincardPrintPreview from './stock-items/add-stock-item/transactions/printout/transactions-print-bincard-preview.modal';
+import TransactionsStockcardPrintPreview from './stock-items/add-stock-item/transactions/printout/transactions-print-stockcard-preview.modal';
 
 const moduleName = '@openmrs/esm-stock-management-app';
 
@@ -27,7 +27,59 @@ const options = {
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
+export const deleteStockModal = getAsyncLifecycle(() => import('./stock-sources/delete-stock-modal.component'), {
+  featureName: 'delete-stock-modal',
+  moduleName,
+});
+
+export const deleteUserScopeModal = getAsyncLifecycle(
+  () => import('./stock-user-role-scopes/delete-stock-user-scope-modal.component'),
+  {
+    featureName: 'delete-stock-user-scope-modal',
+    moduleName,
+  },
+);
+
+export const deletePackagingUnitModal = getAsyncLifecycle(
+  () => import('./stock-items/add-stock-item/packaging-units/packaging-units-delete-modal.component'),
+  {
+    featureName: 'delete-packaging-unit-modal',
+    moduleName,
+  },
+);
+
+export const deletePackagingUnitButton = getSyncLifecycle(deletePackagingUnitModalButtonComponent, {
+  featureName: 'delete-packaging-unit-button',
+  moduleName,
+});
+
+export const expiredStockModal = getAsyncLifecycle(() => import('./stock-home/expired-stock.modal'), {
+  featureName: 'expired-stock-modal',
+  moduleName,
+});
+
+export const importBulkStockItemsModal = getAsyncLifecycle(
+  () => import('./stock-items/add-bulk-stock-item/stock-items-bulk-import.component'),
+  {
+    featureName: 'import-bulk-stock-items-modal',
+    moduleName,
+  },
+);
+
+export const issuingStockModal = getAsyncLifecycle(() => import('./stock-home/issuing-stock.modal'), {
+  featureName: 'issuing-stock-modal',
+  moduleName,
+});
+
+export const root = getSyncLifecycle(Root, options);
+
+export const receivingStockModal = getAsyncLifecycle(() => import('./stock-home/receiving-stock.modal'), {
+  featureName: 'receiving-stock-modal',
+  moduleName,
+});
+
 export const stockManagementAdminCardLink = getSyncLifecycle(stockManagementAdminCardLinkComponent, options);
+
 export const stockNavMenu = getSyncLifecycle(SideMenu, options);
 
 // t("overview","Overview")
@@ -46,6 +98,7 @@ export const stockOperationsLink = getSyncLifecycle(
 
 // t("items","Items")
 export const stockItems = getSyncLifecycle(StockItems, options);
+
 export const stockItemsLink = getSyncLifecycle(createDashboardLink({ title: 'Items', name: 'items' }), options);
 
 // t("useScopes","User role scopes")
@@ -79,37 +132,6 @@ export const stockSettingsLink = getSyncLifecycle(
 
 export const stockManagement = getSyncLifecycle(stockManagementComponent, options);
 
-export const root = getSyncLifecycle(Root, options);
-
-export const deleteStockModal = getAsyncLifecycle(() => import('./stock-sources/delete-stock-modal.component'), {
-  featureName: 'delete-stock-modal',
-  moduleName,
-});
-
-export const deleteUserScopeModal = getAsyncLifecycle(
-  () => import('./stock-user-role-scopes/delete-stock-user-scope-modal.component'),
-  {
-    featureName: 'delete-stock-user-scope-modal',
-    moduleName,
-  },
-);
-
-export const deletePackagingUnitModal = getAsyncLifecycle(
-  () => import('./stock-items/add-stock-item/packaging-units/packaging-units-delete-modal.component'),
-  {
-    featureName: 'delete-packaging-unit-modal',
-    moduleName,
-  },
-);
-
-export const importBulkStockItemsModal = getAsyncLifecycle(
-  () => import('./stock-items/add-bulk-stock-item/stock-items-bulk-import.component'),
-  {
-    featureName: 'import-bulk-stock-items-modal',
-    moduleName,
-  },
-);
-
 export const stockOperationModal = getAsyncLifecycle(
   () => import('./stock-operations/stock-operations-dialog/stock-operations-dialog.component'),
   {
@@ -118,15 +140,8 @@ export const stockOperationModal = getAsyncLifecycle(
   },
 );
 
-export const deletePackagingUnitButton = getSyncLifecycle(deletePackagingUnitModalButtonComponent, {
-  featureName: 'delete-packaging-unit-button',
-  moduleName,
-});
-
 export const stockManagementAppMenuItem = getSyncLifecycle(appMenu, options);
 
-export const transactionBincardPrintPreviewModal = getSyncLifecycle(TransactionsBincardPrintPreview, options);
-export const transactionStockcardPrintPreviewModal = getSyncLifecycle(TransactionsStockcardPrintPreview, options);
 export const stockOperationFormWorkspace = getAsyncLifecycle(
   () => import('./stock-operations/stock-operations-forms/stock-operation-form.component'),
   options,
@@ -160,6 +175,10 @@ export const stockUserScopesFormWorkspace = getAsyncLifecycle(
   options,
 );
 
+export const transactionBincardPrintPreviewModal = getSyncLifecycle(TransactionsBincardPrintPreview, options);
+
+export const transactionStockcardPrintPreviewModal = getSyncLifecycle(TransactionsStockcardPrintPreview, options);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

package/src/routes.json

@@ -173,10 +173,18 @@
       "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"
@@ -214,7 +222,7 @@
       "width": "extra-wide"
     },
     {
-      "name" : "stock-sources-form-workspace",
+      "name": "stock-sources-form-workspace",
       "component": "stockSourcesFormWorkspace",
       "title": "Stock Sources",
       "type": "form",
@@ -222,7 +230,7 @@
       "width": "extra-wide"
     },
     {
-      "name" : "stock-location-form-workspace",
+      "name": "stock-location-form-workspace",
       "component": "stockLocationsFormWorkspace",
       "title": "Stock Locations",
       "type": "form",
@@ -230,7 +238,7 @@
       "width": "extra-wide"
     },
     {
-      "name" : "stock-user-role-scopes-form-workspace",
+      "name": "stock-user-role-scopes-form-workspace",
       "component": "stockUserScopesFormWorkspace",
       "title": "User Role Scopes",
       "type": "form",
@@ -238,7 +246,7 @@
       "width": "extra-wide"
     },
     {
-      "name" : "stock-reports-form-workspace",
+      "name": "stock-reports-form-workspace",
       "component": "stockReportsFormWorkspace",
       "title": "Reports",
       "type": "form",

package/src/stock-home/{stock-home-inventory-expiry.component.tsx → expired-stock.modal.tsx}

@@ -1,7 +1,25 @@
 import React from 'react';
-import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+import {
+  ModalBody,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+interface ExpiredStockModalProps {
+  closeModal: () => void;
+  expiredStock: any[];
+}
+
+const ExpiredStockModal = ({ closeModal, expiredStock }: ExpiredStockModalProps) => {
+  const { t } = useTranslation();
 
-const ExpiredStockModal = ({ open, onClose, expiredStock }) => {
   const headers = [
     { key: 'drugName', header: 'Drug Name' },
     { key: 'batchNo', header: 'Batch No' },
@@ -21,15 +39,9 @@ const ExpiredStockModal = ({ open, onClose, expiredStock }) => {
   };
 
   return (
-    <Modal
-      open={open}
-      onRequestClose={onClose}
-      modalHeading="Expired Stock"
-      primaryButtonText="Close"
-      onSecondarySubmit={onClose}
-      size="lg"
-    >
-      <div>
+    <>
+      <ModalHeader closeModal={closeModal} title={t('expiredStock', 'Expired stock')} />
+      <ModalBody>
         {expiredStock.length > 0 ? (
           <TableContainer>
             <Table>
@@ -54,10 +66,10 @@ const ExpiredStockModal = ({ open, onClose, expiredStock }) => {
             </Table>
           </TableContainer>
         ) : (
-          <p>No expired stock data available.</p>
+          <p>{t('noExpiredStockDataAvailable', 'No expired stock data available.')}</p>
         )}
-      </div>
-    </Modal>
+      </ModalBody>
+    </>
   );
 };
 

package/src/stock-home/{stock-home-issuing-modal.component.tsx → issuing-stock.modal.tsx}

@@ -1,7 +1,25 @@
 import React from 'react';
-import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+import {
+  ModalBody,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+interface IssuingStockModalProps {
+  issuingStock: any[];
+  closeModal: () => void;
+}
+
+const IssuingStockModal = ({ issuingStock, closeModal }: IssuingStockModalProps) => {
+  const { t } = useTranslation();
 
-const IssuingStockModal = ({ open, onClose, issuingStock }) => {
   const headers = [
     { key: 'status', header: 'Status' },
     { key: 'sourceName', header: 'Source' },
@@ -12,15 +30,9 @@ const IssuingStockModal = ({ open, onClose, issuingStock }) => {
   ];
 
   return (
-    <Modal
-      open={open}
-      onRequestClose={onClose}
-      modalHeading="Issued Stock"
-      primaryButtonText="Close"
-      onSecondarySubmit={onClose}
-      size="lg"
-    >
-      <div>
+    <>
+      <ModalHeader closeModal={closeModal} title={t('issuedStock', 'Issued stock')} />
+      <ModalBody>
         {issuingStock && issuingStock.length > 0 ? (
           <TableContainer>
             <Table>
@@ -46,10 +58,10 @@ const IssuingStockModal = ({ open, onClose, issuingStock }) => {
             </Table>
           </TableContainer>
         ) : (
-          <p>No issued stock data available.</p>
+          <p>{t('noIssuedStockDataAvailable', 'No issued stock data available.')}</p>
         )}
-      </div>
-    </Modal>
+      </ModalBody>
+    </>
   );
 };
 

package/src/stock-home/{stock-home-receiving-modal.component.tsx → receiving-stock.modal.tsx}

@@ -1,26 +1,33 @@
 import React from 'react';
-import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+import {
+  ModalBody,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+const ReceivingStockModal = ({ closeModal, receivingStock }) => {
+  const { t } = useTranslation();
 
-const ReceivingStockModal = ({ open, onClose, receivingStock }) => {
   const headers = [
-    { key: 'status', header: 'Status' },
-    { key: 'sourceName', header: 'Source' },
-    { key: 'destinationName', header: 'Destination' },
-    { key: 'stockItemName', header: 'Stock Item' },
-    { key: 'stockItemPackagingUOMName', header: 'Unit' },
-    { key: 'quantity', header: 'Quantity' },
+    { key: 'status', header: t('status', 'Status') },
+    { key: 'sourceName', header: t('source', 'Source') },
+    { key: 'destinationName', header: t('destination', 'Destination') },
+    { key: 'stockItemName', header: t('stockItem', 'Stock Item') },
+    { key: 'stockItemPackagingUOMName', header: t('unit', 'Unit') },
+    { key: 'quantity', header: t('quantity', 'Quantity') },
   ];
 
   return (
-    <Modal
-      open={open}
-      onRequestClose={onClose}
-      modalHeading="Received Stock"
-      primaryButtonText="Close"
-      onSecondarySubmit={onClose}
-      size="lg"
-    >
-      <div>
+    <>
+      <ModalHeader closeModal={closeModal} title={t('receivedStock', 'Received stock')} />
+      <ModalBody>
         {receivingStock && receivingStock.length > 0 ? (
           <TableContainer>
             <Table>
@@ -48,10 +55,10 @@ const ReceivingStockModal = ({ open, onClose, receivingStock }) => {
             </Table>
           </TableContainer>
         ) : (
-          <p>No received stock data available.</p>
+          <p>{t('noReceivedStockDataAvailable', 'No received stock data available.')}</p>
         )}
-      </div>
-    </Modal>
+      </ModalBody>
+    </>
   );
 };