From 808e09d379a386146b736d42a8f5937aa5146348 Mon Sep 17 00:00:00 2001 From: samdev Date: Fri, 13 Dec 2024 09:29:09 +0300 Subject: [PATCH 1/2] add batch no and quantity to inventory alerts --- src/stock-home/stock-home-inventory-card.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stock-home/stock-home-inventory-card.component.tsx b/src/stock-home/stock-home-inventory-card.component.tsx index 1b07b3dc..03864568 100644 --- a/src/stock-home/stock-home-inventory-card.component.tsx +++ b/src/stock-home/stock-home-inventory-card.component.tsx @@ -52,7 +52,8 @@ const StockHomeInventoryCard = () => {

EXPIRING STOCK

- {item?.drugName} {item?.dispensingUnitName} + {item?.drugName} Batch No: {item?.batchNo} Quantity: {item?.quantity}{' '} + {item?.dispensingUnitName}

From 0cb00132dd8f675846d910d87da609d2117bdbd3 Mon Sep 17 00:00:00 2001 From: samdev Date: Fri, 13 Dec 2024 14:22:09 +0300 Subject: [PATCH 2/2] fixed view all on stock management dashboard --- .../stock-home-inventory-card.component.tsx | 14 +++- .../stock-home-inventory-expiry.component.tsx | 64 +++++++++++++++++++ .../stock-home-issuing-card.component.tsx | 12 +++- .../stock-home-issuing-modal.component.tsx | 56 ++++++++++++++++ .../stock-home-receiving-card.component.tsx | 12 +++- .../stock-home-receiving-modal.component.tsx | 58 +++++++++++++++++ 6 files changed, 210 insertions(+), 6 deletions(-) create mode 100644 src/stock-home/stock-home-inventory-expiry.component.tsx create mode 100644 src/stock-home/stock-home-issuing-modal.component.tsx create mode 100644 src/stock-home/stock-home-receiving-modal.component.tsx diff --git a/src/stock-home/stock-home-inventory-card.component.tsx b/src/stock-home/stock-home-inventory-card.component.tsx index 03864568..fcc4cfa2 100644 --- a/src/stock-home/stock-home-inventory-card.component.tsx +++ b/src/stock-home/stock-home-inventory-card.component.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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) { @@ -58,7 +61,7 @@ const StockHomeInventoryCard = () => { ))} - */} + + + + {/* Expired Stock Modal */} + setModalOpen(false)} expiredStock={mergedArray} /> ); }; diff --git a/src/stock-home/stock-home-inventory-expiry.component.tsx b/src/stock-home/stock-home-inventory-expiry.component.tsx new file mode 100644 index 00000000..a7d03e31 --- /dev/null +++ b/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 ( + +
+ {expiredStock.length > 0 ? ( + + + + + {headers.map((header) => ( + {header.header} + ))} + + + + {expiredStock.map((item, index) => ( + + {item?.drugName || 'N/A'} + {item?.batchNo || 'N/A'} + {item?.quantity || 'N/A'} + {item?.dispensingUnitName || 'N/A'} + {formatDate(item?.expiration)} + + ))} + +
+ + ) : ( +

No expired stock data available.

+ )} +
+ + ); +}; + +export default ExpiredStockModal; diff --git a/src/stock-home/stock-home-issuing-card.component.tsx b/src/stock-home/stock-home-issuing-card.component.tsx index a885baa8..01d86124 100644 --- a/src/stock-home/stock-home-issuing-card.component.tsx +++ b/src/stock-home/stock-home-issuing-card.component.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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 = () => { ))} - */} + + + setModalOpen(false)} issuingStock={items} /> ); }; diff --git a/src/stock-home/stock-home-issuing-modal.component.tsx b/src/stock-home/stock-home-issuing-modal.component.tsx new file mode 100644 index 00000000..f405a7f1 --- /dev/null +++ b/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 ( + +
+ {issuingStock && issuingStock.length > 0 ? ( + + + + + {headers.map((header) => ( + {header.header} + ))} + + + + {issuingStock.map((item, index) => ( + + {item?.status || 'N/A'} + {item?.sourceName || 'N/A'} + {item?.destinationName || 'N/A'} + {item?.stockItemName || 'N/A'} + {item?.stockItemPackagingUOMName || 'N/A'} + {item?.quantity || 'N/A'} + + ))} + +
+ + ) : ( +

No issued stock data available.

+ )} +
+ + ); +}; + +export default IssuingStockModal; diff --git a/src/stock-home/stock-home-receiving-card.component.tsx b/src/stock-home/stock-home-receiving-card.component.tsx index 32ac5700..dd711cbc 100644 --- a/src/stock-home/stock-home-receiving-card.component.tsx +++ b/src/stock-home/stock-home-receiving-card.component.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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 = () => { )), )} - */} + + + setModalOpen(false)} receivingStock={items} /> ); }; diff --git a/src/stock-home/stock-home-receiving-modal.component.tsx b/src/stock-home/stock-home-receiving-modal.component.tsx new file mode 100644 index 00000000..cc6616e5 --- /dev/null +++ b/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 ( + +
+ {receivingStock && receivingStock.length > 0 ? ( + + + + + {headers.map((header) => ( + {header.header} + ))} + + + + {receivingStock.map((item, index) => + item?.stockOperationItems.map((stock, stockIndex) => ( + + {item?.status || 'N/A'} + {item?.sourceName || 'N/A'} + {item?.destinationName || 'N/A'} + {stock?.stockItemName || 'N/A'} + {stock?.stockItemPackagingUOMName || 'N/A'} + {stock?.quantity || 'N/A'} + + )), + )} + +
+ + ) : ( +

No received stock data available.

+ )} +
+ + ); +}; + +export default ReceivingStockModal;