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

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-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]);