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

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;
 }

package/src/stock-home/stock-home-detail-cards.component.tsx

@@ -1,48 +1,49 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Layer, Tile } from '@carbon/react';
 import { useLayoutType } from '@openmrs/esm-framework';
 import StockHomeInventoryCard from './stock-home-inventory-card.component';
-import StockHomeReceivingCard from './stock-home-receiving-card.component';
 import StockHomeIssuingCard from './stock-home-issuing-card.component';
-import { Layer, Tile } from '@carbon/react';
+import StockHomeReceivingCard from './stock-home-receiving-card.component';
 import styles from './stock-home-detail-card.scss';
 
-const StockHomeDetailCards = () => {
+interface DetailCardProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const DetailCard: React.FC<DetailCardProps> = ({ title, children }) => {
   const isTablet = useLayoutType() === 'tablet';
+  const responsiveStyles = isTablet ? styles.tabletHeading : styles.desktopHeading;
+
+  return (
+    <div className={styles.tilesContainer}>
+      <Layer>
+        <Tile>
+          <div className={responsiveStyles}>
+            <h4>{title}</h4>
+          </div>
+          {children}
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+const StockHomeDetailCards: React.FC = () => {
   const { t } = useTranslation();
 
   return (
     <div className={styles.cardContainer}>
-      <div className={styles.tilesContainer}>
-        <Layer>
-          <Tile>
-            <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-              <h4>{t('inventory Alerts', 'Inventory Alerts')}</h4>
-            </div>
-            <StockHomeInventoryCard />
-          </Tile>
-        </Layer>
-      </div>
-      <div className={styles.tilesContainer}>
-        <Layer>
-          <Tile>
-            <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-              <h4>{t('receiving', 'Receiving')}</h4>
-            </div>
-            <StockHomeReceivingCard />
-          </Tile>
-        </Layer>
-      </div>
-      <div className={styles.tilesContainer}>
-        <Layer>
-          <Tile>
-            <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-              <h4>{t('issuing', 'Issuing')}</h4>
-            </div>
-            <StockHomeIssuingCard />
-          </Tile>
-        </Layer>
-      </div>
+      <DetailCard title={t('inventoryAlerts', 'Inventory alerts')}>
+        <StockHomeInventoryCard />
+      </DetailCard>
+      <DetailCard title={t('receiving', 'Receiving')}>
+        <StockHomeReceivingCard />
+      </DetailCard>
+      <DetailCard title={t('issuing', 'Issuing')}>
+        <StockHomeIssuingCard />
+      </DetailCard>
     </div>
   );
 };

package/src/stock-home/stock-home-inventory-card.component.tsx

@@ -1,30 +1,23 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { navigate, useLayoutType } from '@openmrs/esm-framework';
-import styles from './stock-home-detail-card.scss';
 import { WarningHex } from '@carbon/react/icons';
+import { showModal } from '@openmrs/esm-framework';
 import { useStockInventory } from './stock-home-inventory-expiry.resource';
 import { useStockInventoryItems } from './stock-home-inventory-items.resource';
-import ExpiredStockModal from './stock-home-inventory-expiry.component';
+import styles from './stock-home-detail-card.scss';
 
 const StockHomeInventoryCard = () => {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-
   const { items: expiryItems, isLoading: inventoryLoading } = useStockInventory();
   const { items: stockItems, isLoading } = useStockInventoryItems();
 
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  if (isLoading || inventoryLoading) return <></>;
+  if (isLoading || inventoryLoading) {
+    return null;
+  }
 
   if (stockItems?.length === 0) {
-    return (
-      <>
-        <p className={styles.content}>{t('inventoryAlertNull', 'No inventory alerts to display')}</p>
-      </>
-    );
+    return <p>{t('noInventoryAlerts', 'No inventory alerts to display')}</p>;
   }
 
   const currentDate = new Date();
@@ -44,6 +37,13 @@ const StockHomeInventoryCard = () => {
     })
     .slice(0, 5);
 
+  const launchExpiredStockModal = () => {
+    const dispose = showModal('expired-stock-modal', {
+      closeModal: () => dispose(),
+      expiredStock: mergedArray,
+    });
+  };
+
   return (
     <>
       {filteredData.map((item, index) => (
@@ -53,31 +53,17 @@ const StockHomeInventoryCard = () => {
             <WarningHex size={40} color={'#DA1E28'} />
           </div>
           <div className={styles.cardText}>
-            <p>EXPIRING STOCK</p>
+            <p>{t('expiringStock', 'Expiring stock')}</p>
             <p>
-              <strong>{item?.drugName}</strong> Batch No: {item?.batchNo} Quantity: {item?.quantity}{' '}
-              {item?.dispensingUnitName}
+              <strong>{item?.drugName}</strong> {t('batchNo', 'Batch No:')} {item?.batchNo} {t('quantity', 'Quantity:')}{' '}
+              {item?.quantity} {item?.dispensingUnitName}
             </p>
           </div>
         </div>
       ))}
-      {/* <Button
-        onClick={() => {
-          navigate({
-            to: `${window.getOpenmrsSpaBase()}stock-management/expired-stock`,
-          });
-        }}
-        kind="ghost"
-      >
-        View All
-      </Button> */}
-
-      <Button onClick={() => setModalOpen(true)} kind="ghost">
-        View All
+      <Button kind="ghost" onClick={launchExpiredStockModal} size="sm">
+        {t('viewAll', 'View All')}
       </Button>
-
-      {/* Expired Stock Modal */}
-      <ExpiredStockModal open={isModalOpen} onClose={() => setModalOpen(false)} expiredStock={mergedArray} />
     </>
   );
 };

package/src/stock-home/{stock-home-inventory-expiry.resource.tsx → stock-home-inventory-expiry.resource.ts}

@@ -1,11 +1,6 @@
 import { ResourceRepresentation } from '../core/api/api';
-import { useEffect, useMemo, useState } from 'react';
-import {
-  type StockBatchFilter,
-  StockItemInventoryFilter,
-  useStockBatches,
-  useStockItemInventory,
-} from '../stock-items/stock-items.resource';
+import { useEffect, useState } from 'react';
+import { type StockBatchFilter, useStockBatches } from '../stock-items/stock-items.resource';
 
 export function useStockInventory() {
   const [stockItemFilter, setStockItemFilter] = useState<StockBatchFilter>({

package/src/stock-home/{stock-home-inventory-items.resource.tsx → stock-home-inventory-items.resource.ts}

@@ -1,6 +1,7 @@
-import { type StockItemFilter, useStockItems } from '../stock-items/stock-items.resource';
 import { useEffect, useState } from 'react';
+import { type StockItemFilter, useStockItems } from '../stock-items/stock-items.resource';
 import { ResourceRepresentation } from '../core/api/api';
+
 export function useStockInventoryItems(v?: ResourceRepresentation) {
   const [stockItemFilter, setStockItemFilter] = useState<StockItemFilter>({
     v: v || ResourceRepresentation.Default,

package/src/stock-home/stock-home-issuing-card.component.tsx

@@ -1,32 +1,26 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { navigate, useLayoutType } from '@openmrs/esm-framework';
-import styles from './stock-home-detail-card.scss';
 import { ResourceRepresentation } from '../core/api/api';
-import { DocumentImport } from '@carbon/react/icons';
+import { DocumentImport, View } from '@carbon/react/icons';
+import { showModal } from '@openmrs/esm-framework';
 import { useStockIssuing } from './stock-home-issuing.resource';
-import IssuingStockModal from './stock-home-issuing-modal.component';
+import styles from './stock-home-detail-card.scss';
 
 const StockHomeIssuingCard = () => {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
 
   const { items, isLoading } = useStockIssuing({
     v: ResourceRepresentation.Full,
     totalCount: true,
   });
 
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  if (isLoading) return <></>;
+  if (isLoading) {
+    return null;
+  }
 
   if (items?.length === 0) {
-    return (
-      <>
-        <p className={styles.content}>{t('issuingNull', 'No issued to display')}</p>
-      </>
-    );
+    return <p className={styles.content}>{t('noIssuedStock', 'No issued stock to display')}</p>;
   }
 
   const itemsToDisplay = items?.map((item, index) => {
@@ -49,6 +43,13 @@ const StockHomeIssuingCard = () => {
 
   const flattenedItemsToDisplay = itemsToDisplay?.flat().slice(0, 10);
 
+  const launchIssuingStockModal = () => {
+    const dispose = showModal('issuing-stock-modal', {
+      closeModal: () => dispose(),
+      issuingStock: items,
+    });
+  };
+
   return (
     <>
       {flattenedItemsToDisplay?.map((item, index) => (
@@ -67,21 +68,9 @@ const StockHomeIssuingCard = () => {
           </div>
         </div>
       ))}
-      {/* <Button
-        onClick={() => {
-          navigate({
-            to: `${window.getOpenmrsSpaBase()}stock-management/requisitions`,
-          });
-        }}
-        kind="ghost"
-      >
-        View All
-      </Button> */}
-      <Button onClick={() => setModalOpen(true)} kind="ghost">
-        View All
+      <Button kind="ghost" onClick={launchIssuingStockModal} size="sm">
+        {t('viewAll', 'View All')}
       </Button>
-
-      <IssuingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} issuingStock={items} />
     </>
   );
 };

package/src/stock-home/stock-home-landing-page-component.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { StockManagementHeader } from '../stock-management-header/stock-management-header.component';
-import StockManagementMetrics from './stock-home-metrics';
 import StockHomeDetailCards from './stock-home-detail-cards.component';
+import StockManagementMetrics from './stock-home-metrics.component';
 
 export default function StockHomeLandingPage() {
-  const basePath = `${window.getOpenmrsSpaBase()}stock-management`;
   return (
     <div style={{ backgroundColor: 'white' }}>
       <StockManagementMetrics />

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

@@ -2,19 +2,17 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineLoading } from '@carbon/react';
 import { ErrorState } from '@openmrs/esm-framework';
-import styles from './stock-home.scss';
-import MetricsCard from '../core/components/card/metrics-card-component';
-import useStockList from './useStockList';
-
-import { type StockOperationFilter } from '../stock-operations/stock-operations.resource';
 import { useDisposalList } from './useDisposalList';
 import { ResourceRepresentation } from '../core/api/api';
 import { useStockInventoryItems } from './stock-home-inventory-items.resource';
 import { useStockInventory } from './stock-home-inventory-expiry.resource';
+import { type StockOperationFilter } from '../stock-operations/stock-operations.resource';
+import useStockList from './useStockList';
+import MetricsCard from '../core/components/card/metrics-card-component';
+import styles from './stock-home.scss';
 
 const StockManagementMetrics: React.FC = (filter: StockOperationFilter) => {
   const { t } = useTranslation();
-
   const { stockList: allStocks, isLoading, error } = useStockList();
   const { items: expiryItems, isLoading: inventoryLoading } = useStockInventory();
   const { items: stockItems } = useStockInventoryItems();
@@ -45,48 +43,47 @@ const StockManagementMetrics: React.FC = (filter: StockOperationFilter) => {
   if (isLoading) {
     return <InlineLoading role="progressbar" description={t('loading', 'Loading...')} />;
   }
+
   if (error) {
     return <ErrorState headerTitle={t('errorStockMetric', 'Error fetching stock metrics')} error={error} />;
   }
 
   const filteredItems =
     items && items.filter((item) => item.reasonName === 'Drug not available due to expired medication');
-  const filteredItemsPoorquality = items && items.filter((item) => item.reasonName === 'Poor Quality');
+  const poorQualityItems = items && items.filter((item) => item.reasonName === 'Poor Quality');
 
   return (
-    <>
-      <div className={styles.cardContainer}>
-        <MetricsCard
-          label={t('stocks', 'Expiring stock')}
-          value={filteredData?.length || 0}
-          headerLabel={t('expiringStock', 'Expiring Stock')}
-          view="items"
-          count={{
-            expiry6months: sixMonthsExpiryStocks,
-          }}
-        />
-        <MetricsCard
-          label={t('outofstock', 'Out of Stock')}
-          value={allStocks?.length}
-          headerLabel={t('highestServiceVolume', 'Out of Stock ')}
-          view="items"
-          outofstockCount={{
-            itemsbelowmin: [],
-            itemsabovemax: [],
-          }}
-        />
-        <MetricsCard
-          label={t('disposedstock', 'Disposed Stock')}
-          value={items?.length || 0}
-          headerLabel={t('providersAvailableToday', 'Disposed Stock ')}
-          view="items"
-          disposedCount={{
-            expired: filteredItems,
-            poorquality: filteredItemsPoorquality,
-          }}
-        />
-      </div>
-    </>
+    <div className={styles.cardContainer}>
+      <MetricsCard
+        count={{
+          expiry6months: sixMonthsExpiryStocks,
+        }}
+        headerLabel={t('expiringStock', 'Expiring stock')}
+        label={t('expiringStock', 'Expiring stock')}
+        value={filteredData?.length || 0}
+        view="items"
+      />
+      <MetricsCard
+        label={t('outOfStock', 'Out of stock')}
+        headerLabel={t('outOfStock', 'Out of stock')}
+        outOfStockCount={{
+          itemsBelowMin: [],
+          itemsAboveMax: [],
+        }}
+        value={allStocks?.length}
+        view="items"
+      />
+      <MetricsCard
+        disposedCount={{
+          expired: filteredItems,
+          poorQuality: poorQualityItems,
+        }}
+        headerLabel={t('disposedStock', 'Disposed stock')}
+        label={t('disposedStock', 'Disposed stock')}
+        value={items?.length || 0}
+        view="items"
+      />
+    </div>
   );
 };
 export default StockManagementMetrics;

package/src/stock-home/stock-home-receiving-card.component.tsx

@@ -1,34 +1,35 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { navigate, useLayoutType } from '@openmrs/esm-framework';
-import styles from './stock-home-detail-card.scss';
 import { Delivery } from '@carbon/react/icons';
+import { showModal } from '@openmrs/esm-framework';
 import { ResourceRepresentation } from '../core/api/api';
 import { useStockReceiving } from './stock-home-receiving.resource';
-import ReceivingStockModal from './stock-home-receiving-modal.component';
+import styles from './stock-home-detail-card.scss';
 
 const StockHomeReceivingCard = () => {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
 
   const { items, isLoading } = useStockReceiving({
     v: ResourceRepresentation.Full,
     totalCount: true,
   });
 
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  if (isLoading) return <></>;
+  if (isLoading) {
+    return null;
+  }
 
   if (items?.length === 0) {
-    return (
-      <>
-        <p className={styles.content}>{t('receivedNull', 'No received to display')}</p>
-      </>
-    );
+    return <p className={styles.content}>{t('noReceivedStock', 'No received stock to display')}</p>;
   }
 
+  const launchReceivingStockModal = () => {
+    const dispose = showModal('receiving-stock-modal', {
+      closeModal: () => dispose(),
+      receivingStock: items,
+    });
+  };
+
   return (
     <>
       {items?.map((item, index) =>
@@ -49,21 +50,9 @@ const StockHomeReceivingCard = () => {
           </div>
         )),
       )}
-      {/* <Button
-        onClick={() => {
-          navigate({
-            to: `${window.getOpenmrsSpaBase()}stock-management/orders`,
-          });
-        }}
-        kind="ghost"
-      >
-        {t('receivedView', 'View All')}
-      </Button> */}
-      <Button onClick={() => setModalOpen(true)} kind="ghost">
-        {t('receivedView', 'View All')}
+      <Button kind="ghost" onClick={launchReceivingStockModal} size="sm">
+        {t('viewAll', 'View All')}
       </Button>
-
-      <ReceivingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} receivingStock={items} />
     </>
   );
 };

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

@@ -1,13 +1,13 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/colors';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 .cardContainer {
   background-color: colors.$white;
   display: flex;
-  justify-content: space-between;
-  margin: 0 layout.$spacing-05 0 layout.$spacing-05;
   flex-flow: row wrap;
-  column-gap: layout.$spacing-05;
-  row-gap: layout.$spacing-05;
+  gap: layout.$spacing-05;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
 }

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/add-stock-item/stock-item-rules/add-stock-rule-button.component.tsx

@@ -12,7 +12,7 @@ const AddStockRuleActionButton: React.FC<AddStockRuleActionButtonProps> = ({ sto
 
   const handleClick = useCallback(() => {
     launchWorkspace('stock-item-rules-form-workspace', {
-      workspaceTitle: t('addStockRule', 'Add Stock Rule'),
+      workspaceTitle: t('addStockRule', 'Add stock rule'),
       stockItemUuid,
     });
   }, [stockItemUuid, t]);