Skip to content

Commit b2d97a9

Browse files
samsonmwanziasamsonmwanzia
authored
(Fix) FIxed the view all tabs on stock management dashboard , under inventory alerts, issuing and receiving (#248)
* add batch no and quantity to inventory alerts * fixed view all on stock management dashboard
1 parent 00b2cb2 commit b2d97a9

6 files changed

+210
-6
lines changed

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

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Button } from '@carbon/react';
44
import { navigate, useLayoutType } from '@openmrs/esm-framework';
55
import styles from './stock-home-detail-card.scss';
66
import { WarningHex } from '@carbon/react/icons';
77
import { useStockInventory } from './stock-home-inventory-expiry.resource';
88
import { useStockInventoryItems } from './stock-home-inventory-items.resource';
9+
import ExpiredStockModal from './stock-home-inventory-expiry.component';
910

1011
const StockHomeInventoryCard = () => {
1112
const { t } = useTranslation();
@@ -14,6 +15,8 @@ const StockHomeInventoryCard = () => {
1415
const { items: expiryItems, isLoading: inventoryLoading } = useStockInventory();
1516
const { items: stockItems, isLoading } = useStockInventoryItems();
1617

18+
const [isModalOpen, setModalOpen] = useState(false);
19+
1720
if (isLoading || inventoryLoading) return <></>;
1821

1922
if (stockItems?.length === 0) {
@@ -58,7 +61,7 @@ const StockHomeInventoryCard = () => {
5861
</div>
5962
</div>
6063
))}
61-
<Button
64+
{/* <Button
6265
onClick={() => {
6366
navigate({
6467
to: `${window.getOpenmrsSpaBase()}stock-management/expired-stock`,
@@ -67,7 +70,14 @@ const StockHomeInventoryCard = () => {
6770
kind="ghost"
6871
>
6972
View All
73+
</Button> */}
74+
75+
<Button onClick={() => setModalOpen(true)} kind="ghost">
76+
View All
7077
</Button>
78+
79+
{/* Expired Stock Modal */}
80+
<ExpiredStockModal open={isModalOpen} onClose={() => setModalOpen(false)} expiredStock={mergedArray} />
7181
</>
7282
);
7383
};

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
3+
4+
const ExpiredStockModal = ({ open, onClose, expiredStock }) => {
5+
const headers = [
6+
{ key: 'drugName', header: 'Drug Name' },
7+
{ key: 'batchNo', header: 'Batch No' },
8+
{ key: 'quantity', header: 'Quantity' },
9+
{ key: 'dispensingUnitName', header: 'Unit' },
10+
{ key: 'expiration', header: 'Expiration Date' },
11+
];
12+
13+
const formatDate = (dateString) => {
14+
if (!dateString) return 'N/A';
15+
const date = new Date(dateString);
16+
return new Intl.DateTimeFormat('en-GB', {
17+
year: 'numeric',
18+
month: 'short',
19+
day: '2-digit',
20+
}).format(date);
21+
};
22+
23+
return (
24+
<Modal
25+
open={open}
26+
onRequestClose={onClose}
27+
modalHeading="Expired Stock"
28+
primaryButtonText="Close"
29+
onSecondarySubmit={onClose}
30+
size="lg"
31+
>
32+
<div>
33+
{expiredStock.length > 0 ? (
34+
<TableContainer>
35+
<Table>
36+
<TableHead>
37+
<TableRow>
38+
{headers.map((header) => (
39+
<TableHeader key={header.key}>{header.header}</TableHeader>
40+
))}
41+
</TableRow>
42+
</TableHead>
43+
<TableBody>
44+
{expiredStock.map((item, index) => (
45+
<TableRow key={index}>
46+
<TableCell>{item?.drugName || 'N/A'}</TableCell>
47+
<TableCell>{item?.batchNo || 'N/A'}</TableCell>
48+
<TableCell>{item?.quantity || 'N/A'}</TableCell>
49+
<TableCell>{item?.dispensingUnitName || 'N/A'}</TableCell>
50+
<TableCell>{formatDate(item?.expiration)}</TableCell>
51+
</TableRow>
52+
))}
53+
</TableBody>
54+
</Table>
55+
</TableContainer>
56+
) : (
57+
<p>No expired stock data available.</p>
58+
)}
59+
</div>
60+
</Modal>
61+
);
62+
};
63+
64+
export default ExpiredStockModal;

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Button } from '@carbon/react';
44
import { navigate, useLayoutType } from '@openmrs/esm-framework';
55
import styles from './stock-home-detail-card.scss';
66
import { ResourceRepresentation } from '../core/api/api';
77
import { DocumentImport } from '@carbon/react/icons';
88
import { useStockIssuing } from './stock-home-issuing.resource';
9+
import IssuingStockModal from './stock-home-issuing-modal.component';
910

1011
const StockHomeIssuingCard = () => {
1112
const { t } = useTranslation();
@@ -16,6 +17,8 @@ const StockHomeIssuingCard = () => {
1617
totalCount: true,
1718
});
1819

20+
const [isModalOpen, setModalOpen] = useState(false);
21+
1922
if (isLoading) return <></>;
2023

2124
if (items?.length === 0) {
@@ -64,7 +67,7 @@ const StockHomeIssuingCard = () => {
6467
</div>
6568
</div>
6669
))}
67-
<Button
70+
{/* <Button
6871
onClick={() => {
6972
navigate({
7073
to: `${window.getOpenmrsSpaBase()}stock-management/requisitions`,
@@ -73,7 +76,12 @@ const StockHomeIssuingCard = () => {
7376
kind="ghost"
7477
>
7578
View All
79+
</Button> */}
80+
<Button onClick={() => setModalOpen(true)} kind="ghost">
81+
View All
7682
</Button>
83+
84+
<IssuingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} issuingStock={items} />
7785
</>
7886
);
7987
};

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
3+
4+
const IssuingStockModal = ({ open, onClose, issuingStock }) => {
5+
const headers = [
6+
{ key: 'status', header: 'Status' },
7+
{ key: 'sourceName', header: 'Source' },
8+
{ key: 'destinationName', header: 'Destination' },
9+
{ key: 'stockItemName', header: 'Stock Item' },
10+
{ key: 'stockItemPackagingUOMName', header: 'Unit' },
11+
{ key: 'quantity', header: 'Quantity' },
12+
];
13+
14+
return (
15+
<Modal
16+
open={open}
17+
onRequestClose={onClose}
18+
modalHeading="Issued Stock"
19+
primaryButtonText="Close"
20+
onSecondarySubmit={onClose}
21+
size="lg"
22+
>
23+
<div>
24+
{issuingStock && issuingStock.length > 0 ? (
25+
<TableContainer>
26+
<Table>
27+
<TableHead>
28+
<TableRow>
29+
{headers.map((header) => (
30+
<TableHeader key={header.key}>{header.header}</TableHeader>
31+
))}
32+
</TableRow>
33+
</TableHead>
34+
<TableBody>
35+
{issuingStock.map((item, index) => (
36+
<TableRow key={index}>
37+
<TableCell>{item?.status || 'N/A'}</TableCell>
38+
<TableCell>{item?.sourceName || 'N/A'}</TableCell>
39+
<TableCell>{item?.destinationName || 'N/A'}</TableCell>
40+
<TableCell>{item?.stockItemName || 'N/A'}</TableCell>
41+
<TableCell>{item?.stockItemPackagingUOMName || 'N/A'}</TableCell>
42+
<TableCell>{item?.quantity || 'N/A'}</TableCell>
43+
</TableRow>
44+
))}
45+
</TableBody>
46+
</Table>
47+
</TableContainer>
48+
) : (
49+
<p>No issued stock data available.</p>
50+
)}
51+
</div>
52+
</Modal>
53+
);
54+
};
55+
56+
export default IssuingStockModal;

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Button } from '@carbon/react';
44
import { navigate, useLayoutType } from '@openmrs/esm-framework';
55
import styles from './stock-home-detail-card.scss';
66
import { Delivery } from '@carbon/react/icons';
77
import { ResourceRepresentation } from '../core/api/api';
88
import { useStockReceiving } from './stock-home-receiving.resource';
9+
import ReceivingStockModal from './stock-home-receiving-modal.component';
910

1011
const StockHomeReceivingCard = () => {
1112
const { t } = useTranslation();
@@ -16,6 +17,8 @@ const StockHomeReceivingCard = () => {
1617
totalCount: true,
1718
});
1819

20+
const [isModalOpen, setModalOpen] = useState(false);
21+
1922
if (isLoading) return <></>;
2023

2124
if (items?.length === 0) {
@@ -46,7 +49,7 @@ const StockHomeReceivingCard = () => {
4649
</div>
4750
)),
4851
)}
49-
<Button
52+
{/* <Button
5053
onClick={() => {
5154
navigate({
5255
to: `${window.getOpenmrsSpaBase()}stock-management/orders`,
@@ -55,7 +58,12 @@ const StockHomeReceivingCard = () => {
5558
kind="ghost"
5659
>
5760
{t('receivedView', 'View All')}
61+
</Button> */}
62+
<Button onClick={() => setModalOpen(true)} kind="ghost">
63+
{t('receivedView', 'View All')}
5864
</Button>
65+
66+
<ReceivingStockModal open={isModalOpen} onClose={() => setModalOpen(false)} receivingStock={items} />
5967
</>
6068
);
6169
};

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import { Modal, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, TableContainer } from '@carbon/react';
3+
4+
const ReceivingStockModal = ({ open, onClose, receivingStock }) => {
5+
const headers = [
6+
{ key: 'status', header: 'Status' },
7+
{ key: 'sourceName', header: 'Source' },
8+
{ key: 'destinationName', header: 'Destination' },
9+
{ key: 'stockItemName', header: 'Stock Item' },
10+
{ key: 'stockItemPackagingUOMName', header: 'Unit' },
11+
{ key: 'quantity', header: 'Quantity' },
12+
];
13+
14+
return (
15+
<Modal
16+
open={open}
17+
onRequestClose={onClose}
18+
modalHeading="Received Stock"
19+
primaryButtonText="Close"
20+
onSecondarySubmit={onClose}
21+
size="lg"
22+
>
23+
<div>
24+
{receivingStock && receivingStock.length > 0 ? (
25+
<TableContainer>
26+
<Table>
27+
<TableHead>
28+
<TableRow>
29+
{headers.map((header) => (
30+
<TableHeader key={header.key}>{header.header}</TableHeader>
31+
))}
32+
</TableRow>
33+
</TableHead>
34+
<TableBody>
35+
{receivingStock.map((item, index) =>
36+
item?.stockOperationItems.map((stock, stockIndex) => (
37+
<TableRow key={`${index}-${stockIndex}`}>
38+
<TableCell>{item?.status || 'N/A'}</TableCell>
39+
<TableCell>{item?.sourceName || 'N/A'}</TableCell>
40+
<TableCell>{item?.destinationName || 'N/A'}</TableCell>
41+
<TableCell>{stock?.stockItemName || 'N/A'}</TableCell>
42+
<TableCell>{stock?.stockItemPackagingUOMName || 'N/A'}</TableCell>
43+
<TableCell>{stock?.quantity || 'N/A'}</TableCell>
44+
</TableRow>
45+
)),
46+
)}
47+
</TableBody>
48+
</Table>
49+
</TableContainer>
50+
) : (
51+
<p>No received stock data available.</p>
52+
)}
53+
</div>
54+
</Modal>
55+
);
56+
};
57+
58+
export default ReceivingStockModal;

0 commit comments

Comments
 (0)