@openmrs/esm-stock-management-app 1.0.1-pre.742 → 1.0.1-pre.747

package/src/stock-items/add-stock-item/transactions/printout/transactions-stockcard-printout.component.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from '@carbon/react';
+import { useStockItem } from '../../../stock-items.resource';
+import PrintableBincardTransactionHeader from './printable-bincard-transaction-header.component';
+import PrintableStockcardTransactionHeader from './printable-stockcard-transaction-header.component';
+import PrintableTransactionFooter from './printable-transaction-footer.component';
+import styles from './printable-transaction.scss';
+import StockOperationReference from '../../../../stock-operations/add-stock-operation/stock-operation-reference.component';
+import { formatDisplayDate } from '../../../../core/utils/datetimeUtils';
+import { ArrowLeft } from '@carbon/react/icons';
+import { usePatient } from '../../../../stock-lookups/stock-lookups.resource';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+type Props = {
+  title: string;
+  columns: any;
+  items: any;
+};
+
+const TransactionsStockcardPrintout: React.FC<Props> = ({ columns, items, title }) => {
+  const [mappedData, setMappedData] = useState([]);
+  const [patientData, setPatientData] = useState({});
+
+  useEffect(() => {
+    const fetchPatients = async () => {
+      const patientPromises = items
+        .filter((item) => item.patientUuid) // Only fetch for items with patientUuid
+        .map(async (item) => {
+          const customePresentation = 'custom:(uuid,display,identifiers,links)';
+          const url = `${restBaseUrl}/patient/${item.patientUuid}?v=${customePresentation}`;
+          const response = await openmrsFetch(url); // Assume `openmrsFetch` is a fetch utility
+          return { uuid: item.patientUuid, data: response.data };
+        });
+
+      const resolvedPatients = await Promise.all(patientPromises);
+
+      // Map patient UUIDs to their data
+      const patientMap = {};
+      resolvedPatients.forEach((patient) => {
+        patientMap[patient.uuid] = patient.data;
+      });
+
+      setPatientData(patientMap); // Save patient data in state
+    };
+
+    fetchPatients();
+  }, [items]);
+
+  useEffect(() => {
+    // Map items with patient data
+    const data = items.map((stockItemTransaction) => {
+      const patient = stockItemTransaction.patientUuid ? patientData[stockItemTransaction.patientUuid] : null;
+
+      return {
+        ...stockItemTransaction,
+        id: stockItemTransaction?.uuid,
+        key: `key-${stockItemTransaction?.uuid}`,
+        uuid: `${stockItemTransaction?.uuid}`,
+        date: formatDisplayDate(stockItemTransaction?.dateCreated),
+        location:
+          stockItemTransaction.operationSourcePartyName && stockItemTransaction.operationDestinationPartyName ? (
+            stockItemTransaction.operationSourcePartyName === stockItemTransaction?.partyName ? (
+              stockItemTransaction.quantity > 0 ? (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
+                </>
+              ) : (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationSourcePartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationDestinationPartyName}
+                </>
+              )
+            ) : stockItemTransaction.operationDestinationPartyName === stockItemTransaction?.partyName ? (
+              stockItemTransaction.quantity > 0 ? (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
+                </>
+              ) : (
+                <>
+                  <span className="transaction-location">{stockItemTransaction.operationDestinationPartyName}</span>
+                  <ArrowLeft size={16} /> {stockItemTransaction.operationSourcePartyName}
+                </>
+              )
+            ) : (
+              stockItemTransaction?.partyName
+            )
+          ) : (
+            stockItemTransaction?.partyName
+          ),
+        transaction: stockItemTransaction?.isPatientTransaction
+          ? 'Patient Dispense'
+          : stockItemTransaction.stockOperationTypeName,
+        quantity: `${stockItemTransaction?.quantity?.toLocaleString()} ${stockItemTransaction?.packagingUomName ?? ''}`,
+        batch: stockItemTransaction.stockBatchNo
+          ? `${stockItemTransaction.stockBatchNo}${
+              stockItemTransaction.expiration ? ` (${formatDisplayDate(stockItemTransaction.expiration)})` : ''
+            }`
+          : '',
+        out:
+          stockItemTransaction?.quantity < 0
+            ? `${(-1 * stockItemTransaction?.quantity)?.toLocaleString()} ${
+                stockItemTransaction?.packagingUomName ?? ''
+              } of ${stockItemTransaction.packagingUomFactor}`
+            : '',
+        totalout:
+          stockItemTransaction?.quantity < 0
+            ? `${-1 * stockItemTransaction?.quantity * Number(stockItemTransaction.packagingUomFactor)}`
+            : '',
+        patientId: stockItemTransaction?.patientId ?? '',
+        patientUuid: stockItemTransaction?.patientUuid ?? '',
+        patientName: patient?.display ?? '', // Use patient display name if available
+        patientIdentifier: '',
+      };
+    });
+
+    setMappedData(data);
+  }, [items, patientData]);
+
+  return (
+    <div>
+      <PrintableStockcardTransactionHeader itemName={title} />
+
+      <div className={styles.itemsContainer}>
+        <div className={styles.tableContainer}>
+          <DataTable data-floating-menu-container rows={mappedData} headers={columns} useZebraStyles>
+            {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+              <div>
+                <TableContainer>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody style={{ fontSize: '8px' }}>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </div>
+            )}
+          </DataTable>
+        </div>
+      </div>
+
+      <PrintableTransactionFooter title={''} />
+    </div>
+  );
+};
+
+export default TransactionsStockcardPrintout;

package/src/stock-items/add-stock-item/transactions/transaction-filters/transaction-locations-filter.component.tsx

@@ -38,7 +38,7 @@ const TransactionsLocationsFilter = <T,>(props: TransactionsLocationsFilterProps
             onChange(data?.selectedItem?.name || '');
           }}
           initialSelectedItem={`${stockLocations[0]?.name}`}
-          itemToString={(item) => t('location', `${item?.name}`)}
+          itemToString={(item) => (item ? item.name : '')}
           shouldFilterItem={() => true}
           placeholder={props.placeholder}
           ref={ref}

package/src/stock-items/add-stock-item/transactions/transactions.component.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import StockOperationReference from '../../../stock-operations/add-stock-operation/stock-operation-reference.component';
 import { Add } from '@carbon/react/icons';
 import { Printer } from '@carbon/react/icons';
-import TransactionsPrintout from './printout/transactions-printout.component';
+import TransactionsPrintout from './printout/transactions-bincard-printout.component';
 import TransactionsPrintAction from './printout/transactions-print-action.component';
 
 interface TransactionsProps {
@@ -32,7 +32,7 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
     setCurrentPage,
     setStockItemUuid,
     setLocationUuid,
-    printHeaders,
+    binCardHeaders,
   } = useStockItemsTransactions(stockItemFilter);
 
   useEffect(() => {
@@ -127,7 +127,7 @@ const Transactions: React.FC<TransactionsProps> = ({ stockItemUuid }) => {
     <DataList
       children={() => (
         <>
-          <TransactionsPrintAction columns={printHeaders} data={tableRows} itemUuid={stockItemUuid} />
+          <TransactionsPrintAction columns={binCardHeaders} data={tableRows} itemUuid={stockItemUuid} />
           <TransactionsLocationsFilter
             onLocationIdChange={(q) => {
               setLocationUuid(q);

package/src/stock-items/add-stock-item/transactions/transactions.resource.tsx

@@ -76,7 +76,7 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
     [],
   );
 
-  const printHeaders = useMemo(
+  const binCardHeaders = useMemo(
     () => [
       {
         key: 'date',
@@ -130,6 +130,6 @@ export function useStockItemsTransactions(filter?: StockItemInventoryFilter) {
     setLocationUuid,
     setPartyUuid,
     setStockBatchUuid,
-    printHeaders,
+    binCardHeaders,
   };
 }

package/src/stock-items/stock-items.resource.ts

@@ -39,6 +39,7 @@ export interface StockItemInventoryFilter extends ResourceFilterCriteria {
   date?: string | null;
   includeStockItemName?: 'true' | 'false' | '0' | '1';
   excludeExpired?: boolean | null;
+  isPatientTransaction?: 'true' | 'false';
 }
 
 export interface StockItemPackagingUOMFilter extends ResourceFilterCriteria {

package/src/stock-lookups/stock-lookups.resource.ts

@@ -267,6 +267,14 @@ export function usePatients(filter: ConceptFilterCriteria) {
   };
 }
 
+// get a Patient
+export function usePatient(patientUuid: string) {
+  const customePresentation = 'custom:(uuid,display,identifiers,links)';
+  const url = `${restBaseUrl}/patient/${patientUuid}?v=${customePresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient>>(url, openmrsFetch);
+  return { isLoading, error, patient: data?.data };
+}
+
 type UserRole = {
   results: Array<{
     userUuid: string;