(Fix) FIxed the view all tabs on stock management dashboard , under inventory alerts, issuing and receiving

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } 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 { useStockInventory } from './stock-home-inventory-expiry.resource';
 import { useStockInventoryItems } from './stock-home-inventory-items.resource';
+import ExpiredStockModal from './stock-home-inventory-expiry.component';
 
 const StockHomeInventoryCard = () => {
   const { t } = useTranslation();
@@ -14,6 +15,8 @@ const StockHomeInventoryCard = () => {
   const { items: expiryItems, isLoading: inventoryLoading } = useStockInventory();
   const { items: stockItems, isLoading } = useStockInventoryItems();
 
+  const [isModalOpen, setModalOpen] = useState(false);
+
   if (isLoading || inventoryLoading) return <></>;
 
   if (stockItems?.length === 0) {
@@ -52,12 +55,13 @@ const StockHomeInventoryCard = () => {
           <div className={styles.cardText}>
             <p>EXPIRING STOCK</p>
             <p>
-              <strong>{item?.drugName}</strong> {item?.dispensingUnitName}
+              <strong>{item?.drugName}</strong> Batch No: {item?.batchNo} Quantity: {item?.quantity}{' '}
+              {item?.dispensingUnitName}
             </p>
           </div>
         </div>
       ))}
-      <Button
+      {/* <Button
         onClick={() => {
           navigate({
             to: `${window.getOpenmrsSpaBase()}stock-management/expired-stock`,
@@ -66,7 +70,14 @@ const StockHomeInventoryCard = () => {
         kind="ghost"
       >
         View All
+      </Button> */}
+
+      <Button onClick={() => setModalOpen(true)} kind="ghost">
+        View All
       </Button>
+
+      {/* Expired Stock Modal */}
+      <ExpiredStockModal open={isModalOpen} onClose={() => setModalOpen(false)} expiredStock={mergedArray} />
     </>
   );
 };

src/stock-home/stock-home-inventory-expiry.component.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+
+const ExpiredStockModal = ({ open, onClose, expiredStock }) => {
+  const headers = [
+    { key: 'drugName', header: 'Drug Name' },
+    { key: 'batchNo', header: 'Batch No' },
+    { key: 'quantity', header: 'Quantity' },
+    { key: 'dispensingUnitName', header: 'Unit' },
+    { key: 'expiration', header: 'Expiration Date' },
+  ];
+
+  const formatDate = (dateString) => {
+    if (!dateString) return 'N/A';
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('en-GB', {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    }).format(date);
+  };
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={onClose}
+      modalHeading="Expired Stock"
+      primaryButtonText="Close"
+      onSecondarySubmit={onClose}
+      size="lg"
+    >
+      <div>
+        {expiredStock.length > 0 ? (
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {expiredStock.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{item?.drugName || 'N/A'}</TableCell>
+                    <TableCell>{item?.batchNo || 'N/A'}</TableCell>
+                    <TableCell>{item?.quantity || 'N/A'}</TableCell>
+                    <TableCell>{item?.dispensingUnitName || 'N/A'}</TableCell>
+                    <TableCell>{formatDate(item?.expiration)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <p>No expired stock data available.</p>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ExpiredStockModal;

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } 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 { useStockIssuing } from './stock-home-issuing.resource';
+import IssuingStockModal from './stock-home-issuing-modal.component';
 
 const StockHomeIssuingCard = () => {
   const { t } = useTranslation();
@@ -16,6 +17,8 @@ const StockHomeIssuingCard = () => {
     totalCount: true,
   });
 
+  const [isModalOpen, setModalOpen] = useState(false);
+
   if (isLoading) return <></>;
 
   if (items?.length === 0) {
@@ -64,7 +67,7 @@ const StockHomeIssuingCard = () => {
           </div>
         </div>
       ))}
-      <Button
+      {/* <Button
         onClick={() => {
           navigate({
             to: `${window.getOpenmrsSpaBase()}stock-management/requisitions`,
@@ -73,7 +76,12 @@ const StockHomeIssuingCard = () => {
         kind="ghost"
       >
         View All
+      </Button> */}
+      <Button onClick={() => setModalOpen(true)} kind="ghost">
+        View All
       </Button>
+
+      <IssuingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} issuingStock={items} />
     </>
   );
 };

src/stock-home/stock-home-issuing-modal.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+
+const IssuingStockModal = ({ open, onClose, issuingStock }) => {
+  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' },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={onClose}
+      modalHeading="Issued Stock"
+      primaryButtonText="Close"
+      onSecondarySubmit={onClose}
+      size="lg"
+    >
+      <div>
+        {issuingStock && issuingStock.length > 0 ? (
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {issuingStock.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{item?.status || 'N/A'}</TableCell>
+                    <TableCell>{item?.sourceName || 'N/A'}</TableCell>
+                    <TableCell>{item?.destinationName || 'N/A'}</TableCell>
+                    <TableCell>{item?.stockItemName || 'N/A'}</TableCell>
+                    <TableCell>{item?.stockItemPackagingUOMName || 'N/A'}</TableCell>
+                    <TableCell>{item?.quantity || 'N/A'}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <p>No issued stock data available.</p>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default IssuingStockModal;

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } 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 { ResourceRepresentation } from '../core/api/api';
 import { useStockReceiving } from './stock-home-receiving.resource';
+import ReceivingStockModal from './stock-home-receiving-modal.component';
 
 const StockHomeReceivingCard = () => {
   const { t } = useTranslation();
@@ -16,6 +17,8 @@ const StockHomeReceivingCard = () => {
     totalCount: true,
   });
 
+  const [isModalOpen, setModalOpen] = useState(false);
+
   if (isLoading) return <></>;
 
   if (items?.length === 0) {
@@ -46,7 +49,7 @@ const StockHomeReceivingCard = () => {
           </div>
         )),
       )}
-      <Button
+      {/* <Button
         onClick={() => {
           navigate({
             to: `${window.getOpenmrsSpaBase()}stock-management/orders`,
@@ -55,7 +58,12 @@ const StockHomeReceivingCard = () => {
         kind="ghost"
       >
         {t('receivedView', 'View All')}
+      </Button> */}
+      <Button onClick={() => setModalOpen(true)} kind="ghost">
+        {t('receivedView', 'View All')}
       </Button>
+
+      <ReceivingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} receivingStock={items} />
     </>
   );
 };

src/stock-home/stock-home-receiving-modal.component.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
+
+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' },
+  ];
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={onClose}
+      modalHeading="Received Stock"
+      primaryButtonText="Close"
+      onSecondarySubmit={onClose}
+      size="lg"
+    >
+      <div>
+        {receivingStock && receivingStock.length > 0 ? (
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {receivingStock.map((item, index) =>
+                  item?.stockOperationItems.map((stock, stockIndex) => (
+                    <TableRow key={`${index}-${stockIndex}`}>
+                      <TableCell>{item?.status || 'N/A'}</TableCell>
+                      <TableCell>{item?.sourceName || 'N/A'}</TableCell>
+                      <TableCell>{item?.destinationName || 'N/A'}</TableCell>
+                      <TableCell>{stock?.stockItemName || 'N/A'}</TableCell>
+                      <TableCell>{stock?.stockItemPackagingUOMName || 'N/A'}</TableCell>
+                      <TableCell>{stock?.quantity || 'N/A'}</TableCell>
+                    </TableRow>
+                  )),
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <p>No received stock data available.</p>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ReceivingStockModal;