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

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/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>
+    </>
   );
 };
 

package/src/stock-home/stock-home-detail-card.scss

@@ -1,9 +1,10 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: 2rem 0;
+  margin: layout.$spacing-07 0;
 }
 
 .emptyStateContainer,
@@ -12,13 +13,9 @@
 }
 
 .tilesContainer {
-  background-color: $ui-02;
   border: 1px solid $ui-03;
-  border-bottom: none;
+  min-height: 7.875rem;
   width: 100%;
-  margin: 0 auto;
-  max-width: 95vw;
-  padding-bottom: 0;
 }
 
 .headerContainer {
@@ -92,13 +89,13 @@
   @include type.type-style('heading-compact-01');
   color: $text-02;
   margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading,
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
 
   h4 {
     @include type.type-style('heading-compact-02');
@@ -115,11 +112,6 @@
   }
 }
 
-.tile {
-  text-align: center;
-  border: 1px solid $ui-03;
-}
-
 .filterEmptyState {
   display: flex;
   justify-content: center;
@@ -146,24 +138,26 @@
 
 .cardContainer {
   display: flex;
-  margin: 0 auto;
+  padding: layout.$spacing-05;
+  background-color: #ffffff;
+  flex-flow: row wrap;
+  flex-grow: 1;
+  gap: layout.$spacing-05;
+  align-items: stretch;
 }
 
 .cardContainer > * {
-  flex: 1;
-  margin: 8px 8px;
-}
-
-.cardContainerBig {
-  display: flex;
-  flex-direction: column;
+  flex: 1 1 0;
+  height: 100%;
 }
 
 .card {
   display: flex;
-  border: 1px solid #ccc;
+  flex-direction: column;
   margin: 10px;
-  background-color: #f4f4f4;
+  background-color: colors.$gray-10;
+  height: 100%;
+  justify-content: space-between;
 }
 
 .icon {
@@ -172,31 +166,31 @@
 
 .colorLineYellow {
   width: 5px;
-  background-color: #f1c21b;
+  background-color: colors.$yellow-30;
   margin-right: 10px;
 }
 
 .colorLineBlue {
   width: 5px;
-  background-color: #0f62fe;
+  background-color: colors.$blue-60;
   margin-right: 10px;
 }
 
 .colorLineOrange {
   width: 5px;
-  background-color: #ff832b;
+  background-color: colors.$orange-40;
   margin-right: 10px;
 }
 
 .colorLineGreen {
   width: 5px;
-  background-color: #198038;
+  background-color: colors.$green-60;
   margin-right: 10px;
 }
 
 .colorLineRed {
   width: 5px;
-  background-color: #da1e28;
+  background-color: colors.$red-60;
   margin-right: 10px;
 }
 
@@ -206,6 +200,6 @@
 }
 
 .cardText p {
-  font-size: 0.9em;
-  color: #525252;
+  font-size: layout.$spacing-05;
+  color: colors.$gray-70;
 }